articles on

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.

Low Poly Illustrations in Photoshop by Breno Bitencourt

Low Poly Illustrations in Photoshop by Breno Bitencourt

We have seen quite a few illustrations with the low poly style, it looks like a very difficult technique but Breno Bitencourt put together a very complete Photoshop tutorial showing the process, including a video. I will really give it a try and now you have the chance to try to, check it out. Here I'll show you step-by-step how to create a stylish low-poly portrait in Illustrator and Photoshop. The secret to creating works in this style is working from the best reference photos – and first off Breno reveals how to capture these (using himself as a model). He then reveals how to work these up in Photoshop, then create a vector version in Illustrator. Video Breno Bitencourt is a graphic designer from Brazil specialized at logo design, as well as corporate identity that works with clients globally. For more information about Breno visit https://www.behance.net/Bitencourt

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.

Playing with type and images in Photoshop

Playing with type and images in Photoshop

Following our new series of positive thinking wallpapers today we will show you how to create a simple and soothing image using Photoshop. The author we feature today is Confucius and the quote is "Everything has beauty, but not everyone can sees it". We will also use a stock photo from Unsplash. So in this little case study/tutorial we will show you how to play to some basic masking, photography and typography to create a beautiful wallpaper. The process won't take more than 45 minutes but I am sure you will have a lot of fun. Step 1 Open Photoshop and create a new document. I am using 2880x1800 pixels, the standard retina display Macbook Pro resolution. After that let's start playing with our positive quote from Confucius. Add the word BEAUTY. The font I am using is called Liberator. Step 2 With the Rectangle Tool, create a rectangle with a 10pt stroke. Step 3 Now add the rest of the text. The first part using the same font and the last using a smaller font. In my case I used Orator St. Step 4 For the background I am using a photo from http://unsplash.com/ - I wanted an image with a cold/calm feel and I found this one with some trees and the fog. I liked the mood of it. Step 7 Change the color of the text from white to a purpleish extracted from the image. I apply a Layer Style>Color Overlay to a folder with the typography elements. Step 8 With the Magic Wand Tool (W) select the tree. Then mask the text and rectangle so you can make some branches going in front and behind the symbol. Step 9 Here's a zoom version to see how I played with the branches and the typography. Step 10 Go to Layer>New Adjustment Layer>Photo Filter. Use the Warming 85 at 33%. Conclusion Add your logo and you are good to go. The design is simple and soothing, exactly the mood I wanted to have for this particular design. So as Confucius sad "Everything has beauty, but not everyone can sees it" - maybe that's why I will probably be the only one who can see the beauty on this wallpaper.

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

Reader Tutorial: The Voyager by Moe Pike Soe

Reader Tutorial: The Voyager Artwork by Moe Pike Soe

The Voyager artwork was created as a Ten Dollar Fonts showcase for a brilliant font designed by Maarten Van’t Wout. I used Cinema 4D and Photoshop to create the atmospheric photo manipulation. The technique is to use different blend modes and adjustment layers as combo to create dynamic lighting for each elements in the composition. I will be showing you these simple techniques to create the artwork. The tutorial includes a part of Cinema 4D but I’ve also included the already rendered pictures for people without C4D to follow. Step 1 We are going to create the 3D text in Cinema 4D first. Create a new motext using the font, type in desired words and change the horizontal spacing to 85 cm with the depth of 35 cm. Step 2 There are two lights being given to the type. The first one is directly above the type at 100% intensity and another light is in front of the type with only 50% intensity. Also make sure you change the shadow mode to area as well. Step 3 Create a new material and change the color to R: 23 G: 23 B: 23 and assign it to the motext. Step 4 Create a new camera and place it along centre of the type. Change the focal length to 76 mm. Step 5 Open up Render Settings > Output and change the resolution to 4500 pixels wide and 3000 pixels high. Also change the saving format to PNG with straight alpha and separate alpha checked. Last of all, add Global Illumination from Effects menu. Step 6 We will be exporting two different renders. One is the full 3D render and another is flat type layer. To get the flat render, change the depth of the type to 0 cm and then render it. Step 7 Open Photoshop and create a new document with 4500 pixels width and 3000 pixels height then fill the background with black color. Place the stars.jpg and change the opacity to 50%. Step 8 Import the two renders and make sure you have the flat type layer on top of the 3D type layer. Also name flat layer Flat and 3D layer 3D. Step 9 As you can see the type is not that popped out enough yet and we need more rim light on the type. To do that, create a new layer above the Flat layer and clip mask it. Then grab a soft brush with white color and paint along the sides of the type. Step 10 Repeat the step 9 again but this time it’s for the 3D layer. Step 11 Group all the type layers and name it Title. Create a level adjustment layer with a clipping mask to the group. Change the values to 0 : 0.83 : 131 . And now we have a pretty dramatic looking type. Step 12 Import the astronaut.jpg and mask out all the white background so that you will be left with the astronaut only. Place the layer below the Title group and move the astronaut so that he looks like he’s hanging on to the ‘A’. Step 13 The astronaut is too bright compared to the type and it needs darker shadows. Create a new Levels adjustment layers and change the value to 63: 0.37 : 225 and clip mask it to the astronaut layer. Step 14 Create a new layer above the astronaut layer and name it Highlight. Make sure to put the highlight layer between astronaut and the adjustment layers. Grab a soft brush with white color and paint into the sides of the astronaut. And change the layer blend mode to Soft Light. Step 15 Create another layer below the highlight area and name it Shadow. Paint inside of the astronaut with a black soft brush with the opacity of 10%. Step 16 Make a group of all the layers except the Title group and name it astronaut. Create a new vibrance adjustment layer. Change the value of vibrance to 100% and the value of saturation to 0%. Step 17 Import earth.png and place the layer above the stars layer. Move the earth to the center aligned with the background. Step 18 Create a new layer and clip mask onto the earth layer. Change the blending mode to Soft Light. And paint in shadows to the bottom part of the earth. Step 19 On the same layer, paint on the top of earth with a white soft brush to lighten up the top half of the earth. Step 20 Create a new layer beneath the Earth layer. Paint along the contour of top half of the earth with a soft white brush. This will create a glow behind the earth. Step 21 Import moon.png. We’re going to repeat Step 18 and 19 to create the similar effect but instead of on top, we’re going to paint it on the left side. Step 22 Group the moon layers and the earth layers. Create a new exposure adjustment layer and a vibrance adjustment layer. Change the value as shown below. Step 23 Now we’ve got a pretty cool atmosphere now but the elements are not cohesive yet. Create a new color balance adjustment layer and a vibrance adjustment layer. Change the values as shown below. Step 24 Create a new layer and name it Top Light. Select a soft brush with the biggest size and change the color to #6d7595 . Paint it along the top of canvas and change the opacity to 40% Step 25 Import flare.jpg and change the blend mode to Linear Dodge. Adjust the position of the flare to the top and centre of the earth. Create a new levels adjustment layer and change the values as shown. Step 26 Find any unwanted highlights or areas that need more shadows and paint above on it by creating a new layer with soft light blend mode. Create a new layer and press shift+cmd+E (shift+ctrl+E) to merge all layers into one. Choose Filter>Sharpen>Unsharp Mask and change the values as below. Conclusion The techniques I’ve shown are simple but they do take time to fine tune depending on the source light in anyway artworks. I hope you’ve learned some new techniques from the tutorial. For more information about me and my work, please visit http://thebeaststudio.com Source Files Download Source Files

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 ;)

Water Drop Effect in HTML & CSS

Water Drop Effect in HTML & CSS

The best way to learn anything is by doing it, plain and simple, trial and error. With the explosion of mobile devices and the evolution of HTML5, CSS3 and browsers, knowing to code is almost a requirement to anyone willing to work with web. I have been playing more and more with CSS, trying to create simple things like basic typography styles to more complex ones, like water drop effects. In this post I will show you how to create a simple water drop effect using CSS. The process is quite simple but it will require some basic knowledge of CSS and a little bit of jQuery. Step 1 - Reference First thing to do is to look for references, in this case photos of water drops effects. Google Images is a super useful resource to create mood boards and find inspiration. Step 2 - CSS for the drops Create your simple HTML/CSS boilerplate or download it at http://html5boilerplate.com/. After that start putting together the CSS for the drop. Below you can see the basic code with no color effects. .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; width:25px; margin: 20px auto; border-radius: 50%; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Step 3 - Water Drop Effect To create the effect we will use "box-shadow" and "background". For the background you can see below that we are using a white at 30% and a radial gradient. With shadow we will create the 3D effect. To do that we will use 3 inset shadows and 1 normal shadow. Below you can see the code. background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.4), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); Step 4 - Basic Javascript with jQuery to create instances To fill the screen with // Number of drops in the screen ndrops = 1000; // Width and Height of the screen wW = $(window).width(); WH = $(window).height(); // Loop for(i=0; i<=ndrops; i++){ // drop dp = "<li class='d" + i + "'></li>" // Ramdon values for X, Y position dX = Math.floor((Math.random()*wW)+1) + "px"; dY = Math.floor((Math.random()*WH)+1) + "px"; // Ramdon values for scale dS = Math.floor((Math.random()*1)+1) * 0.3; // Ramdon values for Opacity, Width and Height dO = (Math.floor((Math.random()*2)+1) * 0.5); dW = "25px" //Math.floor((Math.random()*30)+30) + "px"; dH = Math.floor((Math.random()*20)+18) + "px"; // Append the drops $("ul").append(dp); // Apply the random values $(".d" + i).css("opacity",dO).css("width",dW).css("height",dH).css({x: dX, y:dY, scale: dS}); } CSS body{ background: #666; padding: 0; margin: 0; overflow: hidden; } .bg{ background: #000 url(../img/bg.JPG); background-size: cover; position: absolute; top: 0; left: 0; right: 0 bottom:0; width: 100%; height: 100%; z-index: 10; } .drops ul{ position: relative; z-index: 1000; } .drops li{ position: absolute; z-index: 100000; display: block; height: 25px; background: rgba(255,255,255,.03) -webkit-radial-gradient(center 75%, ellipse contain, #ffffff, rgba(255,255,255,0) 60%); margin: 20px auto; border-radius: 50%; box-shadow: inset 0 0px 6px rgba(0,0,0,.5), inset 0 -1px 6px rgba(0,0,0,.6), inset 0 8px 3px rgba(0,0,0,.3), inset 0 10px 3px rgba(255,255,255,.1), 0 3px 6px rgba(0,0,0,.5); } Conclusion You can also animate some of the drops, it would be an extra step but it can be achieve quite easily using CSS animations. The whole idea was to explore the possibilies of CSS to create different effects and water drops effect was one that I had done before in Photoshop, so I thought it would be a good exercise. Now it's up to you not only to play with it but to make it better. Image Click on the image to see the demo HTML for Webkit and Chrome

JWT  Brazil - Made Of What You Are

JWT Brazil - Made Of What You Are

Background Info: this illustration was an A0 billboard produced for JWT Brazil's Troller car campaign. The original brief came attached with a rough concept sketch and some loose directions for what the client wanted to see in the image. The final image was created using 3D objects, stock photos and digital painting. Most of the lighting manipulation used in this image was done with photoshop layer adjustments and painting via a tablet. All 3D objects were created with the software Cinema 4D. Due to scheduling conflicts with the Cannes festival, the deadline for this image was six days. Saad Moosajee, a young self taught freelance Illustrator and Art Director from Denver, Colorado. This work was created for the Slashthree collectives and exhibitions. For more information visit http://www.saadart.com/ Client: Troller Agency: JWT Brazil Art Direction: Thiago Arrighi, Pedro Hefs Illustration: Saad Moosajee Step 1 original background plate is selected for manipulation. The perspective of the floor in the photograph and free flowing branches makes this an ideal image based on the brief provided. Step 2 3D renders are created to be used in the forest environment. The form of the objects are derived from the branches in the photo. The image is also manipulated into various bitmap textures that are applied to the 3D objects. Step 3 The 3D objects are cut up and integrated into the branches of the photograph. The floor of the photo is also extended. Step 4 More 3D objects are integrated into the branches, integration of the animal stocks also begins in addition to color and lighting adjustments. Step 5 3D objects that flow between the car and the humans hands are created. These forms contain loose references to the anatomy of the forest and the animals used in the piece. Numerous bitmap textures are mixed in order to achieve both consistency and variation in the light and color of the objects. Step 6 Further integration of the 3D objects into the environment. Rough placement of the figure and the 3D branches around the figure. Step 7 Continuing to experiment with the lighting and the forests environment. Step 8 Forest background is darkened and desaturated to disguise 3D objects. Foreground branches are developed. Step 9 Recreating the forest atmosphere required balancing dark, mysterious tones against areas of intense illumination. A main source of light was manipulated into the background in an effort to achieve the this effect. Step 10 The light of the composition is adjusted to match the new light source. Step 11 Continuing to adjust light & color of the composition, scale of figure and figures branches is reduced. Step 12 Rough car is placed into image. Step 13 Inside of the car is created via digital painting and 3D manipulation, lighting of car is adjusted to match the composition. Step 14 Color adjustments are made on the composition to give it more warmth, second half of the car is roughly placed. Step 15 More 3D branches and animals are added to the foreground. Step 16 Placement of foreground objects is shifted to be more central. Figure is swapped out by request of the agency Art Directors to someone ethnically brazilian. Manipulation of the ground begins here by roughing in some stock textures. Step 17 Placement of figure is adjusted, overall light of the image is adjusted. Ground is further manipulated with digital painting and cloned textures. Step 18 Quantity of light coming from the back light source is significantly increased to help capture the forest atmosphere. A warm, orange/green tinted light source is used. Step 19 After debating with the art directors regarding about the new figure, a third figure cleared for potential use in the image. The form and light of this new figure felt much more natural in the images environment. Darker lighting is also added to the ground. Step 20 Lighting is once again boosted from the background, this time spreading into the foreground. The texture and perspective of the ground is adjusted to match the original perspective of the floor, and the cars are shifted to a slightly more central position. Step 21 Approval is given for the cars to be colored, which proved to be a key aspect of this illustration. The cars are digitally painted to have a color that aligns with the hue of the main light source, giving the image a more unified aesthetic. Conclusion Final lighting adjustments and sharpening. Movie

Vintage Stencil Style in Photoshop

Vintage Stencil Style in Photoshop

Last week we posted a tutorial showing how to create simple artwork in Illustrator and then in Photoshop we added a few effects to make it look old and with that vintage/hipster feel. Some people asked about some of the steps in Photoshop so I decided to make a simple walkthrough about how to use Photoshop to create this kind of effect. It's a simple technique but it can be very handy for this kind of artwork. So in this tutorial I will show you how to create a simple vintage look stencil in Photoshop. The whole process will take around one hour and you won't need anything special besides time and a few dirty brushes. Step 1 Create the artwork you want to apply the effect. I used Adobe Illustrator to create this simple stencil. Step 2 In Photoshop now, place the stencil. Add a new layer and fill it with black, that will be the background. With layer style, apply a white Color Overlay in the stencil. Step 3 Group the black layer with the white stencil and convert it to a smart object. Filter>Convert to Smart Filters. Apply a Gaussian Blur, go to Filter>Blur>Gaussian Blur. Use 4 pixels for the Radius. Step 4 Go to Layer>New Adjustment Layer>Levels. Change the values until you cannot see the blur effect anymore. After that make sure that the Adjustment Layer is clipped to the layer (Layer>Create Clipping Mask). Step 5 Create a new layer on top of the stencil and then with a regular dirty brush add some of the texture. Step 6 Group the stencil layer with the brush layer and then change the Blend Mode of the folder to Lighter Color. Also add an image for the background. Step 7 My image looks really bright and doesn't create enough contrast with the logo. So go to Image>Adustments>Hue and Saturation. Reduce the Saturation a little bit and also the Lightness. The values will depend on the image you will be using. Step 8 Go to Image>Adjustments>Levels. Change the Output Values and also the grey Input value to make the image much darker. Step 9 Now go to Layer>New Adjustment Layer>Photo Filter. Use the Warming Filter at 65% Density. Step 10 Convert the folder with the stencil and the brush effect to a smart filter. Go to Filter>Filter Gallery>Brush Strokes>Accented Edges. Play with the values until you have an effect that looks natural. Conclusion Reduce the opacity of the logo to 95% depending on the background. You can also use levels to make it not so bright besides that, the design is pretty much done. I believe this little step by step might help those that were having some difficults during the last tutorial. Now it's up to you, have fun and a great 2014 to you all. Download Photoshop file Click here to download the Photoshop file used for this tutorial

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

Working with Type in Photoshop

Working with Type in Photoshop

In this post I'm going to show you some of the tools that I use in my workflow when working with type in Photoshop. Anti-Aliasing The elephant in the room seems to be as good of a place as any to start this post. In previous versions of Photoshop (pre-CS6) selecting the type of anti-aliasing method to use came down to choosing the best from a bad bunch really. However, a few months ago Adobe introduced two new OS-native options in the anti-aliasing settings in Photoshop: “Mac” and “Mac LCD”. These options aim to replicate the system anti-aliasing for fonts: “Mac” replicating OS X’s greyscale font smoothing and “Mac LCD” its sub-pixel font smoothing. For web designers, the CSS equivalent to “Mac” would be: `-webkit-font-smoothing: antialiased` and the equivalent of “Mac LCD”: `-webkit-font-smoothing: subpixel-antialiased` As iOS uses greyscale anti-aliasing for all of its type rendering, you should use the “Mac” anti-aliasing method in Photoshop when designing for iOS devices. Character and Paragraph styles Character and Paragraph style panels shipped with CS6 and allow you to save the attributes you've set for a specific text layer to then re-apply the exact same styling to other layers. To display the panels, go to Window > Character/Paragraph Styles in the main Photoshop window. I find this feature very useful for keeping all of my typography consistent throughout a project. If you are unfamiliar with this feature, Tuts+ have a handy getting started video on their site. Wrap text with paths I only really use this when doing web design but it’s still good to know about. If you want to wrap text around an image then you can do so fairly easily with vector paths. Make sure to have a look at this [video tutorial from “Method and Craft”](http://methodandcraft.com/videos/shaping-textfields-in-photoshop) if you're unsure how to achieve this. In essence: draw the shape you want your text to be wrapped within then pick the type tool. Click on the shape you just created and the text layer’s bounds will be wrapped around the shape. Check out the end result below: Filter Text Layers This is a fairly well known feature in Photoshop but I still find it useful. At the top of the layers panel there are various filtering methods including “Filter for Type Layers”. Activate this to only show text layers in the panel. It can be handy for making bulk changes to a project. Paste Lorem Ipsum Another useful little time saver that shipped with CS6 is the ability to paste *Lorem Ipsum* text into your document from within Photoshop. When editing a text layer, go to Type > Paste Lorem Ipsum in the main menu to paste a paragraph of dummy text. I would recommend assigning a keyboard shortcut to this to make it even quicker. Font Management I use OS X’s built-in Font Book to manage the 269 fonts I currently have installed on my system. I have tried a lot different 3rd party font management applications in the past but they always ended up breaking something and felt unnecessary for the few fonts that I actually use. There we have it. These are some of the things I do when working with type in Photoshop to improve my workflow. Hopefully you found this post useful! Let me know if there are any other aspects of Photoshop you would like me to talk about in further blog posts, on Twitter. The original version of this article was published on the Realmac Software blog Elliot Jackson is a Designer at Realmac Software, a small, award-winning independent iOS and OS X development studio behind Clear, Ember and Rapidweaver

Abduzeedo 7th Anniversary Poster in Photoshop

Abduzeedo 7th Anniversary Poster in Photoshop

This December Abduzeedo celebrates its 7th anniversary. In the end of 2006, after the robbery of our design studio, I decided to start a simple blog to share inspiration, experiments and to try to be more active in the community. Today, after 7 years, we have met so many amazing people but most importantly, we have learned so much together with everyone that visits the site. To celebrate the anniversary I created an image to illustrate our journey, a simple idea acknowledging how time flies. We must take action right now because the little we do can, in a gentle way, shake the world. So in this tutorial I will show you the creative process behind the poster. It's a simply walkthrough using Photoshop. Step 1 Create a new document and import a photo of clouds or something almost abstract. The photo I am using is courtesy of Shutterstock and it's titled "a photo of sunset above clouds from airplane window" by menz11stock. Step 2 With the Rectangle Tool U create a square and then with the Direct Select Tool A, select the shape. With the Pen Tool P, delete one of the points to create a triangle. Use the image below for reference. Step 3 Go to Layer>Layer Style>Gradient Overlay. Use Black and White for the color, Linear Dodge for the Blend Mode and 99º for the Angle. Step 4 Change the Opacity to 20%. Step 5 Create another triangle like the previous steps using pretty much the same Layer Styles. Step 6 Invert the gradient of the layer style and use Overlay for the Blend Mode. Also use 50% for the Opacity of this layer. Step 7 Add the third triangle and make sure they are equally spaced. The first triangle in the left will be light, the center will be light and the one in the right will be dark. Step 8 Create a vignette effect using a layer with a simple layer filled with black and a cirlce brush paint in white using the Brush Tool B. Change the Blend Mode to Multiply. Step 9 Create a simple highlight behind the triangle on the right. To do that you just need to create a new layer and use the triangle to create a mask. Then just paint with the Brush Tool B and white color. Repeat the same thing to create a darker area behind the first triangle (the one on the left). Step 10 Add the text you want. In my case I used a quote by Mahatma Gandhi. I also align the Abduzeedo symbol with the the junction of intersection of the triangles. Conclusion The end result is simple an quite beautiful especially with such a straightforward process that it required. The idea behind this image was to illustrate the sense of how time flies, it seems that it was yesterday that we started Abduzeedo and this month we celebrate 7 years sharing inspiration. I hope you enjoy this little tutorial and thanks for visiting the blog.

Basic Animations in CSS and Javascript for Prototypes

Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes. Step 1 Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI" <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 2 Now lets import jQuery and jQuery Transit plugin to help us animate the list. <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" ></script> <style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png) center center; background-size: cover; margin: 0 auto; } ul, ul li{ margin:0; padding: 0; list-style-type: none; } ul { padding-top: 40px; } ul li{ background: #fff; margin: 0 11px 1px 11px; padding: 15px; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 3 - Animating the list To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top. <script> $(function(){ $("ul li").each(function(i){ $(this).css({y:"-30px", opacity:0}).transition({y:"0", opacity:1, delay:200 * i},600,"ease"); }) }) </script> So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i"). Step 4 - some 3D rotations <script> $(function(){ $("ul li").css({opacity:0}).each(function(i){ $(this).css({y:"150px", rotateX: "90deg", transformOrigin: 'center top'}).transition({perspective: '400px',y:"0", opacity:1, rotateX:"0deg", delay:200 * i},300, "ease"); }) }) </script> The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well. Conclusion Below you can see a basic example of what you can do with simple Javascript. The best thing about these animations is that they use the GPU, that means they run very smooth in mobile devices and are perfect for mobile prototypes.   See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen  

A Guide to Pixel Hinting

A Guide to Pixel Hinting

When looking at a website or interface, there are few things more annoying than half pixels. The resulting blurred edges make your potentially great product look hastily designed, uncared for and unfinished. Admittedly, if you are working with company logos, especially type-based ones, half pixels are a fairly regular occurrence and potentially frustrating to deal with. When it comes to icons, buttons or any other interface elements however there are no excuses. So, today I thought I’d share some tips on Pixel Hinting - which very simply means moving your vector points so that they fall on the pixel grid. Dealing with type logos If you are working with a non-vector logo, you’re going to have to redraw it to be able to get the best, pixel-perfect results. For this example however, we already have a vector ready to go in Photoshop. Download example.psd As with any vector adjustment work, your best friends are going to be the Path and Direct Selection Tools as well as 3200% zoom. The actual process for doing this is very simple but depending on the size of the vector, it can get quite time consuming. Tip: When using the Selection Tools, CMD+Click to quickly switch between the two. Getting set up Make sure that the “Snap Vector Tools and Transforms to Pixel Grid” option is deselected in your Photoshop preferences (Cmd+K). This will allow us to move our vector point in increments rather than 1px at a time. Let’s get started As this is a fairly repetitive process, we’re just going to fix the “R” here. It doesn’t have very good edges at the moment so should make for a good example. You will then be able to apply what you’ve learnt to the rest of the shapes. Here is the before and after of our example logo. As you can see, when we’re done pixel-hinting it we’ll have a much crisper, better looking shape. Now let’s get started. This is the “R” zoomed up to 3200%. I like to begin at the top of a shape and work down. As you can see, the top part isn’t too bad here. We’ll just nudge it up a little. Make sure you select all of the appropriate anchor points with the Direct Selection Tool. Next we’ll fix the left side. Start by nudging in the top two anchor points then the second two out. The bottom part isn’t too complicated either, just make sure you’re selecting the correct anchor points. Finish up the outer part of the shape by bringing the last few points. Now for the inner section. Nudge in the left anchor points then nudge out the right ones. And we’re done! As you can see, it’s a very simple process that produces good results. Not all shapes are as straight forward as this one though. There are times when you might have to compromise and use a half pixel to keep the recognisable features of the shape intact but as a general rule, pixel hint! Dealing with icons Using icon sets is fine for quick mockups, but for final releases you should always make custom icons. I don’t pixel hint in quick mockups because they serve only to get your ideas out there and your time can be much better spent elsewhere. However, when the time comes to do your final icons here are a couple of tips: Setup: I like to do icons in a separate PSD. Start by setting your background to #ffffff if it isn’t already and your vector colour to #000000. Black on white is the easiest way to spot those half pixels. Know your dimensions: If your icons are going to be displayed at 32x32, there’s no point in making them at 46x46 or any other dimensions. Setup some guides in your new PSD and design for the size they’re going to be displayed at. I hope you found this article helpful, and be sure to let me know on [Twitter](http://twitter.com/ElliotEKJ) if there are any other Photoshop topics you’d like me to cover in future posts The original version of this article was published on the Realmac Software blog. Guest Author Elliot Jackson (http://twitter.com/ElliotEKJ) is a designer at Realmac Software, a small, award-winning independent iOS and OS X development studio behind Clear, Ember and Rapidweaver