articles on

Stellar Design Works by Aldo Pulella

Stellar Design Works by Aldo Pulella

Aldo Pulella, a South-African designer, has come up with some pretty solid design pieces and it's time to share them with you. His style is pretty awesome, mixing photography with 3D modeling and more. These are only a few examples of his work. For more of his pieces, please visit his portfolio at Behance. He'll definitely appreciate it. Cheers! ;)

Retro Moderinist Artowrk in Illustrator and Photoshop

Retro Moderinist Artwork in Illustrator and Photoshop

For this week's tutorial I will share something new that I am still trying to learn how to do it. It's the retro/futuristic/geometric illustration style I've been seeing more and more often. This illustration is inspired by the work of Justin Mezzell, Matthew Lyons and Dan Matutina. I also see that James White has been experimenting with this style as well. In my case I will try to share a simple and easy way to achieve the style using Illustrator and Photoshop. As it is my first attempt, bear with me and let me know if you have any tips to improve it. So in this tutorial I will show you how to create a Retro Futuristic Illustration using Adobe Illustrator and Photoshop. I won't add a lot of details on how to create the shapes, it's more like a simple walkthrough on how I create the illustration. Step 1 Open Illustrator and start creating the composition. As I am learning I used an old illustration for reference so I could understand exactly what give the illustration the style I want. In this case the vanishing points, perspective and very geometric forms are the secret. I started creating everything in greyscale. Once I had the basic objects I moved to the color part. Step 2 Another important thing was to understand the color palette that would give the effect I wanted. Once again, I got one illustration from Justin Mezzell and start using some of the colors he used to see If I could achieve the same effect. Step 3 After coloring, it was time to add some dimensionality to the image. The first and most important thing is the use of hard shadows. Most of these designs are inspired by old ads and architecture illustrations where hard shadows were vey common. To create the basic shadows I used black at 10% with Multiply for the Blend Mode. I also added some frames for the windows to create the 3D effect. Step 4 To increase a little bit more the realism I added some subtle gradients as you can see in the image below. For the gradient colors I used white and black at 10% with multiply for the opacity. Step 5 To create the clouds I used basic circles and pathfinder to unite them into one object. After that I apply the same subtle gradient. One I had a basic cloud, I started duplicating it and playing with sizes and angles. Step 6 For the car it was pretty much the same thing, just some angular shapes, not using curves at all. At this point I had understood a little bit more of geometric illustraitons so I started deviating from the original illustration I was using for reference. Notice the reflection on the windows, that was a really nice touch that I saw in the work of Justin Mezzell as well.z Step 7 Time to go to Photoshop to add some effects. Copy the composition from Illustrator and paste it in Photoshop. I am using 2880x1800 for the size. Step 8 I always paste vectors as Smart Objects, so I can always tweak them without destroying everything. So the first thing to do is go to Filter>Filter Gallery>Difuse Glow. Use the values below to add some nice grain to the image. Step 9 Duplicate the layer and then go to Filter>Filter Gallery>Brush Strokes>Angled Strokes. Use the values in the image below. The idea here is to add some brush deformations. The best thing would be do that by hand, but for the tutorial we will stick to filters. Step 10 Reduce the opacity of the layer with the angled strokes to 80% with Lighten for the Blend Mode. Step 11 With the Brush Tool (B) and a very soft brush, paint a nice orange spot to create a sunset effect. I used Overlay for the Blend Mode at 100% Step 12 Duplicat the illustraiton layer and then go to Filter>Distort>Mezzotint. Use Fine Dots. Step 13 Go to Image>Adjustmetns>Desaturate. Then change the Blend Mode to Color Dodge. You will have something like the image belowl. Step 14 Go to Image>Adjustments>Levels. Reduce the white input levels to 100 or a bit more. The goal here is to make the light grains almost invisible. Step 15 With the Eraser Tool (E) you can delete some areas of the grain layer to make it less strong. I tried to hide the grains on the lighter areas and make it visible on the dark ones. Conclusion You can also do the same as the previous steps for the dark grains to create another layer with lighter grains. It will make the effect a little bit better and more real. Your design after this will be pretty much done and as I said, it was the first time I tried something like this. I am still learning and it is up to you to take it from here and make it perfect. If you do so, share with us, we would love to see what you can come up with. Download Photoshop file Download the Photoshop file used for this tutorial

Old Signage in Photoshop 3D

Old Signage in Photoshop 3D

Following our series of tutorials inspired by movie posters, today we bring to you a simple image inspired by the new Jim Carrey and Steve Carrell's movie, The Incredible Burt Wonderstone. The poster and the TV spot show a really nice old signage effect, that's the title of the movie. As usual that was perfect for a Photoshop tutorial and also to create a nice animated gif. So for this tutorial we will show you how to create a nice old signage effect using Photoshop and a stock photo. The whole process is pretty simple bu the end result is quite nice. We will also create a simple animated gif in the end. Step 1 Open Photoshop and create a new document. I am using 2880x1800 because it's the resolution I need for a nice wallpaper. Make sure that your background color is black. Step 2 Let's add the text that will be the base of the design. The concept is inspired by the movie The Incredible Burt Wonderstone, it's about two magicians so it has all that Las Vegas style. For the font I used Knockout for the "Abduzeeni" and Adobe Devanagari for the "The amazing". Position the text like the image below. Step 3 Let's use some 3D in Photoshop. Adobe has been working hard to give to Photoshop users a better 3D tool and I have to say, it's getting better. It's not as slow for basic 3D objects and it is also more intuitive. So To create our 3D text, just select the layer with the text you want to apply the 3D and go to 3D>New 3D Extrusion from Selected Layer. After that you the 3D panel will open and you will see the layers of the 3D. By clicking on the different layers: Scene, Current View, Text Extrusion, Infinite Light 1 and Default Camera, you will be able to change their properties. The images below show some of these properties. The first 3 images ar properties of the text extrusion, the second is for the light and the third for the environment. Step 4 Once you have your 3D settings adjusted, go to 3D>Render to render your 3D layer. You will have something like the image below. Step 5 Select the face of the 3D object and create a new layer from it. Fill this layer with red. Go to Layer>Create Clipping Mask. Step 6 Go to Layer>New Adjustment Layer>Hue and Saturation. Use 30 for the Hue, 30 for the Saturation and -50 for the Lightness. Make sure that this layer is also using clipping mask (Go to Layer>Create Clipping Mask) so the effect only applies to the 3D layer. Step 7 To create the light bulbs, let's use a real image. The one I am using is courtesy of Shutterstock and it's called Neon casino entrance sign by MaxFX. Copy one light bulb that is not completelly on and another that is off. Paste these 2 lights to your composition and start filling the space on the letters. Notice that I am using a shadow to give some depth. You can do that using layer styles. Another tip is change the direction of the shadow for the letters that are on the left or right, that way we make sure it's a little bit more realistic. Step 8 Add a layer on top of the others and group it so it will be in a folder. Change the Blend Mode of the folder to Color Dodge. Select the layer inside of this folder and then with the Brush Tool (B), select a very soft and rounded brush with white for the color. Resize the brush so it is a 30% bigger than the light bulb. Paint in the select layer with white on top of the light bulbs you want to turn on. Step 9 Repeat the same process to the other light bulbs. Conclusion Duplicate all layers and merge the new layers into one. Go to Filter>Blur>Gaussian Blur. Use 10 pixels for the radius. Change the Blend Mode of this layer to Screen at 20%. Duplicate this layer again and change the Blend Mode to Overlay at 50%. Move the folder with the layer that has the white spots (previous step) so this layer is on top of all other layers. After all these steps you are good to go. You can make some adjustments and improve the design for sure, but that's the whole idea of the tutorial, to give you some directions, now it's up to you. Animation To create the animation is pretty simple, just create a few different versions with some lights on and off. After that using a app that can create animated gifs, just import all this images. I used Fireworks and for each state I used one of the versions. Download Photoshop file Click here to download the Photoshop file used for this tutorial

Classic Light Effect in Photoshop

Classic Light Effect in Photoshop

Light effects are my favorite type of effect, I don't know why but I always liked to play around in Photoshop trying to recreate them. Then once I discovered the power of the Blend Modes, especially the Color Dodge, creating this effects became much easier. So in this tutorial I will show you how to create a super cool text light effect mixing some photos to give more realism. The cool thing about this effect is that the whole process is very simple and quite easy. Step 1 Open Photoshop and create a new document, after that make sure that the background is in black. Step 2 To make the effect more realistic let's use a stock photo, the one I am using is courtesy from Shutterstock and you can find it at http://www.shutterstock.com/pic-24939406/stock-photo-glowing-lamp-on-bl…. Place the image in the center of the document but make sure that the filament area is big engouh. Step 3 Go to Layer>Layer Mask>Reveal All. Then with the Brush Tool (B) select a very soft brush (0% hardness0 and black for the color. Start paiting the areas of the light you want to hide. Use the image below for reference. Step 4 Now let's delete the filament area where we will add the text with the light effect later on. To do that is pretty easy, with the Eyedropper Tool (I) select the color of the area you will paint, the with the Brush Tool (B) and a very soft brush, start paiting over the filament. Note: I added a new layer instead of painting over. Another tip is if you are using the Brush Tool (B) you can just press Alt to use the Eyedropper Tool. Step 5 With the Horizontal Type Tool (T) add the word light in white. I am using Exmouth for the font, you can download it here http://www.dafont.com/exmouth.font. For the size I am using 82 pixels but the size will depend on your document size. After that add a new folder in the Layers Palette and change the Blend Mode of this folder to Color Dodge. Move the light text into the folder you have just created. Step 6 With the text selected go to Filter>Blur>Gaussian Blur. Use 4 pixels for the Radius. Step 7 Because the white text is inside the folder with the Color Dodge, the effect will be the same as if the text layer had a black background. You can see that the edges get sort of blended with the background creating a perfect light effect. Step 8 Again to add more realism, instead of creating a lens flare in Photoshop we will use a real photo. The one I am using I found in Google Images and you can find it here http://web.williams.edu/astronomy/IAU_eclipses/jmp_eclipse03_04.jpg. Once you imported the photo the first thing to do is delete the areas that you won't be necessary and keep just the flare. After that go to Image>Adjustments>Desaturate. Step 9 With the flare layer already desaturated, just change its Blend Mode to Screen. Screen is a very useful Blend Mode because it turns what is black into full trasparency the grey scale becomes a transparency level, so it's perfect to create light effects. Step 10 Add a new layer and go to Filter>Render>Clouds. Make sure you had black and white for the background and foreground colors. This layer also will be on top of the others. Step 11 Change the clouds' layer Blend Mode to Color Dodge. After that add a new folder in the Layers Panel and move the clouds layer into it. After that change this folder's Blend Mode to Overlay. Step 12 Add a new layer inside the folder in which you moved the clouds' layer. Make sure that the new layer is beneath the clouds' layer. After that with the Brush Tool (B) and a very soft brush with #f5d38b paint a round spot in the center of the light effect. Change this layer's Blend Mode to Overlay too. Step 13 Now add another layer on top of all the others and then with the Brush Tool (B) and a big and very soft brush using white for the color, paint another big spot in the center of the light effect. After that go to Layer>Layers Styles>Color Overlay. Use #ffd648 and Linear Burn. The idea is to make the light a bit stronger. After this we are done and as you could see, most of the light effects are all about blending colors with photos. The Blend Modes in Photoshop are very powerful for this type of effect and I would recommend you to study more about them, especially the Color Dodge one.

Remastered Doom in Photoshop

Remastered Doom in Photoshop

We post tutorials about how to use Photoshop, Illustrator and other apps. Spanning all sorts of styles and techniques we try to share simple tricks and, on occasion, more complex compositions. Nothing compares to the talented work of TJ Townsend with the post we share with you today. TJ creates a magical reconstruction of a classic image from the game DOOM. This is a remastered screenshot from the video game Doom. The original size was 320x240 and the final product is 9600x7211. This is the highest resolution Photoshop image I've done to date with the exception to a higher 3d rendering. Video Final image Some Details It is commonly agreed upon by all of humanity that Doom was the greatest game ever made. Okay, maybe not everyone. Doom was a PC game made in 1993 by id software. It was created by John Carmack, John Romero, Adrian Carmack and Tom Hall as well as many others. This is actually not a direct scene from the game but a composite. The Doom guy has only 1 rocket left and a pinky demon stands between him and freedom. If he shoots he's dead. These were some of the best moments in the game.

PES 2013 Photoshop and Cinema 4D Case Study

PES 2013 Photoshop and Cinema 4D Case Study

We are accustomed to seeing the final result of a design and then judging whether it's good or bad. Most of the time we forget to think about the back and forth of ideas and countless iterations from the brief to the final product. That is what differentiates design from art and that is what we here at Abduzeedo always try to illustrate in our posts. Enter this amazing case study from Diego L. Rodríguez. Graphic created for the promotion event in Madrid of Konami's PES 2013 videogame. The initial brief indicated to create a digital image of Cristiano Ronaldo emerging to the videogame from a glass wall. Project process was absolutely crazy, with several changes of brief and a very limited time. The image was used in the main event for banners, flags, delluxe edtion boxes, promotions and web. Unfortunately the agency didn't provide me any of those products... Assets Effects These renderes were created for dynamic cupping masks and to emphasize the destruction of the player's body parts. In the beginning the brief indicated more destruction, glass effects and broken parts, but it was changed several times during the process. Stages Second round Third roundM/h3> Background New brief stage more block feeling, bricks, bigger glass pieces, less FX on the player's face. New brief stage 2 Final Version About Diego L. Rodríguez. Diego L. Rodríguez is a Spanish Illustrator and Graphic Designer based in Madrid (Spain). He's been always passionated by graphics and visuals, with influences from cinema, music videos, Japanese animation & comic books. He has a degree in Audiovisual Production and Digital Photography and studied Publicity at the UCM University in Madrid from 2004 to 2008. Over those years I started to combine digital graphics and photography, working for a few years as photographer. At the same time, I get involved with some digital art collectives, changing completely my vision, and swerving my work to illustration & mix media. For more information visit his website at http://paranoidme.com/

Stylish Illustrations of AliceX

Stylish Illustrations of AliceX

It's been a while since the last time I checked DeviantArt. It is always a nice place to find design inspiration. In this particular instance I was looking for some stylish illustrations for a personal project when I stumbled upon the work of Alice X. Zhang. Alice is a full time freelance illustrator from the United States. Her illustrations are the definition of bold and are easily recognizable by the saturation of red used throughout the majority of her work making me reminiscent of the 80s. There's also nice usage of brush splatters and textures to give her work a personality all its own. So in this post we would like to share with you some beautiful illustrations by the very talendted AliceX. For more information visit http://www.alicexz.com/ Bane Copyright AliceX The Roar of Our Stars Copyright AliceX War Copyright AliceX Airplanes Copyright AliceX Hi! I'm Alice, also known as alicexz or silverqe. I am a full-time freelance illustrator as well as an immense pop culture enthusiast and a part-time t-shirt designer. I graduated the Rhode Island School of Design with a major in Graphic Design, but heartily wish I'd chosen Illustration instead. I am always experimenting with new media and spend nearly all my free time painting and designing. My sleep schedule is thus utterly erratic and insane. I enjoy wild colors, art books, all kinds of literature, cinema, and television, Roger Federer, and red hair. And coffee. Lots and lots of coffee. Virtuoso Copyright AliceX Adamantine Hearts Copyright AliceX Rising Copyright AliceX A Familiar Taste Copyright AliceX Making of Watch live streaming video from alicexz at livestream.com The Boy Who Lived Copyright AliceX Carry On My Wayward Son Copyright AliceX Someday Copyright AliceX Barnabas Reborn Copyright AliceX Juno Copyright AliceX

Oblivion Inspiring Artwork in Photoshop

Oblivion Inspiring Artwork in Photoshop

Following our movie poster inspired tutorials, today we bring to you an image inspired by Oblivion, the new Tom Cruise film we can't wait to check out. The poster has a post-apocalyptical composition of a waterfall with some ruins of old buildings including the iconic Chrysler building in NYC. Of course we loved the poster and we decided to create something similar in Photoshop. So in this tutorial we will show you how to create a photo manipulation of an 'end of the world' style image. To do that we will use stock photos and adjustment layers to make sure the image looks legit. Step 1 Open Photoshop and create a new document. I am using a A4 format for this document. Step 2 The most important thing when doing this photo montages is to get the right images. To start the compostion we will use a sky picture found on Google Image Search downloaded from http://www.beachwallpapers.in/bulkupload/New_beaches/Sunset/Sunset%20Sk…. We also used a photo of the Chrysler Building, courtesy of <a href="http://www.shutterstock.com/gallery-718624p1.html?pl=edit-00&cr=00">gagliardifoto</a> / <a href="http://www.shutterstock.com/?pl=edit-00&cr=00">Shutterstock.com</a>. Place both images in the composition, erase the sky from the building photo an position them like the image below. Step 3 Now let's add another photo of a mountain in order to mix it with the building. You can download it at (http://www.backpacker.com/media/originals/RockyMountainNationalParkCont…). Use the Brush Tool (B) with a custom brush using a stone pattern for the Texture. Step 4 Let's add another photo blend it with the building and mountain images from the previous step. This one can be found on Google Image Search. Step 5 Start deleting some areas of the mountain image like the image below. Step 6 Now, to make it very cathastrofic, let's add a waterfall photo. The one I am using is courtesy of Shutterstock, it's called A woman dressed in a red jacket carrying a red umbrella standing at the base of a waterfall. Shot on location at Skogafoss in Iceland by Darren Baker. Step 7 With the Eraser Tool (E) and a regular and very soft brush, start deleting some areas to blend the images together. One of the most important things when chosing images is to make sure that the light sources are almost the same. It's almost impossible to find images with exactly the same light source, but having them with similar sources will make your design more realistic. Step 8 Once you position all images together you will have to match the colors and saturation. There are different ways you can achieve that, for this tutorial we will use Hue and Saturation. Use adjustment layers on top of each layer and them Clipping Mask to apply Hue Saturation to each of the images. For the Waterfall lets use 220 for the Hue, 3 for the Saturation and 0 for the Lightness. Step 9 For the building and mountains use 0 for the Hue, -68 for the Saturation and -19 for the Lightness. Step 10 Add a new layer on top of the mountain and building layers, then change the Blend Mode to Multiply. With the Brush Too (B) and a very soft brush, use black for the color to create a shadow over the building and the mountain. Step 11 Now lets add 2 more images, one for a base of rocks and a guy staring at the utopic view. You can search for the images on Google Images to get them. It's up to you here as this step is not really necessary. Step 12 Once you have all images together, use the Brush Tool (B) with a custom brush using Clouds for the Texture to paint some sort of clouds/water on the base of the waterfall. Step 13 In the layers panel, make sure that the layer at the top is selected, then go to Image>New Adjustment Layer>Hue/Saturation. Use 34 for the Hue, 15 for the Saturation and 0 for the Lightness. Step 14 Select all layers and duplicate them, after that with all new layer selected, merge them into a new layer. Go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius. Change the Blend Mode of this new layer to Screen. Conclusion Select all layers and then duplicate them again. Merge the new duplicated layers again and then change the Blend Mode of the new layer to Overlay. These two last steps will give more realism to the composition and help the images to match the colors and styles. After that it's up to you to add more elements or adjust colors and styles. Download Photoshop file Download Photoshop file used for this tutorial

The Great Gatsby Deco Style in Illustrator and Photoshop

The Great Gatsby Art Deco Style in Illustrator and Photoshop

Movie posters are always a great source of inspiration, movies area always about periods of times, sometimes it's in the future, others in the past. Some are really good at representing some art styles. That's the case of the new movie called The Great Gatsby. It's heavly inspired by the Art Deco movement and it's simply beautiful. It's so cool that we had to try to do that in Photoshop and share in a tutorial. So for this tutorial we will create a Art Deco image based on the poster of The Great Gatsby movie. We will use Adobe Illustrator and Photoshop to create the whole thing. The process is not difficult but it's very time consuming. Another thing to notices, is that there's no specific rules but to keep the square angles. Step 1 In Illustrator, create a new document. Then with the Line Segment Tool (/) or the Pen Tool (P) start creating some basic lines using squared angles. To do that hold the Shift tool in Illustrator when adding the lines. Step 2 Keep adding more lines. The goal here is to create one half of the image, the one one will be just a copy of it flipped horizontally. Step 3 Play with different stroke weights and also use the Pathfinder tool to cut things. It's important to keep the lines straight and with different stroke weights. Step 4 Keep adding more lines, there's no rules, just make sure you connect the lines so they have a nice flow. Step 5 Duplicate the circles created in the Step 3, here is important to have the full canvas for reference, in our case the circles are in the center of the design. Step 6 Add 3 thicker lines like the image below. Step 7 Now let's add the area for the text. Start with the Rectangle Tool (M), then cut it in the middle so you have just half of it. Also make sure that the circle in the center is in front of the rectangle. Step 8 Add a square and rotate it 45º, position it on the left of the center rectangle. Step 9 With the Pathfinder Tool, use Unite to merge both to create one object only. Step 10 Kee adding more lines, always making sure they connect to one another in some way. Step 11 Duplicate the top lefft and flip it vertically, then connect the lines like the image below. Step 12 Start creating the bottom part, first with the thicker lines for reference. Step 13 Then add the thinner ones. Step 14 Once you finish half of the design select all layers and duplicate it, then flip it vertically. Connect the lines ans make sure that it's center aligned. Step 15 The last part in Illustrator is the text part, use the poster of The Great Gatsby for reference and create the text you want. The Art Deco style for the text is quite simple, it's basic a think line next ot a thinner one. Step 16 Now in Photoshop, let's import the objects created in Illustrator. The first thing to do is copy all lines and paste them in Illustrator. Note that I didn't copy the text. Also copy just the thicker lines and paste them in a separate layer, it's important for the next steps. Step 17 Let's apply some layer styles. In Illustrator we used just black and white, so the first thing to do here is use a nice yellow/orange for the color overlay (#ffba00). That will be our gold texture. Then select Inner Shadow and use the values below. Step 18 Select Inner Glow and use the values below. Step 19 Select Drop Shadow and use the values below. Drop Shadow will start giving the depth we want. Remember, you will apply the same layer styles to both layers, one with all lines and the other one on top of it, just with the thick lines. The one with the thick lines will have the shadows visible on top of the other. Step 20 Here will be the design you will have in Photoshop. Note that the background is black and not white. Step 21 Add a layer on top of the others. Group this layer into a folder and change the Blend Mode to Color Dodge. Select the layer inside the folder and then with the Brush Tool (B) and a very soft brush, start painting with the white at 10% on the areas you want to create a highlight. Step 22 Add another layer and group it into layer. Change the Blend Mode of the folder to Linear Burn. Select the layer inside the folder and then with the Brush Tool (B) and a very soft brush, start painting with black at 20% on the areas you want to make them darker and sort of on the second plane. Also use the Lasso Tool (L) to mask some areas to create shadow effects like (1, 2, 3, 4 and 5). Step 23 Add a new layer and fill it with white. Then go to Filter>Noise>Add Noise. Use 80% for the Amount. Make sure you have black and white for the background and foreground color. Then go to Filter>Blur>Motion Blur. Use 0º for the Angle and 120 pixels for the Distance. Step 24 Change the Blend Mode to Multiply. Step 25 Add the text, copy from Illustrator and paste it in Photoshop. Use the same layer style but use a gradient from white to medium grey in the center. The idea is to make the line as gold and the text as silver. Conclusion Select all layers and duplicate them. With the new copies selected merge them into a new layer, then go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius. After that change the Blend Mode to Overlay at 70% Opacity. Duplicate this layer and change the Blend Mode to Screen at 70% Opacity, then duplicate it again and go to Layer>Layer Mask>Reveal All. Select the thumb of the mask and go to FIlter>Render>Clouds. That way we will use the clouds to mask the layer and make it less uniform. Our design is pretty much done, now it's up to you to improve upon it, there are a lot more to be done so I hope you have fun. A Merry Christmas and Happy New Year. Download Photoshop file Click here to download the Photoshop file used for this tutorial

Man of Steel Symbol in Illustrator and Photoshop

Man of Steel Symbol in Illustrator and Photoshop

Last week the new Man of Steel trailer was released and it is simply amazing. I remember watching the Superman movies when I was child and seeing the reboot of the movie brings me back to a lot of good memories. The visuals of this new movie are also really something, much darker and realistic than the previous ones. The Superman logo follows this same aesthetic and since the first time viewing the trailer I knew it must be the subject of a tutorial. So in this tutorial we will show you how to create the Superman, Man of Steel logo using Illustrator and Photoshop. We will also utilize some stock photos for textures and the original poster for reference. The whole process will take from 3-5 hours depending on your pace. In the end it will be really fun to create and well worth the time spent. Step 1 Let's start the symbol in Illustrator. With the Pen Tool (P) start creating the shield. Maker sure you have red for the stroke with a nice weight and using round corners. Step 2 Now still using the Pen Tool, start creating the S. You can use the real logo for reference. Step 3 If you notice, the Man of Steel logo has some details in the center, so let's try to replicate that using the Pen Tool. The stroke here is not really necessary because we will edit that in Photoshop later on. Step 4 Go to Effect>3D>Extrue & Bevel Options. For the Angle use: -4º, 0º, 0º with 120º for the Perspective. Change the Depth to 35pt. Step 5 Remove the caps of the 3D and then change the color to grey. Go to Object>Expand. Then go to Window>Pathfinder. Select Unite for the Shape Mode so you have one object. Step 6 Now let's go to Photoshop. Create a new document. I am using 2880x1800 pixels. For the background use a gradient with white in the center and black on edges. Step 7 Copy the objects from Illustrator and paste them in Photoshop. It's important to make sure that each object has its own layer, so you will have one for the 3D extrusion, one for the red symbol and 2 layers for the yellow details. Step 8 Select one of the yellow details and go to Layer>Layer Styles. Select Bevel and Emboss and use the values below. Step 9 Select Inner Glow and use the values in the image below. Step 10 Last but no least, select Drop Shadow. Again use the image below for reference. Step 11 You will have an effect like the image below. The idea of the layer styles was to add a subtle white stroke with a shadow. Step 12 Group each layer into a folder, then for each folder do this: Go to Layer>Layer Mask>Reveal All. With the Brush Tool (B) and a very soft brush using black, paint in the areas marked below to hide some parts of the details. Step 13 With the Brush Tool (B), and using a hard brush, paint a little dark detail in the center. If you look at the orginal, they have some sort of the same detail. Let's create now and adjust later on in the tutorial. Step 14 Add a layer on top of the red symbol, the one that has the S and the shield. Group this new layer into a folder. With the Brush Tool (B) and a very soft brush, paint some dark areas with black at 20%. Step 15 Select the layer of the red symbols and go to Layer>Layer Style. Start by selecting Bevel & Emboss and use the values below. Step 16 Select Contour and use the default values. Step 17 Select Inner Shadow. The idea of the inner shadow is to increase the strenght of the highlights. Step 18 Now let's add a radial gradient on top with Multiply to create a more dramatic light effect. Step 19 You can add more layers to make the dark areas a bit more strong, but in the end of these steps you will probably have something similar to the image below. Step 20 Let's start adding some textures. Select the 3D layer and go to Layer>Layer Style>Color Overlay. Use yellow for the color. Place your metal texture on top of this layer, the one we are using is courtesy of Shutterstock and it's titled Metal plate steel background. Hi res texture by R-studio. After that, holding the Command(MAC)/Control(PC) keys, click on the thumb of the layer of the 3D object, that will create a marquee selection of the 3D area. Select the texture layer and group it into a folder, then with the folder selected go to Layer>Layer Mask>Reveal Selection. You will mask the layer and make just the 3D area visible. Change the Blend Mode of the folder to Multiply. Step 21 Add another layer and group it into a folder, repeat the masking process to make sure that everything you do will be only visible over the 3D area. Change the Blend Mode of the folder to Color Dodge, then with the layer select, paint some highlights with the Brush Tool (B) with a very soft brush and white for the color. Note: Start painting with 30% opacity to not make it too bright. Step 22 Repeat the same process, but this time it's going to be to create the shadows. Use Linear Burn for the Blend Mode for the folder however. Also use the Lasso Tool (L) to create the nice transition in the 3D sides (1-4) Step 23 Select the 3D layer and the red symbol layer and duplicate them. After that merge those 2 layers into one and fill this new layer with black. Move the layer down to create a little shadow and go to Filter>Blur>Gaussian Blur. Use 10 pixels for the Radius, also change the Blend Mode to Multiply at 80%. Step 24 Let's import a new texture. This time we are using another image from Shutterstock, it's titled Metal background by Phiseksit. Use Soft Light for the Blend Mode. Step 25 Duplicate the texture layer and move the layer position so it is on top of all other layers. Maker a Marquee Selection of the symbol only and go to Layer>Layer Mask>Reveal Selection. The only area visible of the texture will be the one over the symbol. Change the Blend Mode to Overlay. Step 26 Let's add another texture. This one this time is from Google Images and you can find it here http://www.texturex.com/albums/Metal-Textures/TextureX%20steel%20textur…. Place it at the top of all other textures and use Soft Light for the Blend Mode at 70%. Step 27 Now let's add the final texture, this one will be underneath the last 2, but still on top of all other layers. You can download it at http://fc00.deviantart.net/fs50/f/2009/262/3/f/Scratched_Steel_Texture_… . Use Soft Light for the Blend Mode as well. Conclusion Add another layer on top of all layers and group it into a folder. Change the Blend Mode of the folder to Linear Dodge at 80% Opacity. Select the layer in this folder and then with the Brush Tool (B) and a very soft brush, paint a spot light with white at the top of the symbol. After that your design is pretty much done. You can of course improve the details and textures, but the process won't change, so now it's up to you to make it the way you want it. Download Photoshop file Download the Photoshop file used for this tutorial

Easy Chalk Ornament Typography in Photoshop

Easy Chalk Ornament Typography in Photoshop

We are heading to the last weeks of 2012 and nothing better than getting ready for the new year with a Photoshop tutorial playing with the number 2013. The inspiration for this image was, of course, from one of the trends of 2012: chalkboard typography with ornaments. So in this tutorial we will try to create a stylish ornament typography and then apply a chalkboard effect using Adobe Illustrator, Photoshop and some vector ornaments. The whole process is simple but time consuming, so I would take at least 3 hours to recreate this design. Step 1 Open Adobe Illustrator and create a new document. With the Type Tool (T) add the text 2013. I am using a free font called Pistilli Roman, you can download it at http://www.dafont.com/pistilli-roman.font?text=2013 Step 2 Time to add some ornaments. There are several places you can download ornaments, the ones I am using are courtesy of Shutterstock. The file is title Set of vector graphic elements for design by iana. Start adding ornaments trying to match the letter design, in this case the numbers. Step 3 Keep adding more details. Remember to always make the transition of these ornames as smooth as possible. Step 4 You can duplicate the same ornament a few times and connect them. Step 5 Add more ornaments until you few you have a balanced composition. Step 6 The last thing to do is to add the final details like swirls in the end of most of the ornaments. Step 7 Now in Photoshop, create a new document. I am using 2880x1800 pixels. After that search for a black board image to place as background of your design. Step 8 Copy the graphic you created in Illustrator and paste it in Photoshop. Also, add a layer and fill it with black. After that duplicate the 2013 graphic and merge it with the black background. Step 9 Change the Blend Mode of the merged object to Lighter Color. Step 10 Go to Filter>Filter Gallery>Angled Stroke. Use 67 for the Direction Balance, 9 for the Stroke Length and 5 for the Sharpness. Step 11 Add a mask and then with the Brush Tool (B) using a textured brush, paint with 30% black on the mask to make the white less uniform. Step 12 With the other layer with the 2013 graphic on top of the other layers, go to Layer>Layer Style>Outer Glow. Use the image below for the values. Step 13 After that select Drop Shadow. The idea of these 2 layer styles is to create a sort of chalk effect. Step 14 Here is the effect you might have after these steps. After that change the Blend Mode of the layer with layer styles to Dissolve. Step 15 Select all layers and duplicate them. Merge the duplicated layers into one and then go to Filter>Blur>Gaussian Blur. Use 5 pixels for the radius. After that change the Blend Mode to Soft Light at 50%. Duplicate the layer again and change the Blend Mode to Screen. Add your logo in the end and if you want you add some noise and using adjustment layers reduce the contrast. But that is up to you. The idea here was just to create a nice chalkboard effect using Photoshop and Illustrator. Download the Photoshop file Download the Photoshop file used for this tutorial

More awesome Photoshop Secrets!

More awesome Photoshop Secrets!

Lots of cool things in this week's batch from Photoshop Secrets Actions by bjango! Marc Edwards from Bjango creates some super useful Actions and Panel that every Photoshop UI Designer must have! You can download them here. I highly recommend reading the blog post that comes with it! While you’re at it, check out his tool Skala Preview, the fastest way to send pixel perfect previews from your Mac to your iPhone or iPad. Use Keyboard Maestro to Group + Rename at the same time Every time I group layers I like to rename the group name to something more Meaningful than Group 1, 2, 3. So I created a Keyboard Maestro Keyboard Maestro Macro that replaces ⌘G with 2 actions, one to Group and another to rename. To make it work first you need to unassign ⌘G as Group from Photoshop by going to Edit > Keyboard Shortcuts | Layer / New / Group Then download the Macro here. Just double click the file after installing Keyboard Maestro and it’ll be added to your library of shortcuts.  Challenge yourself and hide that toolbar! I very rarely click on the toolbar icons. Instead I use shortcuts. Why not challenge yourself to hide the toolbar and use shortcuts instead? Here's the toolbar shortcut map… Remember if you press ⇧ + the letter, it will toggle between the tools that share that shortcut. Or you can disable that in the Preferences and just press the same letter repeatedly to toggle through the tools. A Select Vector B Brush, Pencil… C Crop, Slice D Set default BG and FG colors (black and white) E Eraser F Toggle Screen Modes G Gradient, Paint Bucket H Move Canvas I Eyedropper J Healing Brush K Rotate 3D Object L Lasso M Marquee N Rotate 3D Camera O Color Dodge, Color Burn P Pen Q Enter Quick Mask Mode R Rotate Canvas S Clone Stamp T Type U Shape V Move/Select W Magic Wand Y History Brush X Swap BG and FG colors Z Zoom / Lock layer 1-0 Selected Layer Opacity from 10% to 100% (tap two numbers quickly, like 37, to get specific values. And 00 to set it to 0 opacity.) Tab Hide Chrome Drag masks from one layer onto another You can drag vector and bitmap masks from one layer into another by holding ⌘⌥ and dragging the mask. It also works on Groups, as demonstrated on the video For many more tips like these make sure you check out Photoshop Secrets and follow @phtshp

80s Christmas Artwork in Photoshop

80s Christmas Artwork in Photoshop

It's beginning to look a lot like Christmas and it's time for our holiday tutorial. For this year we will have a very 80s image inspired by the work of Arkuma using Photoshop CS6. So for this tutorial we will create a image using basic filters and effects to create a nice vinage effect. The fonts used are Avant Garde and FreestyleScrD. Step 1 Open Photoshop and create a new document. I am using 2880x1800 for the size so I can use it as a nice wallpaper for the MacBook Pro Retina. Then for the background layer use a radial gradient from #a4a4a4 to black. Then add another layer on top using purple (#8e70b2) for the color with Multiply for the Blend Mode. Step 2 Create a grid in Illustrator with the Rectangular Grid Tool. Copy it and then paste it in Photoshop. Make sure that your grid lines are white, then with Layer Styles use Outer Glow with Color Dodge for the Blend Mode, 75% for the Opacity, white for the color, 5% Spread and 10 pixels size. Step 3 Groupt the layer into a folder and change the folder's Blend Mode to Color Dodge at 60%. After that apply a Gaussian Blur to the grid layer. Step 4 Create a triangle and fill it with a dark purple (#191123). Step 5 Duplicate the triangle and then go to Layer>Layer Styles>Stroke. Use 5 pixels for the Size, Outside for the Position and white for the color. Step 6 Select Inner Glow and use the values below. Step 7 Select Outer Glow and use the values below. Step 8 You will have a triangle with some lights below it blending with the grid. Now let's add some text. With the Horizontal Type Tool (T) insert the work Christmas. Step 9 Let's apply some layer styles to this text. Go to Layer>Layer Styles>Bevel & Emboss. Use the image below for the values Step 10 Now let's add a chrome gradient. You can come up with your own but let's use the one available on Photoshop's presets. Step 11 After applying the layer styles duplicate that layer and then right click on the FX little icon in the layer in the layer panel. Select Create Layers. What that will do is that will create layers for each of the layer styles. The only one we will use is the gradient one. With the Stamp Tool (S) create some little peaks in the center of the gradient. Step 12 Add a layer on top of the others, the with the Brush Tool (B) and a very soft brush, start painting with cyan at the top, green in the center, and purple at that bottom. Step 13 Group the layer with the brush paints and then change the Blend Mode of the folder to Overlay. Step 14 Add the word Merry using #ff009c for the color. Step 15 Now let's add some more layer styles. First Inner Shadow. Use the image below for the values. Step 16 Select Inner Glow and use the values below. Step 17 Select Outer Glow and use the values below. Step 18 If you got all the way to this step, you will probably have something like the image below Step 19 Add a layer on top of the others and group this layer into a folder. With the Brush Tool (B) start painting some white spots with a very soft brush. That will create some nice light effects. Step 20 Select all layers and duplicate them. Merge the new layers into one and then go to Filter>Noise>Add Noise. Use 5% for the Amount, Gaussian for the DIstribution and select Monochromatic. Step 21 Go to Layer>New Adjustment Layer>Hue/Saturation. Use 0 for Hue, 1 for Saturation and 13 for Lightness. Conclusion You can add another layer with a purple to black radial graident on top with Linear Dodge for the Blend Mode. You can also add a layer on top with a scanline effect. To do that you just need to create a new document, like 4x4 pixels. Fill the half of the image with black and the other with white, so you have 2 lines. Go to Edit>Define Pattern. Go back to your design and add a new layer filling with the pattern you just created using Color Burn at 30% Opacity. That's the design is done, now it's up to you to add your own little touch. Other options Download Photoshop file Click here to download the Photoshop file used for this tutorial

Super Useful Photoshop Tips: Feather Shape Layers, Keyboard shortcuts and more...

For the next few weeks we'll be posting some of the best Photoshop tips from Photoshop Secrets. Some of these tips can greatly optimize your workflow helping you work faster and more precisely. Make sure to check out http://photoshopsecrets.tumblr.com and follow @phtshp on twitter. Feather Shape layers Vector Shape layers can be feathered (blurred) without rasterization. Open the Property Panel by clicking Window > Properties, then select a vector shape and adjust the feathering number. This is great for creating more editable drop shadows that you can bend and change without problems. As of CS6 you can do decimal increments too, this is particularly useful for smoothing out shapes if you're trying to make a smooth life-like illustrations or icons. I tend to use .1, .2 or .3 on my shapes when designing icons. User Keyboard Maestro to copy/paste shape colors and styles I often need to copy/paste colors for shape layers but unfortunately Photoshop gives me no easy way to do that. As of CS6 right clicking a shape layer gives you an option called "Copy Shape Attributes" which would be great if there was a way to set a keyboard shortcut to it, but there isn't, making it kind of useless. To circumvent this problem I use Keyboard Maestro. I created 4 macros Copy Color Copy Color + Style Paste Color Paste Color + Style You can download them here: https://www.dropbox.com/sh/803h5plrgt2spzm/IPYPGBBAeN Just double click the file after installing Keyboard Maestro and it'll be added to your library of shortcuts. You can then change it to whatever shortcut you prefer as the ones I set might conflict with a shortcut you already use. But what if you want to Copy/Paste just the Styles? For that Photoshop lets you do it already by either right clicking on the Style and choosing Copy/Paste Layer Style. You can also set a shortcut via Edit > Keyboard Shortcuts / Layer >Copy, Paste and Clear Layer Style. Set default Global Light to 90º To set Global Light to every new document you create, open Photoshop and make sure you have NO documents open. Then click on Layer > Layer Styles > Global Light… For many more awesome tips visit http://photoshopsecrets.tumblr.com and follow @phtshp on twitter.

Super Useful Photoshop Tips

For the next few weeks we'll be posting some of the best Photoshop tips from Photoshop Secrets. Some of these tips can greatly optimize your workflow helping you work faster and more precisely. Move Gradients, Patterns and Shadows from the Style Panel When adding gradients, patterns and shadows to a layer, you can drag your canvas to adjust the relative position of the effect. Separate compound shapes or masked bitmap layers into a new layer If you have 2 compound shapes in one layer and decide to separate them, the easiest way to do it is to select the shape (with the Path Selection Tool) then hit ⌘⇧J. This also works if you mask a bitmap layer, it cuts and duplicates it. ⌘J Will duplicate the shape or mask and leave the original intact. Open a duplicate window of your document so you can work on a detailed version When creating icons or small assets you may want to see both the 100% view and a zoomed in view so you can edit details and see the original at the same time. You can do so by clicking Window > Arrange > New Window for [doc_name]. The shortcut you see on the image I created myself by going to Edit > Keyboard Shortcuts. Press ⇥ while renaming a layer to rename the next layer Double click a layer name to rename it, Instead of pressing return, press ⇥ (tab) and the layer below will be selected and ready to be renamed. (CS6 only) Hide / show all effects on your document ⌥ click on effects icon to expand/collapse all effects in document (CS6 only) Change Layer opacity and fill opacity with keyboard Select a layer and press: 0 for 100% - 1 to 9 for decimals from 10 to 90. You can also type numbers in fast sequence to set specific opacity such as 25, 37 or 00 for 0%. Pressing ⇧ plus the numbers changes the Fill opacity. Make sure that you have the Move Tool (V) selected otherwise this will not work. With the Brush Tool the same shortcuts will set the opacity of the brush. And in case you don’t know, this is the difference between Opacity and Fill. Opacity changes the opacity of the entire layer including its styles, whereas Fill keeps the styles intact but knocks out the fill. Change Layer Blending Modes with your keyboard Select a layer then: ⌥⇧- Previous Blend ⌥⇧+ Next Blend ⌥⇧W Linear Dodge (Add) ⌥⇧E Difference ⌥⇧T Saturation ⌥⇧Y Luminosity ⌥⇧U Hue ⌥⇧I Dissolve ⌥⇧O Overlay ⌥⇧A Linear Burn ⌥⇧S Screen ⌥⇧D Color Dodge ⌥⇧F Soft Light ⌥⇧G Lighten ⌥⇧H Hard Light ⌥⇧J Linear Light ⌥⇧K Darken ⌥⇧L Hard Mix ⌥⇧Z Pin Light ⌥⇧X Exclude ⌥⇧C Color ⌥⇧V Vivid Light ⌥⇧B Color Burn ⌥⇧N Normal ⌥⇧M Multiply Change text size with your keyboard Select text by double clicking a text layer or manually selecting. ⌘⇧ ⌘⇧> Bigger by 2 points ⌘⌥⇧ ⌘⌥⇧> Bigger by 10 points Make your Layer Styles into Layers. Disconnect Styles from Layers by right clicking on effects and clicking “Create Layers”. This allows you to better manipulate effects, especially good for patterns, so you can morph them around a “3D” shape. You can also better adjust a drop shadow by cropping it or transforming it.

The Joker Case Study

The Joker Case Study

Xavier K. is an Interactive Designer and Art Director since 8 years from Québec, Canada. In this post he will show us step by step how this amazing piece was done and you get to learn straight from Xavier. You can check out his portfolio at xavier-k.com or his behance at behance.net/xavierk Specially for Abduzeedo.com I wanted to create a new project. The project name is «The Joker». So I reinterpreted this icon of our famous playing cards. Below, I explain step by step what's my process and what I did. The Joker Details Process Idea/Sketch Have an idea !? go for it and draw it on a piece of paper. Search / References Have some references to create a little moodboard is always cool and useful. Starting with background A graphic composition is like a building in construction ; you must to put the base of composition before the next step Close cut the character, dress it and makeup it ! Step highly important, because she drove the rest of the composition. Elements, finalisation, polishing Final step. Craft and polish your visual with some logical elements and effects. Final Result About the artist Xavier K. is an Interactive Designer and Art Director since 8 years from Québec, Canada. He has worked on various projects and for different clients like: Cirque du Soleil, IMAX, RedBull, Adidas, Dell… You can check out his portfolio at xavier-k.com or his behance at behance.net/xavierk

GTA V Logo in Illustrator and Photoshop

GTA V Logo in Illustrator and Photoshop

Last week Rockstar announced that they will release more information about Grand Theft Auto V this week. It will definitely be an awesome game and we are looking forward to getting a copy. Because of that we decided to recreate the logo using Illustrator and Photoshop, but not only because we like the game, the effect used in the logo is quite cool and it's something we always wanted to try.So for this tutorial we will show you how to create a nice money style effect using Illustrator and Photoshop. The process is a little bit long and we will just give you a high level explanation. It's important that you try to not only follow but modify the process so you can come up with your own effect.Step 1Create a new document in Illustrator. Then with the Type Tool (T) add the letter V using Baskerville Bold. After that go to Type>Create Outlines. Rotate the V so you can create a A.Step 2With the Ellipse Tool (L). Create an ellipse and then duplicate it like the image below.Step 3With the LIne Segment Tool (\) create the connection of the 2 parts.Step 4Using the Pen Tool (P) create a sort of curve as the paper the ribbon is folding. Just create something like an wave.Step 5Duplicate the last object and move to the other site.Step 6For the A let's add 2 strokes The first one is and bigger one is going to be black with 7pt for the weight. The second one, and the one that will be on top will be 3pt weight in white. Also change the fill color to green. For the other strokes use 3pt with black.Step 8To create the nice shadow effects with lines is quite simple. Create 2 lines following the ribbon shape. You can make the curves a little different .Step 9Using the Blend Tool (W), click on both lines to create the effect. After that, double click on the Blend Tool icon to open the Blend Options use Specified Steps with 20 steps. Also create some little shadows with the Pen Tool (P) like in the image below.Step 10Repeat the same process to the other parts of the ribbon. Always follow the curves of the ribbon to create a nice 3Dish effect.Step 11Repeate the same thing on the other side. You can also add more lines like the 2 in the center.Step 12Add the text you want and go to Object>Envelope>Make it with Warp. Use Arch for the style, 26% and for the Bend.Step 13To create the background of the letter A. Create an arc with the arc tool or pen tool. After that duplicate it and rotate it. Connect the vertices using the Direct Selection Tool (A) options.Step 14Click on the Rotate icon. Then holding ALT, select the vertices on the left. The rotate dialog box will appear. Use 15º for the Angle and click copy. Step 15Repeat the same process until you have something like the image below.Step 16Duplicate the object and rotate a few times to make the symbol more detailed.Step 17Move the object on top of the A. Select the duplicate the A and move it so it's in front of all the other objects. Remove the strokes and change the color to white. Cut it. Select the object created in the last 2 steps, then go to Transparency. Double click on the clip thumb and paste it using Command + F, so it pastes in place. Using clipping mask will also make the texture visible only on top of the A.Step 18Now in Photoshop, copy all objects from Illustrator and paste it in Photoshop in separated layers. Then for the shadows, use the Eraser Tool (E) to make the lines different.Step 19Add a green gradient replacing the dark green. To do that is pretty simple, just select the green area with the Magic Wand Tool (W), then fill the layer with a new color and use Layer Styles to add the gradient. For the pattern, using the Layer Styles, change the color to white, using Color Overlay with Color Dodge for the Blend Mode.Step 20Using Layer Styles, add a Bevel and Emboss to the text like the image below.Step 21Let's use an old paper tutorial. The one I used is from Shutterstock, it's called old grunge antique paper texture from photolinc. Group the layers used for the symbol and change the Blend Mode of the group to Multiply.Step 22Copy the object used for the texture in Illustrator and paste it in Photoshop. Rescale it so it covers the whole document.ConclusionDuplicate the group with the symbol and merge the group. Use Soft Color for the Blend Mode, then duplicate it again and go to Image>Adjustment>Desaturate. After that select all layers and duplicate them. Merge the new layers into one. Move this layer underneath the 2 symbols with soft light and the effect is done.Despite the fact it is a long tutorial, the process is quite simple and I am sure you will be able to apply that to your own projects.Download filesDownload the Photoshop and Illustrator files used for this tutorial