articles on

Flipping Book in CSS and jQuery

Flipping Book in CSS and jQuery

The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events. For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills. Step 1 The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator Step 2 Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article" Flipping cards Step 3 Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions. Flipping cards */ Step 4 Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do: #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally. #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated. #centerflip will behave like the #cover but the origin will be right instead of left. #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right. Here's the full CSS code article{ position: absolute; display: block; width: 600px; height: 600px; left: 600px; top: 200px; } section{ -webkit-perspective: 2000; width: 1800px; background: #f5f5f5; overflow: visible; position: relative; -webkit-transform:scale(.5); } #cover{ background: #fff url(logo.png) center no-repeat; background-size: 250px auto; z-index: 1000000000000000000; -webkit-transform: rotateY(-0deg); -webkit-transform-origin: left bottom; } #backcover{ left: 0; background: #000; color: #fff; -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; z-index: 10000000000000000; } #centerflip{ background: #ff0; z-index: 10000000; -webkit-transform: rotateY(0deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; } #centerback{ background: #fff; -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: left bottom; left: 1200px !important; z-index: 10000000000000000; } #center{ background: #000; } Step 5 Now that you have the cards and the layout positioned, let's use Javascript to make the behaviors. We will use jQuery and jQuery Transit for that. jQuery Transit is an amazing plugin that allows us to make simple CSS animations with jQuery. The easiest way to write the script is understand exactly the logic/behavior we want to have User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg. Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again. Here's the code for that Conclusion This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general. View Demo

Face your Fear - Case Study by Mart Biemans

Face your Fear - Case Study by Mart Biemans

The easiest way to learn in my opinion is by observing other peoples work, paying attention to the details and how some problems are overcome. That for me is more useful than a tutorial because it requires me not only attention but also makes me think on how I could do that with my set of skills. That's why case studies are extremely valuable. They show the evolution but without giving instructions. A good example is the amazing illustration by Mart Biemans that we brought to you today. For more information you can also visit http://martbiemans.com/ Process Final Details I've been working freelance in this field for over four years now and loving every second of it! Even though I love watching a lot different sorts of illustration I have lately put a focus on developing my own style. I am currently available for freelance work! If you think you might have a nice project for me or would like to hire me, please contact me via Contact at the top of this page. Next to my work as a Illustrator, Digital Artist and Graphic designer I am currently studying Vormgeving Communicatie (translated: Design & Communications) in Groningen, The Netherlands. - Mart Biemans

Iron Man in Illustrator and Photoshop

Iron Man in Illustrator and Photoshop

Last week I saw the new Iron Man trailer and as usual it was nothing less than amazing. The effects are top notch and I'm really anticipating seeing it in May. There's still a couple of months until we can set our eyes on the real deal so I decided to create the Iron Man mask from scratch using Illustrator and Photoshop just to warm up and to try to improve my illustrating skills. So for this tutorial I will show you how to create the Iron Man mask using Adobe Illustrator and Photoshop. It's not too detailed because I wanted to share a simple overview/walkthrough so you could play and explore by yourself. In the end that's the best way to learn. Step 1 Open Illustrator and create a new document. The first thing to do is get a good reference of what you want to do. After that create circle and a line crossing the center. We will create just half of the mask. With the Pen Tool (P) start creating the basic shapes. Step 2 Create one shape for each part of the mask, it will help us to add colors and textures later on in Photoshop Step 3 Once you have all shapes, use basic grey colors to see if everything is alright. Step 4 Duplicate the half of the mask and flip it horizontally. Step 5 Now in Photoshop, paste each part of the mask as a layer and let's add some colors. The basic Ironman colors are gold and purple. Also there are some shadows and subtle details like you can see in the image below. Step 6 For each part of the mask, add a layer and go to Layer>Create Clipping Mask. Fill the layer with black and change the Blend Mode to Color Dodge. With the Brush Tool (B), a very soft brush and white for the color, start painting some areas to highlight. Use 10-20% Opacity. Step 7 Repeat the same thing as the previous step, but this time use Screen for the Blend Mode. Paint some more highlights. Step 8 Add some more highlights, especially on the mouth and purple part. Step 9 Now let's add texture. Again remember, apply the texture to each part of the mask. Move the position of the texture give more depth. The texture I used can be downloaded at http://www.hdwallpapers4ipad.com/_ph/24/641167066.jpg Step 10 For the eyes, the create the 2 shapes and fill with blue, then use a basic checked texture. Apply some gaussian blur after that. Step 11 Add a new layer on top of the layer you created the eyes and group this new layer into a folder. Change the Blend Mode of the folder to Screen. After that with the Brush Tool, use a soft brush with white and paint 2 light spots. Add another layer inside this folder and paint 2 spots with blue. Step 12 Duplicate the folder and delete the blue layer. Change the Blend Mode of the folder to Color Dodge. Delete the content with the white light spots and create 2 different ones, a little less strong. The color dodge will create a very realistic light effect. Conclusion The whole process is more about digital painting than design. I am not really good at digital painting but it's always a good exercise. There are a lot of tiny details that I will continue to work on this design, however I wanted to share with you a quick overview. Now it's up to you to create your own, have fun ;) Download Photoshop file Click here to download the Photoshop file used for this tutorial

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.

Design Staff Logo Case Study

Design Staff Logo Case Study

Creating a visual identity is always challenging, there are values and messages to pass through the logo, colors and all the branding assets. We try to share all sorts of case studies for different branding projects in order to illustrate the subtleties of each project and how designers approach these constraints. So for this post we will share the creative process behind the Design Staff logo. Design Staff is dedicated to helping startups design great products. We’re a community of designers, researchers, and entrepreneurs who have helped build some of the products you probably use everyday. For more information about Design Staff visit http://www.designstaff.org/

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/

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

Easy Bomb-Omb in Illustrator

Easy Bomb-Omb in Illustrator

Hi everyone, how're you doing? Today I'm going to show a beginner tutorial of how to create a Super Mario's Bomb-Omb is just a few steps, you don't have to be good at drawing or even at Illustrator to do it. As I said before, this is a really basic tutorial for beginners but, of course, you can learn a few tricks here and there. So please stay with us till the end of the post, hope you enjoy it. Line Work Let's start by structuring our drawing. First of all, please open Adobe Illustrator and create a new canvas (command + n / ctrl + n) with 29,7 x 21 cm, CMYK, 300 dpi. Let's star with the basic and create the body/head of the Bomb-Omb, first create a ellipse using the ellipse tool (L) with the same width ad height bellow: Now let's create the rounded rectangles usingthe rounded rectangle tool that will be the eyes, use the same settings as the thumbnail bellow: Now using the rectangle tool (M), let's create the legs, use the same settings as bellow: In order to create it's feet we first need to create a sphere using the ellipse tool (L) with the same settings as bellow: Then create a square over it using the square tool (M), make sure to posicionate it border on the center of the sphere using the selection tool (V). Then select both shapes and go to the pathfinder panel and use the shape mode called Divide. Here it is, a half moon. After you just gotta duplicate it using the selection tool (V) + alt or command / ctlr + c - command / ctlr + v Using the pen tool (P), create this shape and duplicate it. Now do a right click over the copy of the shape and go to Transform > Reflect. Reflect the Vertical Axis of it then posicionate it to make the fuse base. Now go again to the pathfinder panel and select the shape mode called Unite. Now you have a single piece. Using the pen tool (P), draw the fuse angulated to te right side. Let's make the shadows bellows his feet, first make two spheres using the ellipse tool (L). Now go to the gradients panel and select one with the following settings: Adjust the gradient amount using the gradient tool (G). Using the pencil tool (N), draw the fire sparkles like this: Then using the pen tool (P) add some lines to the fuse structure. Gradients Now select the body/ head sphere and go to the gradients panel. Adjust the colors and settings to get like there, remember to posicionate the gradient using the gradient tool (G). The feet are really plain and simple: just go to the gradient panel and create one with the following settings: The same thing goes to the legs. Create this radial grey gradient on the gradient panel and later adjust it using the gradient tool (G) to create volume on the eyes. Use another linear metallic gradient to create the base of the fuse. I made this fire gradient to use on the sparkles, feel free to do yours with you thing this is not good enough. I added this linear beige gradient to the fuse and later did the same to each line, so it would give a depth effect on this part. Well, now we got all gradients done, let's skip to the shades. Shades Using a specif setting on gradient I could create this shades without using blending modes, what make the files lighter. It's pretty easy: first go to the gradient panel and create a black to black gradient, now select the white color and se it's opacity to 0%. Now you can adapt it to each use, on the legs I decided to let only the middle withou shades as you can see on the thumbnail bellow. On the bottom of the base of the fuse I added this radial shade. And one in the base of the fuse itself. Bellow each eye I create this radial shade using the same shape used to create the eye bug bigger. The Final Result Well guys, I hope you liked it, I will try to bring some more short tuts as this one soon, see ya. Download the tutorial file here.

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

Tips and Exercises to Master Spray Paint

Tips and Exercises to Master Spray Paint

Hi guys, what's up? Hope everyone enjoyed my last tutorial about stencil art, because today we're going deep on spray can techniques. Not only we're again focusing on alternative techniques, but this time we're going to do this also thru video, check this out. So first of all, let me explain what is the main idea here: Lots of people ask me how could I achieve such interesting results using a media as spray paint. Well, it takes time and dedication, but after three years of hard work, I could come from this crap: To this: It takes time, it takes passion, but I believe that my way to here would be much easier If I had someone to show me some really basic tricks. But let me emphasize here: these are not drawing or composition tricks, these are just dinamics that will make you have a better motricity with a spray can. I already wrote many written tutorials, but this time I though that a video tutorial would be more appropriated and easier to understand than just images and pictures, so here's a brief explanation of what this is all about. Chapter #1: Understanding the Spray Can I did this diagram that exemplify the past of the spray can, as you can see, there's no big deal in here: Cap/Biqueira: This is a essential piece for spraying, it's what regulate the diameter and quantity of paint that get off the can. There're dozen of type of caps, each one with a specific use and some more generical. Donut: This is usually a circle on the top of the can that displays the color you're using. Some cheap brands don't use this piece and rather place the name or a sticker of the color, my advise: If the brand don't even use donuts on the can, don't even buy it. Air/Ar: There's air inside the can, it's actually makes it possible to spray. But there's a golden rule about it: The air should be always on top for a good spray performance, so you should try to use it on 90º degrees and never turn it upside down. Valve/Válvula: This part is responsible for getting the ink off the can, it works along the pressure that you put on the cap. As it get the ink from the bottom, I will repeat again, you will spray only air If you turn it upside down. Paint/Tinta: Most spray can use oil based paint, it sticks and cover better than acrylic. In the other hand, they're toxic as hell, so make sure to use gas mask and gloves while dealing with it. Ball/Bola: This little metallic ball is helpful for mixing properly the ink, depending on the density of the ink, there can be more than one ball (MTN 94 white color uses three metallic balls, it's almost dense as butter). Concave/Côncavo: Don't know exactly the function of the concave on the bottom, but I know for sure that every aerosol has it, just look at the bottom of your deodorant. I think is something related with the pressure dinamic. The five variables There're five variables that will influence the diameter and blurriness of your spray trace, here's a brief explanation why they are so important. 1) Cap - The cap you choose will have a big role on the trace you will get. Nowadays there are dozens of types of caps, each with a specific diameter and usability. The one I'm using in this tut is a NY fat cap, it's a really ecletic cap as he can goes from thin to thick lines easily. 2) Can Pressure - The pressure of the can is something you should look before going to the wall, there are high, medium and low pressure cans, you should check what are better suitable for you use. Low pressure cans are recommended for beginners and for those who want thinner traces. Just remember: The highest the pressure, the biggest will be the trace 3) Wall distance - The more distant from the wall, the more blurry will be the trace, the more close to the wall, more solid will be the trace. 4) Cap pressure - The strenght applied on the cap will determine how much paint will get off it, so I must say the stronger you push it, the more will get off. 5) Speed - Spray paint is also about speed, the more quickly you do your trace, it will have less chances of get blurry or drip, also it will be thinner. But If you want a thicker trace, you should spray it slowly. Chapter #2: Useful exercises for spray dexterity So guys, I cannot teach you how to draw with spray paint without teaching you techniques on handling a can. So this will be about get used to this new tool, so please don't get anxious about doing a badass artwork right now, focus on get good on this tasks. Exercise #1- Make a tiny square So, let's start by trying to draw a really small square, try to draw the smaller you can. Don't be shy, I know you probably will make a huge mess on the beginning, but we will try again this exercise later and you will see that it will be much easier. Please take this as a invitation to use the can. Exercise #2- Make three different diameters Now let's test the dynamics of distance and pressure on the cap. Try to spray three different diameters, this will take time to master trust me. Exercise #3- Make a thin and thick line Now let's test the speed and cap pressure, so try to make a thin line by spraying it fast, close to the wall and pressing softly the cap. Then, try to make a thick line by spraying it slowly, far from the wall and pressing harder the cap. Exercise #4- Make both thin and thick lines You probably already realized that you can get a blurry or solid trace, so here's a exercise you should try: Try making a blurry to solid trace by vary the distance from the wall, this is a bit hard to master. Exercise #5- Connect the dots to make straight lines The best way to learn how to do straight lines is by doing a really silly exercise: Connect the dots, yep, like we used to do on kindergarten drawing books. Draw two points, posicionate the spray over the first one, aim on the second, then connect both. Don't move only your arm, spraying on wall also needs body movements, don't be a robot so. Exercise #6- Connect the dots to make shapes Now do the same exercise, but this time try to draw simple shapes, easy huh? Exercise #7- Make tiny circles Now that you already master lines and sharp shapes, let's try something round. Try to draw the tiniest circle you, start by doing it big then go smaller as you can. Exercise #8- Make a circle, a triangle and square Now, after all this exercises, you probably got some good dexterity with the can, so let's try to draw this basic shapes and try to draw them smaller and smaller. Exercise #9- Make a square with gradients Now for a final task, I gotta say I'm not the best on it hehe let's try to use gradients to create shapes, try first to create a square using gradients. You can achieve this by inclining your spray and by aiming the cap to the side you want to make the gradient. The Video So guys, in order ot make it more visual I decided to make this self explanatory video, hope it help and answer all your doubts on this exercises. Tips and Exercises to Master Spray Paint from Marcos Torres on Vimeo. Just a brief introduction to spray paint and some pretty basic exercises to understand how it works and to get dexterity on this tool.

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.