articles on

Radar Icon in Photoshop

We have received quite a few emails with requests about some icon design tutorials in Photoshop. I'm not an icon designer per se however I love icons and really admire guys that are good at that, including my friend Everaldo Coelho, currently working at Apple and great inspiration, including for this tutorial. So in this tutorial I will show you how to create a Mac style radar icon in Photoshop. This could be done easily in Fireworks and in Illustrator, I am also thinking about doing that to practice more. Step 1 Open Photoshop and create a new document, the one I'm using is 1024x1024 pixels. Also I added the linen background I created in one of my previous tutorials just to make it more stylish. Step 2 With the Ellipse Tool (U) create a circle in the center of the document. You can create it with 500x500 pixels or depending the size of icon you want. Step 3 Duplicate that circle and then resize it in order to create a sort of inner circle, the idea is create a border for our icon. Once you resized it click with the right button of the mouse over the icon of the layer in the Layers Panel and select "Select Pixel" in order to create a marquee selection of that area. Step 4 Go to Layer>Layer Mask>Hide selection. Step 5 To create the effect of a metallic border let's use Layer Styles. So go to Layer>Layer Styles>Drop Shadow. Then follow the values of the image below. You will use Inner Shadow, Bevel and Emboss and Color Overlay Step 6 Here is the effect you will get after the layer styles. Step 7 Add another circle using the Ellipse Tool (U). This one will be in black and will be in the center of the metallic border. Step 8 Duplicate the circle and resize it so it's slightly smaller than the black circle, then go to Layer>Layer Style>Gradient Overlay. For the colors use #7a5511 for the light brown and #180f00 for the dark. For the other values use the image below. Step 9 Add a new layer over the the circle with the gradient and then go to Layer>Create Clipping Mask. Now with the Brush Tool (B) paint using a very soft brush with #7a5511for the color right on top of the circle (1). Also add a new layer an paint again with the same color but with 5% opacity over the metallic border to create a brown reflection. Step 10 Add a folder in the layers palette and change the blend mode of this folder to Color Dodge. Also mask this layer using the inner circle area for reference. Then using the Rectangle Tool (U) create a very thin line in white, make sure it's inside the folder with color dodge. Go to Filter>Blur>Gaussian Blur. Use .5 pixels for the Radius. After that change the Opacity to 70%. Duplicate this line and rotate it 90º. You will have a result like the image below. Step 11 With the Ellipse Tool (U) add a circle in the middle of the radar, the color here won't matter because we will use layer styles to change it. Step 12 For this circle the first thing to do is change the Fill Opacity to 0, then add a Outer Glow, Inner Shadow and Stroke. For the values use the image below. Step 13 Here is the result you will get with after the layer styles. Step 14 Now add a new layer inside the folder with color dodge and the with the Brush Tool (B) and white for the color paint a couple white spots. Because of the color dodge and the soft brush the circles will have a really nice light effect. Step 15 Add more elements in order to make it look more realistic. Step 16 Create a new rectangle with the Rectangle Tool (U) and then rotate it 45º. This rectangle will be also inside the folder with color dodge that we created it the step 10. Step 17 Now with the Pen Tool (P) create a shape that covers the area from of one quadrant plus the 45º of the rectangle we created in the previous step. Step 18 Go to Layer>Layer Styles>Blending Options. Change the Fill Opacity to 0 and then go to Gradient Overlay. Use Angle for the Style 50º angle and 55% Opacity also take a look at how I set up the gradient colors. Step 19 This is the result you will have after the layer styles. Step 20 Repeat the same thing we did in the step 2-4 and create another circle to use as border. This border will be between the glass of the radar and the black circle, it's the green one in the image below. Step 21 Now let's apply more Layer Styes to add a more metallic look to our design. Use the image below for the values. Step 22 Below you can see the look of the border after the layer styles. Step 23 Now create a circle with the same diameter of the one that has the radar elements, then apply a Gradient Overlay on it using white for the start and end colors but the different opacities, like 0 for the start and 100 for the end. After that resize it a little bit horizontally only. Then using the Elliptical Marquee Tool (M) create an selection like the image below and hide that area of the selection with laery mask (Layer>Layer Mask>Hide Selection). Step 24 Select all the layers used to create the radar interface including the circles with gradient overlay. After that duplicate them and merge the duplicated layers into a layer. Then go to Filter>Blur>Gaussian Blur. Use 15 pixels for the Radius. Change the opacity of this layer to Screen at 50%. The idea of this layer is to increase the glowing effect. Step 25 With the Eraser Tool (E), delete the areas that are dark in the radar interface to increase to contrast. Conclusion As you can see the whole idea of this tutorial was show you how to create a Mac style icon in Photoshop using basic tool and filters. You can even use more non-destructive features like smart objects in order to make it easier to resize. Green Version You can create different color schemes using the Hue and Saturation. To do that just go to Image>Adjustments>Hue and Saturation or Layer>New Adjustment Layer. Download the Photoshop File Click here to download the Photoshop file used for this tutorial

Interview: Everaldo Coelho

Everaldo Coellho is one of the most talented icon designers out there, since the very first time I saw the Crystal icons I became a huge fan and even more when I found out that he was Brazilian. Everaldo has been working with icon and UI design for almost a decade now and after founding and running his own design studio he decided that it was necessary to go a little further and joined the Apple Design Team. Fabio got the chance to meet him in San Francisco last October and they talked about all sorts of things, design and non-design related, now I want to share with you this really insightful interview with Everaldo. Also, don't forget to visit: http://www.everaldo.com and http://yellowicon.com. Fabio and Everaldo, in San Francisco Can you start by telling us a little bit about your training/education, where you studied, what courses you took, or if you're self-taught? I am passionate about humanities. From early on I liked psychology, especially psychoanalysis. I also started to study theology, but didn't complete the course. I have a bachelor's degree in communication and design that was given to me based on my work experience, I never took any kind of design class as a student. I took several short courses and workshops, but not an actual college program in the area. I don't believe in being self-taught, but I think that might be what most people would refer to me as. I read a lot, and every day. For me, a formal university education is extremely important, but I think what's more important than receiving training is containing that information. Unfortunately the two do not always go together. The Crystal project is what gave you worldwide recognition, right? Did you begin this project? Yes, Crystal was my first serious project in interface design. The project itself started very simply, actually not even as a project. All I wanted was just to customize my own desktop. In 2000 I familiarized myself with Linux and soon after in 2001 I got a job in the marketing department of Conectiva (now Mandriva). This was the time when the world was getting to know Windows XP and Mac OS X refurbished with their icons with more colors and transparencies. Linux was still using icons reminiscent of Windows 95. It was then that I started drawing the icons. The guys at Conectiva liked them and motivated me to continue the project which I named Crystal. They later became the default KDE icons, which at that time was the most popular graphical interface for Linux. I believe that we would make better products if we spent more time reading Freud, Lacan, Piaget, Yung, Cury, and other great psychologists. Unfortunately even the few designers who devote some attention to this still prefer reading more shallow literature. At the end of the day we design products for people. And what about Icon Design, did that project emerge from Crystal? Tell us a little about that story. In 1999 I got my first official job as a children's book illustrator under the publishing company Dom Bosco in Curitiba. There I was introduced to a PC for the first time and one of my first questions was, "how do I change this yellow icon?" I was referring to the Windows 95 folder icon. Later "yellow icon" became the name of my studio. Anyway, I already "played" with icons before but it was really with Crystal that it became serious work. You say that you rely heavily on philosopher Protagoras' quote: "The human being as the measure of all things". What is the idea that you from this phrase to your life and work? I consider myself a humanist and this quote from Protagoras accurately reflects this philosophy. Designers and developers rely too much on aesthetics, codes, jargons and fashion movements. They waste too much time reading books about design, web, languages, graphics software, and all that is really important. What worries me, however, is that they don't give the same attention to understanding humans. I believe that we would make better products if we spent more time reading Freud, Lacan, Piaget, Yung, Cury, and other great psychologists. Unfortunately even the few designers who devote some attention to this still prefer reading more shallow literature. At the end of the day we design products for people. Understanding their feelings, emotions, conflicts, ambiguities is, and should be, the basis of our work. Otherwise we are just making decorative design and not creating experiences. What is your working method for an icons project? Do you start with a few freehand sketches? Which programs do you use the most? The most important part of an icon is the metaphor, and finding an appropriate metaphor is naturally the first step. In part of this, psychoanalysis, semiotics and sociology are extremely useful knowledge. UI/UX is all about projecting emotions. The next step is to create a simple sketch. We used to do it with pencil on paper or in Adobe Illustrator, but now Yellow bought iPads for all the designers and we use Adobe Ideas for that. After we reach a conceptual idea, a preview is sent to the client and once approved we go to the final render. Usually we do the icons in vector on Illustrator and touch up on Photoshop. Recently I've been testing out designing the actual vectors directly on Photoshop, but I'm not sure this is a good method. I have also tested the Sketch on Pixelmator but it is still early to say what I think :) And your daily routine, do you tend to get up early, sleep late, do any sports? How do you organize other actives together with work during the week? I lived in London for a few months, I returned to Brazil for a few, and now I'm moving to California (I'm doing this interview on the plane). I'm also leaving Yellowicon to join the team of designers from Apple. Because of all these changes, my daily routine is, let's say, "messy". I was doing weight training until three months ago and now I intend to start back up again in San Francisco. I need to lose weight :D The most important part of an icon is the metaphor, and finding an appropriate metaphor is naturally the first step. In part of this, psychoanalysis, semiotics and sociology are extremely useful knowledge. UI/UX is all about projecting emotions. We know of other great artists who work with icons, like John Hicks. Do you like his work? And what are other designers that you admire? John Hicks does a fantastic job, I'm a fan of his. There are also many others, but I prefer to avoid naming names as you run the risk of being unfair. Yellowicon has some of the best designers I've ever had the pleasure of meeting, and now at Apple I've met some truly fantastic guys as well. I'm also impressed with a few Russian designers I've seen on Dribble. Actually, what is happening in Russia? These guys are amazing! :) What were some of your most rewarding work? Either by company size or final result. At Yellowicon I worked with many companies of various flavors, shapes, and sizes around the world. They were wonderful experiences but I don't necessarily have a favorite job. I really liked the Yogurt app that was a personal project of mine with Eduardo Fonseca from A&D. Unfortunately the limitations of the Orkut API and a few of Apple don't allow us to make the app that I wanted to. I have a special affection for Orkut, it was through it that I met my fiancee. I also really love the iPhone. So this project was really fun to do. And plans for the future, any new project to be launched? I have three apps for iOS projected for development, but now with all this moving I don't know when it will be released. The guys at Yellowicon are working on the new studio site. The current is about four years old and no longer reflects the time nor the current portfolio of the studio. And finally, are you happy with your work and what you do? And how important is this in your life? I love my job a lot! I feel like a truly blessed guy to do what I like and still get paid for it. I try to give things the value that they deserve. I'm not young anymore and after awhile you learn that the things that truly have value in life are not in fact things at all.

Real Apple Logo in Photoshop

In this case study/icon tutorial Edward Sanchez will share with us the creative process behind one of his personal projects, a really cool icon called the Real Apple Logo. The image mixes real photography with the Apple logo in Photoshop to create this super cool icon. I'm not quire sure why I never thought of doing this before. And I certainly never saw it done by anyone. Step 1 I started by getting a vector version of the logo so I could make a shape layer on photoshop. Step 2 Then I found a photo of an Apple to use as my base. Step 3 Using the liquify tool I morphed the Apple close to the shape of the logo. Step 4 In order to give it an ultra realistic feel to it, I adjusted the saturation, removed the original glow, and used smart blur and the clone tool to only keep the most prominent details of the apple. Then I masked it into the shape of the logo. Step 5 With the brush tool I added highlights and shadows to the shape to accentuate the volume. Step 6 I morphed the leaf with the liquify tool to make it come close to the original logo shape. I found that if I was 100% faithful to the shape it just looked too fake, so I retained some of the original leaf shape. Step 7 Now the actual bite! I found a picture of a bitten apple and masked it into this hand drawn shape. I also added a bit of a shadow around it and inside it to give it some contour and depth. Step 8 Finally I added the floor shadow and voila! Step 9 Here are my layers… I like to keep my highlights in separate layers so I can control individual opacity as well as the filter. Conclusion Here is the final result. You can share your opinions by leaving a comment or visiting my Dribbble profile. About the Author Edward Sanchez is a UI designer founder of Kohive.com. Born in Brazil to a Spanish father he moved to London when he was 18 and lived there for 10 years. He has recently relocated to Silicon Valley to start at new position.

New Quicktime Icon in Photoshop

Apple is about to release their new version of Mac OS X, code-named as Snow Leopard. With this new release there will be a totally new version of Quicktime. One thing that is really cool is the new icon for the app. Because of that I decided to play a bit with Photoshop to reproduce the effect. Step 1 Open a new document in Photoshop, I used 512x512 pixels. Then start adding some guides using squares for references. They will be useful to create the circles. With the Ellipse Tool (U) create a circle. Step 2 Go to Layer>Layer Style>Gradient Overlay. Use Normal for the Blend Mode, and for the colors use #242e3c for the dark and #b4c1d4 for the light. Also change the Angle to 90º. Step 3 After the gradient overlay, select Stroke. Then change the Size to 1 pixel and for the Fill Type use Gradient. For the colors use #7f8a98 for the dark and #e9f1f4 for the light. Also use 90º for the angle. The light colors will be at the top. Step 4 Click on Bevel and Emboss. For the Style use Inner Bevel. For the Technique use Smooth, for the Depth use 20%, for the Size use 45 pixels, for the Soften use 15 pixels. Now for the Shading use -90º for the Angle, 65º for the Altitude, then for the Highlight Mode use Color Dodge, with white and 100% opacity and for the Shadow Mode use black, Multiply and 100% opacity as well. Step 5 That's the effect you will have after the Layer Styles. Step 6 Again with the Ellipse Tool (U) add create another circle. Then click over the Layer Palettes, click with the right button of the mouse over the big circle layer and select Copy Layer Style. The click on the new circle layer click with the right button again and select Paste Layer Style. Step 7 Over the Gradient Overlay, change the colors a bit, make them darker and add another spot of color. Use the image below for reference. Step 8 Select Inner Shadow. For the Blend Mode use Multiply, for the Opacity use 55%. For the Distance and Choke use 0 pixels, then for the Size use 6 pixels. Step 9 Now for the Stroke, the colors will change a little bit, we will add some transparencies. Use the image below for reference. And look how I added a 0% opacity right in the middle of the color scheme. Step 10 Now this is is the effect you will have after the layer styles. Now it's time to add another circle. Step 11 Once again with the Ellipse Tool (U) add another circle that will be the glossy part of the icon. Step 12 Go to Layer>Layer Style>Gradient Overlay. Use a dark blue and a light blue for the colors. Then for the Style use Linear, and 90º angle. Use the image below for reference. Step 13 Select Inner Glow. Change the Blend Mode to Overlay. For the Opacity use 75% and black for the color. Also change the Choke to 0% and the Size to 18 pixels. Step 14 Now add a Drop Shadow. Change the Blend Mode to Multiply, and the Opacity to 75%. Also change the Angle to -90º, the Distance to 4 pixels, and 10 pixels for Size. Step 15 This is the effect you will have after the layer styles. Step 16 With the Ellipse Tool (U) create an ellipse using white for the color, also change the opacity to 30%. Step 17 With the Elliptical Marquee Tool (M) create an ellipse like the image below, then with the white ellipse layer selected go to Layer>Layer Mask>Reveal Selection. Step 18 Go to Filter>Blur>Gaussian Blur. Use 30 pixels for the Radius. Step 19 Add another circle, now more at the top of the middle part. Then apply a Gradient Overlay through Layer Styles. For the colors use white and white, and change the opacities to 0 and 100%. Also the Angle use 90º and the Style Radial. Move the gradient a bit to the top like the image below. Step 20 Click holding Command (mac) or Control (PC) over the Vector Mask thumb in the layer palette. That will create a marquee selection. Then go to Layer>Layer Mask>Reveal Selection. Now select just the layer mask and go to Filter>Blur>Gaussian Blur. Use 2 pixels for the Radius. That will soften the edges of the effect. Step 21 Create a new ellipse again, now at the top of the icon. Then holding Command (mac) or Control (PC) click on the thumb of the big ellipse. That will create a marquee selection of the whole circle. After that, again holding command or control but now with Alt, click on the middle ellipse. That will subtract that area from the marquee selection. Then just go to Layer>Layer Mask>Reveal Selection. Step 22 Now apply the same Gradient Overlay we applied in the step 19. Just change a little bit of the presets, like in the image below. Step 23 Duplicate the layer for the top highlight and with the marquee selections still active, go to Filter>Blur>Gaussian Blur. Use 30 pixels for the Radius. After that change the Opacity to 80%. Conclusion For this tutorial we basically used the Ellipse Tool, with Layer Styles and a few blurs. It's all about playing with gradients, shadows and strokes. You can even try different colors for the middle part instead of the blue scheme. The best thing when trying to recreate existing icons is that you learn quite a few new ways to create effects. Other Versions Download the Photoshop File Click here to download the Photoshop file used for this tutorial

Time Machine Icon in Photoshop

Last week I got sometime to study a bit of icon design, specially the Mac OS X icons. Among all Leopard icons the one that I like the most is the Time Machine one, it's really beautiful and the idea is very clever as well. With that icon in mind, I sort of challenged myself and I decided to recreate it in Photoshop to see how some of those effects work and, perhaps, start creating some icons as well. After a couple of hours I had gotten a satisfactory result, I think. So I decided to teach my girlfriend how to create the icon. Well, she stopped on the third step :). But I still think it’s a very useful tutorial. UPDATE: I think the tutorial will be published this week on PSDTUTS.