articles on

Holiday Card with Adobe Capture and Illustrator

Holiday Card with Adobe Capture and Illustrator

It's that time again, the most wonderful time of the year, at least that's what the old song says. I love the holidays, and Abduzeedo was born at this time back in 2006, which makes me even more nostalgic. But the reason of this post is not to talk about the past but to showcase a tutorial that illustrates the future at least in terms of how mobile tools can be incorporated in your design process replacing old things like scanners. This tutorial is a courtesy of Von Glitschka. He shows us how to create a Holiday Card using Adobe tools like Capture and the old classic Illustrator. Step 1 Even in a digital age, I like to begin with a pen and paper. This design started off as a rough sketch to work out the main art for our design’s theme. Step 2 Working from our rough sketch, I inked the final line work with a brush pen to imbue it with nice thick and thin lines. Step 3 Using Adobe Capture CC, I transformed my art from ink on paper to a digital vector image. I also used the slide control to adjust the exposure and add/subtract detail. Step 4 Once I’ve captured my artwork, I quickly removed the unwanted content, including the pen captured in this image, using the select/deselect slider. Step 5 Using Creative Cloud’s CreativeSync feature, I easily saved my captured assets into Creative Cloud Libraries. From there, I was able to access my vector artwork across Illustrator CC and Photoshop CC within seconds. Step 6 Since installing Adobe Capture CC, I take pictures of anything and everything for inspiration! I’m particularly fond of these anime manga patches, which I used to develop my color theme. The best part – all of these swatches can be easily saved to CC Libraries and acessed in Illustrator CC, InDesign CC and Photoshop CC. Step 7 Once I transferred my artwork from Adobe Capture CC into Illustrator CC, I began to add colors to my penguin. I wanted the color to loosely fit within the lines, so I used the Pen tool and loosely followed the shapes. Step 8 Seeing the colors captured with Adobe Capture CC helped me adjust my overall color scheme to improve my design. Instead of black, I shifted the line work to a darker blue. This kind of fluid workflow is facilitated by Adobe Capture CC because it allows me to easily experiment with a wide range of swatches at a moment’s notice and consider color themes I might not have thought of before. Step 9 Focusing on the background, I used my custom color theme to build out the background image and snow. Step 10 With Adobe Capture CC, you can leverage analog methods and easily integrate them into a digital workflow. For this design, I wanted authentic-looking brush strokes, so I used an actual paint brush and black acrylic paint to create the artwork. Step 11 I love making custom brushes with Adobe Capture CC. For this, I captured my hand-painted strokes, then cropped out what I didn't need. Using the filters, I adjusted and customized my brush stroke to transpose it into an asset. Adobe Capture CC allowed me to test drive the brush within the app so I could see how it would look once I accessed it in Photoshop CC or Illustrator CC via CC Libraries. Step 12 Once I saved my brushes to a CC Library, they automatically appeared in my CC Libraries panel in Illustrator CC. I drew a stroke and applied the new brush design to it. The process doesn’t get any easier, and the results look authentic and add a lot of organic flair to the overall aesthetic. Step 13 I could have used a font, but almost everything in this design was created by hand, so I decided handletter the type as well. I sketched the words on paper, scanned it in and used the Pen tool to complete.   The final type in place really added a nice level of fun to this design. Looking at my design, I realized I was missing an integral piece – SNOWFLAKES!   Instead of cluttering the design with ornate graphics of snowflakes, I decided to use a repeat pattern. I first created a Pattern swatch (shown on left) in black and white, then adjusted the opacity of the various white flakes as they’d appear on the background color. Once I was happy with the snow, I dragged the art into the Swatches panel and began using the pattern.   To adjust the pattern tiling, adjust the elements of the pattern, or recolor it, I just double-click on the Pattern swatch to enter Pattern Editing mode in Illustrator CC.   My initial color composition was blue, but creativity is all about exploration. I played around with the color themes to develop three separate color iterations. I settled on the green color scheme for my final holiday card design. The final card design is fun, as was the process to create it using Adobe Capture CC and Illustrator CC. In total, this project took me about 3 hours. For more information check out http://www.glitschkastudios.com/

ABDZ 03 - More LInes in Illustrator and Photoshop

ABDZ 03 - More LInes in Illustrator and Photoshop

Let's go again. Third week and third image. I am taking my Sunday night to try to come up with something. I had forgotten how hard it is to start a new image from scratch. I must start paying more attention to movies and books so I can have more inspiration. For this week I tried to recreate a really cool shape I saw on Pinterest sometime ago that was about some hipster badges. I thought it was a great exercise and way to lose myself a bit more. I hope you enjoy it. Step 1 I started in Illustrator. With the Star Tool create a 4 sides star. Step 2 With the Direct Selection Tool (A) select the controller to round the corners. Use the maximum amount for the 4 point star. Step 3 Duplicate the rounded star and rotate it 45 degree. Step 4 Here I started to create some space when the lines intersect. Step 5 Here's the final result with the spaces. Step 6 I added the abduzeedo symbol and made the strokes a bit thinner. Step 7 With the Offset Path, the same we played with last week, I created 3 more lines for each path. They are closed though. Step 8 I delted the lines that connect the paths. That way they are now just 3 lines. There was some little adjustments to make them the same lenght as well. Step 9 I pasted the vectors in Photohsop and then added a Bevel & Emboss and Drop Shadow. You can see the values below. Conclusion To make the image a bit more dramatic I added a nice leather texture offered by Shutterstock, the image titled is Luxury black leather texture background by 123creative.com. The final result as yu can see is a simple yet elegant design. You can even try to add a more chrome style but I was very interested in getting that black on black look. Download Photoshop file Download Photoshop file

ABDZ 002 - Playing with Strokes

ABDZ 002 - Playing with Strokes

Second week of my little project of trying to create an image per week. This time I got inspired by simple vector illustrations I saw that had lines creating the logo. I've done something like this in the past but never with the style that I played with this week, completely out of my comfort zone. Below you can see the little step by step of this image done in Illustrator and Photoshop. Step 1 I started with the Abduzeedo logo in a simple line. Step 2 Then I used the Offset Path to create more lines. Step 3 The offset path is quite simple to use, just offset by 1pt and keep repeating that with the offset path result. Step 4 The end result of the offset path is always a closed shape. So with the Direct Selection Tool (A), I deleted the line that closed the shape to have open lines. Step 5 Now with the lines with a nice brownish color I added a solid and thick version of the logo with a redish/pink color under the lines. Step 6 To add more details I offset the outer path once again but for this one I used the dashed stroke with green for the color. Step 7 Here's in Photoshop already, I edited a bit the green path to make it less uniform. The background also was changed to a beige tone. Step 8 I added the logotype "Abduzeedo" trying to replicate the same effect. I just used copies of the text with different strokes. Conclusion Here's the final result of my second image. I had never played with this style and it was a good exercise for me, especially in terms of going out of my comfort zone. Download Photoshop file Click here to download the Photoshop file

Illustrator vs Photoshop

Illustrator vs Photoshop

Indian designer M.A. Kather created a project about the differences in illustrator and Photoshop explained in minimalistic visual design. What's your favorite? For more from M.A. Kather visit behance.net/kather_bfa. What's your Favorite? Illustrator or Photohop?

Playing with Lines in Photoshop and Illustrator

Playing with Lines in Photoshop and Illustrator

The last tutorial I wrote was back in January, it's been quite a long time and boy I missed it. I have been trying to organize myself to start playing more with not only Photoshop and Illustrator but also Sketch and other tools so I can share some new things with you. It's always a challenge due to my day to day job but it makes me feel so good when I finish something that went from my head to the final design in a very short period of time. Quite refreshing. So this week I will share a tutorial on an image I created inspired by some similar artworks I saw on Pinterest, more precisely, the project call Linea by Marcos Bernardes.. The tools I used were Illustrator for the basic vectors and Photoshop for the final details and shadows. Referencens Step 1 Open Illustrator and create a new document. After that with the Line Segment Tool create 2 lines like the image below. The rectangle size is for a 2880x1800 resolution. Step 2 Select the Blend Tool and create a blend object by tapping on both segments. After that double click on the Blend Tool icon to open the Blend Options dialog box. Change the Spacing to Specified Distance and use 30 pixels for it. Step 3 With the Pen Tool (P) create the shape you want to pop from the lines. I am using the Abduzeedo symbol. Step 4 After creating the shape you want duplicate it 3 or 4 times to make the symbol spread to more lines, like outer stroke. Also you will have to create a shape with the color of the background to hide the lines that go under the symbol. Step 5 After that with the Pen Tool and the Direct Selection Tool make sure to connect the new lines with the ones that they should diverge from. Step 6 Select the points that the lines connect and then change the corner option. I am using 90 pixels for the roundness. Step 7 Change the colors to the ones you prefer. I am using a dark grey and teal color. I like the dark themes, this one heavily inspired by Google Material Design. Step 8 With the Polygonal Lasso Tool select the symbol and create a new layer from it (Layer>New>Layer from Copy). After that go Layer>Layer Style>Drop Shadow. Step 9 For the shadow options I used Multiply for the Blend Mode, 120º angle, 20 pixels Distance, 40 pixels Size and the most important, 25% Noise. The noise is really cool because it adds some nice texture to a rather uniform vector illustration. Step 10 Group the layer and then apply a mask to hide the areas selected below. That way the shadow will give the perception that the lines are going over or popping from the rest of the composition. Conclusion You can also add some vignette and more textures if you want. For me it's pretty much done. I could go over some details that still bother me a little bit like some of the lines in the middle of my symbol. But that is beyond my little thought/practice exercise. I hope that is useful for you and you can play with that on your own ideas. Download Photoshop file Click here to download the Photoshop file

ABDZ Constellation in Photoshop

ABDZ Constellation in Photoshop

This weekend I went to the movies to watch Interstellar in IMAX 70mm. This movie was for me the most anticipated one this year and I left the theater in awe. The movie is visually stunning and as expected from Nolan, a mind-bending experience in terms of storytelling. Still blown away, I decided to create an image in Photoshop inspired by my experience watching this incredible film. So in this little tutorial or case study, I will walk you through my process from Illustrator to Photoshop. I won't provide a lot of details because I think it's better for you to try and not follow instruction, but I think you can have a good idea of how the end result was achieved. Step 1 In Illustrator, create a new document and then with the Polygon Tool create a polygon with more than 8 sides. Step 2 With the Line Segment Tool start creating lines and connecting them to create the polygonal effect we want to achieve. Step 3 Once you finish the full sphere, delete some areas in the center like the image below. After that with the Ellipse Tool, create a circle for each intersection of lines. Step 4 I repated the same process for the Abduzeedo symbol. Step 5 In Photoshop, create a black circle in the center of the document. Step 6 Import the design you created in Illustrator to Photoshop. Step 7 To add stars in the background, an easy techinque is to create a new layer, fill it with black and then go to Filter>Noise>Add Noise. Use around 10% for the amount. Then go to Image>Adjustments>Levels. Adjust the black and the white leves until you have just a few white dots. Step 8 Add the text you would like to add to your design. I am using a quote from the Interstellar movie. Step 9 Using Google Image search I searched for a light leak image. Then with the Adjustments>Hue and Saturation I changed the colors to a cool, blue/purple palette. After that change the Blend Mode to Linear Dodge (add). That will make the image only visible over the dark areas of the composition and invisible over white. Conclusion The process behind this image is quite simple and it was something I used to do a lot in the beginning of the blog, just playing with Blend Modes and the space theme. With vectors and the white area the composition got simpler and more refined. It would work really well for a poster as well. Now it's up to you to come up with your own design, but first, got to the movies to watch Interstellar and get some inspiration.

Vector Polygonal Background in Illustrator

Vector Polygonal Background in Illustrator

A couple of weeks ago I posted an image with a polygonal background that I discovered on the Pattern Library website and got some requests to recreate so herein lies my attempt. So in this tutorial I will show you how to create a vector polygonal pattern using Illustrator and the Pattern make feature. The process is quite simple but there are some details that are very important to make sure your pattern is tileable. Step 1 Open Illustrator and create a new document. With the Rectangle Tool create a square like the image below. Step 2 Duplicate the square by holding Option+Shift. Make sure they snap with no space between them. Step 3 Create a grid by repeating the step 2 process. Step 4 With the Direct Selection Tool (A) select the top and bottom points on the same column. Them move them to any direction. It's very important to do that for these points because that will make sure that the illustration will be tillable. Step 5 Here's the outside points that will connect when you create the pattern. Step 6 For the internal points you can do whatever you want. If you want smooth polygons don't move them too much. Also if you want to add more square to your grid that will allow you to give more details to your background. Step 7 Add some colors, I used greyscale because I can change the hues in Photoshop later on. Step 8 Select polygons that have the same color and duplicate them in place. Then go to Window>Swatch Libraries>Patterns>Basic_Graphics_Lines. Use one of the horizontal lines presets. Step 9 Select the image you created and go to Object>Expand. After that group the shapes and go to Object>Pattern>Make. Select Size Tile to Art and Move Tile with Art. After that change the H and V spacing until you have no space between the tiles. Step 10 Click done and you will have a nice poliygonal pattern to play with. Step 11 In Photoshop, create a new document. I am using 2880x1800 pixels. Copy a big rectangle with the pattern in Illustrator and paste it in Photoshop. Step 12 Add a new layer on top and change the color. After that change the Blend Mode to Overlay. You can try as many colors you want by doing that. You can also play with the Levels to reduce the contrast . Conclusion Add your logo and you are good to go. The process is quite simple, it's just about paying attention to the details and you will have a nice wallpaper for your laptop or new iPhone ;) Download Illustrator File Download the Illustrator file used for this tutorial

Playing with Ligatures

Playing with Ligatures

Last week I posted a couple articles on typography, more precisely ligatures, and despite the fact I have never been a huge fan of this style it is extremely popular. With that in mind I decided to practice and learn more about it. For this first image, I've created a simple composition in Illustrator using a popular quote. The process is quite simple, I just played with text sizes and tried to connect the ligatures albeit in different rows. So for this post I will walk you through my process very briefly though I must admit it took me quite some time to achieve a work that satisfied. Step 1 Create a new document in Illustrator and with the Horizontal Type Tool add the text you want to use for the composition. I am using a quote that was said to be Mark Twain's but there are controversies. The font I am using is PF Champion Script and it can be purchased at https://www.myfonts.com/fonts/parachute/pf-champion-script-pro/ Step 2 Reorganize the words and try to connect them by the ligatures. Step 3 The font comes with fantastic glyphs and they are perfect to fill some areas between words. Step 4 For the "The" I used to glypch, one connected with the "T" and the other with the "e". Step 5 Here's the final text composition. Step 6 Now let's start adding some subtle shadows. I used this effect for letters that have crossing segments and any looping form. Step 7 The final colors I used were #242529 for the background and #D4EA61 for the text. Conclusion The final composition is fairly simple, the goal is to drive all the attention to the text and ligatures. I also added the Abduzeedo logo using #FF4240 to create some contrast. Besides that I also created another version with a super cool pattern from The Pattenr Library titled Shattered Island (http://thepatternlibrary.com/#shattered-island). You can try different variations, but now it's up to you, meanwhile I will keep playing and trying to refine my ligature skills.

Playing with Triangles in Photoshop

Playing with Triangles in Photoshop

It's been quite some time since I've experimented with new ideas. Today, I decided to go through my personal library of inspiration, likes on Pinterest, etc and found some really good images from various artists, in particular the work of Sarah Mick. I am also still in love with the game Monument Valley, so this post also has much inspiration drawn from that visual language. Let's get to it. In this tutorial I will show you how to create a super simple wallpaper using Photoshop and Illustrator. The process is very straightforward but the result is quite good in my opinion. Step 1 Create a new document in Illustrator and then create 2 squares like the image below. The smallest one in black and the bigger one in medium grey. Step 2 With the Blend Options select both squares and them create a blend with 3 Specified Steps. Step 3 Add another rectangle for the background with a light grey, like the image below. Step 4 Copy the image from Illustrator and paste it in Photoshop. Step 5 Go to Filter>Blur Gallery>Tilt-Shift. Use 15 pixels for the Tilt-Shift and 0 distortion. Step 6 Let's add an image for the background. I am using a sky image in grey scale that I found on Google Images. After that I masked it to make sure it wasn't overlapping the triangles. Step 7 Go to Layer>New Adjustment Layer>Hue and Saturation. Use 195 for Hue and 43 for Saturation. Step 8 Now select all layers and then merge them into a new layer. After that go to Filter>Noise>Add Noise. Use 2% for the Amount and Gaussian for the Distribution. Conclusion Now just add your text and logo and you are good to go. It's a simple artwork but has some strong visual appeal because of the triangles and since I saw some posters on Behance and the game The Monument Valley I fell in love with this concept. Now it's up to you, just go and have some fun! Download Download the Photoshop file

Surf Bottle - Case Study

Surf Bottle - Case Study

It's been a minute since we've featured a case study on illustration here at Abduzeedo so we felt the need to showcase something special. We're excited to share the work of Anna Kočová via the illustration entitled Surf Bottle. Anna shares with us the process behind the illustration from the basic sketches to the final result. For more information about Anna check out her Behance profile at https://www.behance.net/annakocova

Impossible ABDZ in Illustrator

Impossible ABDZ in Illustrator

Last Friday I bought the game Monument Valley and got hooked an an instant. The art direction is fantastic, full of beautifully designed puzzles playing with impossible forms, you feel it could be a game designed by M.C Escher. A few hours playing and I was inspired to create an artwork for Abduzeedo, just to have some fun. The end result, and some quality time in Illustrator and Photoshop, I ended up with an outline style artwork for a poster and wallpaper. So in this little case study/tutorial I will show you the process behind my impossible ABDZ symbol using Illustrator and Photoshop. Step 1 In Illustrator start creating a basic triangle using the Rectangle Tool and then the Direct Selection Tool. Create the front face, the one with the lighter grey and then the back face on the left with a darker grey and the top face on the right with a mid grey. Step 2 Add the bottom part with the same grey as the back face part in step one. Step 3 Add the top face of the bottom part using the same grey as the top face in step one. Connect them by extending the right top face. Make some adjustments to make sure the vertices are aligned. Step 4 Here I decided to edit my penrose triangle to have a little bit of the Abduzeedo Symbol form. Step 5 Here I decided to play with some shadows to add some depth, the first idea was to follow a nice rendering with greys and gradients. Step 6 This was my first outcome, it was heavily inspired by the game Monument Valley. It was nice but I wanted something simpler. Step 7 I decided to to use just the outlines, it is a quite common style but I realised I haven't done something like that for Abduzeedo. The first thing was to remove the fill colors and just add a stroke. After that I used Pathfinder to make sure the shapes are not overlapping on another. Conclusion Here's the final result, just increase the weight of the strokes and added a few more details in Illustrator. You can add textures or more elements if you want, but for now I am pretty happy with the outcome, especially using as my desktop wallpaper.

San Francisco Skyline in Illustrator

San Francisco Skyline in Illustrator

A couple of weeks ago I decided to practice my Illustrator skills to create a simple skyline of San Francisco for a print material I am working on. I loved the style that Ryan Putnam explored on some of his illustrations of city skylines so I decided to give it a try. I have to say, I didn't have that much fun doing illustrations since I was in high school I think. So in this short post I will walk you through my basic creative process behind the San Francisco Skyline illustration. I used Adobe Illustration for this project but it can be done with any vector tool. Step 1 - References The first step was to get references of some iconic buildings in the San Francisco skyline. San Francisco is a beautiful city and it was very easy to get a few landmarks. The ones I picked was, Transamerica Pyramid, Ferry Building, Embarcadero Center, Alcatraz, Cable Car, the fog and of course the Golden Gate Bridge. Below you can see some references. Step 2 To create the buildings I used basic shapes and the Blend Tool to make the windows. Below you can see the process behind the Transamerica Pyramid. Step 3 The Embarcadero Center I used the rectangle tool to create half of the building. For the windows, I just used a dotted stroke line. After the first half was done, I just duplicated it and there it was, another building. Step 4 The Ferry Building took more time because of its architecture style. But again, just basic forms and a lot of repetition. The secret is to capture the most important features, it doesn't have to be perfect. Step 5 Putting everything together was a lot of fun. I started adding some placeholder buildings to fill the space. For the Golden Gate Bridge I used the Blend Tool and also created the fog with a bunch of circles that later on I united them with the pathfinder tool. The cool thing about this type of illustration is that you can create it quite easily, it just require time. Another important tip is to make the outer stroke of the buildings bigger than the inner. Conclusion The final print is done but not ready to be shown yet. Soon I will have more details, but below you can see two explorations, one in a print mockup and another one a simple animated gif.

Positive Thinking Wallpaper in Illustrator

Positive Thinking Wallpaper in Illustrator

I am always change the wallpaper of my computer, not so much on my mobile devices, I don't know why. The only think I know is that I look at my wallpaper quite a lot because of the second monitor. In order to get some inspiration I decided to start a series of wallpapers with positive thinking quotes. The first one is from Mark Twain and the theme is inspired by an ad from the 80s, my favorite decade for sure. In terms of tools, for this one I will use Illustrator and Photoshop but my goal is to use Sketch and other apps as well. This is not a tutorial per se, it's just a little case study or behind the scene of how I create this wallpaper and the future ones. There won't be a lot of details, but it's an opportunity for me to explore more Illustrator, Photoshop, Sketch or any tool that comes to my mind. Step 1 Open Illustrator and create a new document. For wallpapers I used 2880x1800 pixels. After that with the Line Segment Tool (\) create 2 lines. I am using the same angle of the Abduzeedo logo. Step 2 With the Blend Tool create 8 steps from the two lines. Step 3 Now using the color spectrum, change the colors of the lines going from yellow to green. Step 4 The idea for this future wallpapers is to use a positive thinking quote. The first one is from Mark Twain, and it says "I've had a lot of horries in my life, most of which never happened". Step 5 With the Direct Selection Tool (A) edit the text box to have the same angle of the lines. Step 6 To finish this first wallpaper I just placed the Abduzeedo logo in the center. Conclusion I am not fan of pure vectors, I don't know why but I always like to add a little texture. So in Photoshop I added a simple paper texture to make it less "vector". The whole idea of this first wallpaper was to explore my favorite theme, 80s with a simple and elegant wallpaper. I hope you had fun and let's see what comes next week. Download Photoshop Download Photoshop file

ABDZ Weave Pattern in Illustrator

ABDZ Weave Pattern in Illustrator

I have been taking a lot of pictures since I decided to do a photo a day project this year. I got a good camera and started taking pictures of pretty much everything that inspired me. I was in Bloomington, Indiana and I was really amazed by the pattern of the bathroom floor. I took a photo and decided to recreate it as pattern in Illustrator. So in this little tutorial I will show you how to create vector patterns in Illustrator. The process is quite simple but you will be able to create really amazing patterns for future projects. Step 1 Using the photo I took for inspiration and reference I imported it to Illustrator. Step 2 Using the Rectangle Tool, start recreating the basics of that pattern. Step 3 Once you have the basic shapes right, start playing with colors and shadows. For the colors I used Adobe Kuler (https://kuler.adobe.com/create/color-wheel/) for reference. Note that at this step you are still creating the basic title. Step 4 Now in order to make the pattern you have to make sure that your artwork is tile-able. Below you can see the final form I ended up getting to make sure that the pattern will be scaleable. Step 5 Select your design and go to Object>Pattern>Make. Use the default settings and click Done. Your patter will be added to the Swatch pane. You can always double click to edit it. You can change colors and pretty much everything. Conclusion Here's the final design. The hard shadows and the vector style give it a really nice feel. The form is the same as the photo I took, but just with a more modern feel and it does look really cool as a wallpaper for your computer, tablet and phone. Now it's up to you. Take pictures of patterns you see on the streets, you never know when you might need some references. Illustrator source file Download Illustrator file

Typographic Logo in Illustrator and Photoshop

Typographic Logo in Illustrator and Photoshop

I have been playing more with simple stencil style logos in my spare time, especially because it requires a lot of practice and attention to detail. I surely have a lot to improve upon and that's why I have been spending time trying to recreate this style using Illustrator and Photoshop. For this tutorial I will show you how to use simple Illustrator tools to create a very trendy logo. The process is quite simple and can be applied to all sorts of logos and illustrations for your future projects. Step 1 In Illustrator create a simple stencil using basic shapes and different fonts. The fonts I used here can be found at the Lost Type http://losttype.com/browse/ - Step 2 Let's start adding some effects. The first one is the Blend effect. Select the word New York and duplicate it. Change the color of the duplicated word to white and make sure it's underneath the black one. After that go to Object>Blend - Use 4 pixels for the Spacing with Specified Distance. Step 3 Repeat the same thing to create a simple effect of diagonal lines for the top horizontal dividers. Step 4 Select the first text and go to Object>Envelope Distort>Envelope with Warp. Use Arc for the Style with 30% for the Bend. Step 5 Repeat the same thing for the text at the bottom. Step 6 Select the rectangles and text used to create the ribbon and go again to Object>Envelope Distort>Envelop with Warp... - Use -30% for the Bend with Arc for the Style. Step 7 Here's the final result of the stencil. Step 8 Now in Photoshop, I used one of the photos I took while I was in New York. Import it to Photoshop and crop it to fit the canvas size you are working on. In my case, 2880x1800 pixels. Step 9 Add a new layer and fill it with a simple grey/green color. After that change the opacity to 60%. Step 10 Add another layer and fill it with a gradient from black to white in the center. After that change the Blend Mode to Multiply at 80%. Step 11 Copy the logo from Illustrator and paste it in Photoshop. Step 12 Go to Image>Adjustments>Invert. After that change the Blend Mode to Lighten. Step 13 Go to Layer>New Adjustment Layer>Photo Filter. Use Cooling Filter with 25% for Density. Conclusion After over one hour you can have something similar to the result I got. This was a simple exercise to try to recreate some of the awesome logos I see in most of the design sites out there. I know there's a lot to refine, but this was as I said, a simple playing time with Illustrator and Photoshop trying to learn more about this very trendy and I'd say hipster style. I hope you have fun creating your own version. Download .AI file

Offset Path Effect

Offset Path Effect

Last week Adobe release some new updates in the Creative Cloud apps, including Photoshop and Illustrator. The best new feature for me was the live corner effects in Illustrator. It is a simple little feature but it will make my job so much easier, especially when creating logos, icons and symbols. To give you a little overview I decided to create a new Abduzeedo wallpaper using Illustrator and Photoshop applying some offset path effects and of course the live corner. So in this tutorial I will show you how to create a simple wallpaper mixing vectors and photos. We will play with Offset Path, Live Corners and some other effects in Illustrator and Photoshop. Step 1 Create a simple path in Illustrator. I am using the Abduzeedo symbol for this tutorial. Step 2 One of the newest features in Illustrator is the Live Corners. The cool thing about this feature is that you can make round corners much easier. To do that, with the Direct Selection Tool (A), select the corner you want to edit and notice there's blue circle with a dot in the center. Step 3 Drag that circle down to start editing the corner. Step 4 Here's the Abduzeedo symbol with some better rounded corners done with live corners. Step 5 Select the path and go to Object>Path>Offset Path. Use 10px Offset and keep the default values for the rest. Make sure you check Preview so you can see the effect. Step 6 Repeat the effect again. You can increase the stroke weight to make it more visible. Tip. If you want to have rounded edges like the one on the bottom right, expand the first path. Step 7 Repeat the process a few more times. Step 8 Now in Photoshop, find a nice photo to use in the background. The one I am using is from one of the links in this really cool post at Medium: Stock photos that don’t suck https://medium.com/design-ux/62ae4bcbe01b Step 9 Copy the vector in Illustrator and paste it in Photoshop. Step 10 Select the vector and go to Image>Adjustments>Invert. After that change the blend mode to Color Dodge at 60% Step 11 Go to Layer>New Adjustment Layer>Photo Filter. Select Warming Filter(85), use 25% Density. Conclusion You can apply some brushes to make the symbol sort of old and with that distressed effect and your composition will be done. I love how simple features can make some processes much easier. The live corner effect and the offset path allowed me to create this composition and less than 30 minutes. Of course before that I spent quite a long time looking for inspiration ;)

Abduzeedo Happy Holidays Art in Illustrator and Photoshop

Abduzeedo Happy Holidays Art in Illustrator and Photoshop

One of the best ways to learn is by practicing and trying to recreate styles and effects that you like. We have been doing this here on Abduzeedo since the beginning, always adapting a little bit to add our own unique flavor. The goal is to learn the details behind a style or composition so we can apply some of that to our future work. I've been seeing quite a few logos using this style so what we'll show you today is how to create a logo, Abduzeedo just seemed natural, using Illustrator and then Photoshop. So, for this tutorial I will show you how to create a simple vector mark using Illustrator and then we'll add some effects in Photoshop. Step 1 Open Illustrator and with the Line Segment Tool create a vertical line. Copy and paste in place and rotate it 90º. Copy the 2 lines, group them and rotate 90º again. Step 2 Select the lines and rotate 33º Step 3 Duplicate and rotate the segments until you have something like the image below. Step 4 Select some segmentes and then start resizing them so you have different sizes for the lines The the first set will be the bigger and from there one you make them a bit smaller. Step 5 Add your logo in the center using a big white stroke. Also increase the stroke size of the lines to 8pt. Step 8 Selet the symbol and copy it. Go to Object>Expand. Make sure that the stroke is now a fill path. Then go to Window>Pathfinder and Unite the symbols. Select all lines and the symbol and in Pathfinder select Outline. The idea is to delete the area where the symbol and the lines overlap. Paste the symbol again. Step 9 Create a circle and aline in the center of your logo. We will use that for reference for your text. Step 10 Add your text and then repeat the same thing as the step 9 to make the gap on the area tha the text will be visible. Step 11 Create a black background and then place the logo in the center with white colors. Step 12 In Photoshop now, first use a brush to create the grungy effect. Step 13 Make sure you have a black backgroud and your logo over it. Merge the 2 layers and then go to Filter>Filter Gallery>Brush Strokes>Spatter. Use 1 for the Spray Radius and 12 for Smoothness. The idea of this step is to make the for less uniform. Conclusion Now just add your background and your image is done. I hope you enjoy this little case study/tutorial and have a great holidays. The background image is titled Background of snow flurry falling at night with motion blur by Elena Elisseeva, courtesy for Shutterstock Download Photoshop file Click here to download the Photoshop file used for this tutorial