articles on
Icon Design by Nick Kumbari
Last year we featured some fantastic marks and logos pieces done by American designer Nick Kumbari. He kept his game tight and has designed some super sweet icons. Check it out! Here you can see some of his sketches, as well as the finished pieces. These are pretty cool! For more of Nick's work, please visit his portfolio at Behance. I hope you enjoy these as much as I did! Cheers. ;) Sketches Finished Icons
App Icon Sketches by Ramotion
Ramotion is a digital design agency with incredible works. In this post we selected some app icon sketches they have as part of their app icon design process. Take a look at these icons before they become fully digitalized. For more form Ramotion visit http://ramotion.com/. An application icon is all about creating an image of a product. It should clearly define the application's philosophy and create an image memorable to the user.
Freebies: Awesome Icons and Favicon Generator
Today we're featuring more great sets of free icons! We've selected great sets for you to use in your next project, and also, there's a super neat Favicon Generator which will give you the right sizes for several devices, and will make things easier for you. Of course, this is a super brief selection, but if you've seen any more great free icon sets around the web, don't forget to share it with us! I hope you find these useful. Enjoy! Cheers. ;) Free Flat Finance Icons Tools Icons Free 22 People Icons Freebie - Viro, Modern Icon Set Tasty Icons Free – 36 hand-drawn food icon Valentine’s Day freebie Free Sketch Icons Freebie: Icons set Free Glyphs Material Design Icons Freebie: Favicon generator
Mid-Century Canada Icons
Canadian designer Michael George Haddad decided to design a simple, strong icon for each of Canada's 13 provinces and territories. Mid-Century style. Enjoy! For more from Michael George Haddad visit michaelgh.com and https://www.behance.net/michaelh. Alberta British Columbia Manitoba New Brunswick Newfoundland and Labrador Nova Scotia Northwest Territories Nunavut Québec Ontario Prince Edward Island Saskatchewan Yukon
Icon Designs by Tim Boelaars
Tim Boelaars is an independent graphic designer and illustrator from Amsterdam, The Netherlands. Tim specializes in icon designs and have worked with some major brands creating amazing little icons that you can see on this post. For more from Tim Boelaars visit timboelaars.nl. The New Yorker A set of eight 30 by 30 pixel icons for The New Yorker's new website. The categories illustrated from left to right, top to bottom are: Read, Search, Experience, Go, Shop, RSVP, Think, Win. The icons are in use on The New Yorker On the Town Comcast Various technical illustrations and illustration of Comcast equipment for Comcast. These illustrations are used in installation guides, manuals and on Comcast's packaging. Their main purpose is to easily recognize and portray the various contents of Comcast's products. Monicons A collection, consisting of two sets of 100 vector icons created for selling purposes. Airbnb Several illustrations for Airbnb's new office interior. From left to right and top to bottom: Birthdays, World Team Meetings, Design & Tech Talks, Happy Hour, Friday Meetings, Yoga, Hackathons, Fireside chats, Rauch St. Apartment, Workshops, Formal Fridays, Seated Massage. ESPN Several spot illustrations for ESPN the Magazine for articles about women in sports. Sprint Icon and illustration work created for Sprint. These icons and illustrations were mainly used in Sprint stores in the United States, during the holiday season at the end of 2012 and 2013.
One Year of Icons by CreativeDash
CreativeDash is a digital studio based in San Francisco, CA, focused on enhancing your customers’ experience via incredibly attractive, vivid graphics and engaging interface design. I am a huge fan of their work, I have been following them for quite a long time on Dribbble and the quality of their icons is unbelievable. To have an idea, they just published on Behance a post titled One Year of Icons. We had to feature it here on Abduzeedo as well. For more information visit: http://www.creativeda.sh Great UX is about more than just looking nice - it is about feeling right and making the user an integral part of an experience. Too much going on and it distracts the user - too little, they struggle to figure out how to use it; there is a certain balance to it all. This is something we truly understand and implement into every app or website that we design. - CreativeDash
Behance App Icon - Case Study
We all know by now the importance of sketching. It's the essence of idea exploration and budget friendly to boot. Grab a piece of paper, a pencil and let your imagination flow. To inspire you to incorporate sketch in your daily life we're excited to feature a sneak peek behind the making of the new icon for the Behance app created by Ramotion Inc. For more information visit http://ramotion.com/ The first touch It's extremely important to start by putting all ideas into pencil sketches. So as the first step, we always start by brainstorming a lot and drawing like daredevils. Inspiration Devil is in the details When someone asks why we spend so much time sketching, we always answer that before you open Photoshop you have to know exactly how the final design should look and work. Color Sketches Done Done
New Icon Trends
With the launch of iOS7 we have been noticing an increase in some particular icon style and illustrations. From skeuomorphism to flat vectors and now, thick strokes. It's not a new style, however it's getting pretty popular especially for icons and pictograms. To illustrate that we selected a few examples we found while surfing on Behance and Dribbble.
Cooking Glove - Icon Making of
Last week I posted about some icon design inspired by pancakes and donuts. Those icons were pretty cool and super realistic. Today we bring to you another amazing case study for an icon, this time inspired by a cooking glove. The cool thing about this case study by Anna Paschenko is that it shows the whole process of creating in terms of sketches, modeling, materials until the final result. Anna is a freelance designer from St. Petersburg, Russia. She has an incredible portfolio of icon designs. We highly recommend that you check it out. Her website can be found at http://annapaschenko.com/ Idea & Sketch Modeling Materials UV Mapping Texture Final Version
Cool Icon Designs
Weirdeetz is specialized in Icon Design and his work is awesome. I always admired the details on these little icons and the patiente the designer must have to get it done. In this post you will see a quite a few cool icons to inspire you. For more cool icons visit weirdsgn.com
Icon Design in 5 Steps - Free Icon Set from Ramotion
Icon design is a craft that requires some incredible amount of skills. It's all about creating simple representation of actions, products or services that can be use in interfaces. It sounds simple however these icons have to be understandable in various different sizes, from 16x16 pixels up to 512x512 pixels. We haven't post much about icons but today we want to share with you a post showing a little bit of the workflow behind icon creation. Denis Pakhaliuk from Ramotion wrote this post listing the 5 step process they use to create icons. In the end we also have the full set for free to download 1. Brainstorming We discuss the icon with designers and looking for the most appropriate metaphor. As soon as everyone agree to choose one metaphor we start next phase. 2. Sketching We usually design 3-5 pencil sketches of approved metaphor. And then we meet again and discuss which icon we love the most. And eventually choose one sketch. 3. Photoshop rendering Based on approved pencil sketch we start to render it at Photoshop. Then, we create the main shapes and continue to work out the details. 4. Improving details On this stage we work with a lots of references for better understanding of materials and lighting. Very important to design each icon the way when it's clear at a glance. We exaggerate the effects so that the user can recognize what we want to say. 5. Final approve We meet again and see if we love the icon. Then we do final revision and finalize icon. Full Resolution Download free icon set Download icon set About Ramotion Ramotion is a mighty tool to realize the most courageous ideas from icon design to complete range of services in development and support of your application. For more information visit: http://ramotion.com/
Beginner Tutorial: Easy Clock Icon on Illustrator
Hi everyone, today we're going to do a really simple exercise on creating this slick clock icon on Adobe Illustrator. If you're beginning in using this software, well this tutorial will be very suitable for you, so let's begin! Just a little reminder: this is a beginner tutorial, even though some of you are really skilled with Adobe Illustrator, I would recommend to take the time to read this as you can get some insights and ideas out from this tutorial. Please comment If you have any questions, problems or doubts, have fun! Step 1 Let's open Illustrator and make a 15 x 21 cm canvas. Using the ellipse tool (L) and make a ellipse on the center of the canvas. Let's fill it with a radial beige gradient. Then duplicate it using the selection tool + alt or by just pressing command + c / command + v (ctrl + c / ctrl + v). Enlarge it proportionally by holding shift + selection tool. Now apply a metallic linear gradient over it. Make another ellipse using the same gradient, but this time change the gradient direction to give the sensation of depth. Make a circle inside the beige one, adjust the stroke to about 90 pt or more, it need to cover the whole circle. Then access the strokes panel and set a dashed line with 9,3 pt of dash, then go to the transparency panel and choose the blending mode to Soft light. Make a semi circle by using a circle and a square in the middle of it, select both and use the pathfinder option called Minus front, that must give you a semi circle. After that go to the gradient panel and make a white gradient with 0% of opacity on one of the sides. Then duplicate your semi circle and flip it to the other side. Let's make some golden dots to indicate the hours. Use some golden radial gradient on it, duplicate and adjust the position by using the align panel. Duplicate the first four and then make a rotation. Do it twice till you got the twelve hours of the clock on the desired position. I decided to simplify and use a common serif font (Capitals), let's make a classic hard shadow effect. First make the number using a grey color. Then duplicate it and put a white color copy over it. Step 2 Let's make another fading gradient, this time using black on one of the extremities. We're going to make this ellipse and fill it with this radial gradient. Let's create other ellipse on the top of this shadow using the ellipse tool (L) , let's add a red radial gradient on it The second arrow can be achieved by using the pen tool (P), just remember to create ellipse on the bottom of it and blend both using the pathfinder option called Unite. Using the ellipse tool (L) make the minutes pointer, adjust the vector points using the direct selection tool (A). Add a grey gradient, adjust the darker area to be next to the ellipse, so it will look like a shadow. Duplicate the previous shape, re-size it so it can fit inside the pointer and then add some golden gradient on it. Duplicate the big pointer and send it to back. Use a dark grey fill on it then go to Effects > Blur > Gaussian Blur. Set the radius to 7,4 pixels. Repeat the same procedures on the other pointer. Step 3 Let's make the legs, first make a rectangle and rotate it a bit on the bottom of the clock, don't forget to send it to back. Make another rectangle and adjust the two vector points of the bottom using the direct selection tool (A). Make a ellipse on the extremity. Add some grey metallic gradient on both three, make sure they're all in the same direction. You can also add some shadows over it by making a rectangle with a black fading gradient and then using the blending mode called Multiply, quite easy. Let's make a shadow bellow the clock, use the ellipse tool (L) to make a grey to white gradient. Step 4 Let's make the bells, first make ellipse and add a gradient with the darkest part on the top. Create a rounded rectangle, click on the icon to adjust the corner radius, set it to 1 cm. Now make a rectangle crossing on the middle of it, then go to the pathfinder panel and choose the option called Minus front. Adjust the remain piece and choose a metallic gradient to put over it. Make a little rectangle on the top of the rounded shape an then a bigger rectangle over it. You should be pretty cautious while trying to create the gradient for the clock pin, so it should look like it has some sort of slots to adjust, so make a complex gradient. Okay now we just need the ring breaker, this should be piece of cake. Using the pen tool (P), make a shape then just duplicate it and reflect to the other side. Final Result Download the Illustrator File Click here to download the Illustrator file used for this tutorial.
Easy Camera Icon in Fireworks
A few weeks ago I decided to create a camera icon. Usually I would do that in Illustrator or Photoshop, however as I use Fireworks pretty much most of my time I chose to create the icon using it. The cool thing about Fireworks is that you have the vector features found in Illustrator with bitmaps features found in Photoshop, especially layer style filters. So in this tutorial I will show you how to create a camera icon in Fireworks. I will focus on the lens pretty much, but as you will see, to create a realistic effect it's all about playing with gradients. Reference The first thing to do is always find some references so we can learn about lighting, shadows and texture. For my icon I wanted to recreate the Sigma DP2s. Step 1 Open Fireworks and start a new document. I am using 1024x1024 pixels. You can do the same using Illustrator or Photoshop. After that with the Ellipse Tool (U) create a circle. Step 2 Start creating more circles following the photo as references. Step 3 Now it's time to create the small circles that will be the lens. When you see those lens they look quite complex but if you analyze it's quite simple to recreate that, it's all about circles. Step 4 Now we have all the circles necessary to create the lens. As you can see we are just playing with black outlines and no color. Step 5 With the Rounded Rectangle tool create the body of the camera. After that click on the yellow controller to change the type of the corner. Step 6 Now let's start making the lens looks more realistic. Select the bigger circle and apply a gradient. Use the Cone type with grey and black for the color. Use the image below for reference. Step 7 Now for the second circle just use black for the color with #333 for the stroke. Step 8 For the third circle use #1B1C1C for the color and #333 for the stroke. Step 9 Use black color for the next with the same stroke color. The for the other one use the same as the third to alternate the colors. Step 10 For the next 4 circles use #1B1C1C for the color with #333 for the stroke. The 5th you use black for the color. After that use #999 for the stroke of the 6th. We need some highlight to the center part. The add other 3 circles like the image below, with the last one using a linear gradient. Step 11 For the circle in the very center fill it with black. As you can see in the image below, until now we haven't done anything much fancy or difficult, it was just repetition. Step 12 Now add 4 new circles in the center of the document. The big one in purple (1), then another one in dark/green yellow (2), one in the very center smaller in light yellow (3) and another one in green (4). Use the image below for reference. Also change the Edge Type to Feather with 3pt. Step 13 Add 2 new circles one bigger and another smaller. The go to Modify>Ungroup. Then with the Subselection Tool (A) edit the circles to make them look more like an ellipse. Change the Fill color to Linear Gradient and use #728EA6 for the color but with 100% transparency in the beginning and 0% at the end. Make sure the total transparent part is towards the center of the lens. Step 14 Add an ellipse to use as a mask. That's important to create the refleciton in the lens. Step 15 Cut the ellipse and start selecting the colored circles. Celect the dark yellow one and go to Edit>Past as Mask. Step 16 Repeat the same thing for the other circles. Now for the big reflection select the circle like I did in the image below and copy. Select the big gradient ellipse and go to Edit>Paste as Mask. Do the same for the other small gradient ellipse. Step 17 Now lets add some effects on the body of the camera. We had the rounded retangle. To add a little bit of 3D effect just add two rectangles one at the bottom and one at the top. Apply a gradient on them so the left and right edges are transparent. Step 18 Add 2 new rectangles on the right and left edges of the camera. Then apply a gradient using white for the color but with 100% transparent at the beginning and end and 0% transparency in the middle. That will add a nice round 3D effect. Step 19 Move the lens on top of the body. You can add more effects like shadows and elements. Step 20 Here are other parts of the camera I created. They are basic rectangles with gradients and different sizes. They look very basic but when you put them to together you ger a very realistic effect. Conclusion Select all layers but the ones in the center of the lens. The go to the Add Filters button on the Properties panel. Click and select Noise>Add Noise. Use 2 Amount, that will give a nice texture to the camera. As you could see in this sort of walkthrough/tutorial, create the camera and the lens was quite simple, however you have to go all the way till the end in order to get the result you want, otherwise you want be able to see how simple colors and gradients when together can create a nice effect. Step by Step Download Fireworks File Click here to download the Fireworks file used for this tutorial
Easy 3D Globe in Photoshop
A few weeks ago a friend of mine wanted to know how to create a sort of 3D globe effect using Photoshop. I didn't know how to do that but I got really intrigued with that, so I decided to give it a try. I knew that the Spherize would work in this case but didn't know how. So in this tutorial I will show you how to create a nice 3D globe in Photoshop using basic tools and the Spherize filter. This whole tutorial won't take more than 30 minutes but the technique is really useful especially for icons and logos. Step 1 Open Photoshop and then with the Rectangle Tool (U) create a rectangle, then start duplicating it until you get 7 columns. Use the Distribute Horizontal Centers to make the distances the same. After that duplicate those 7 rectangles and rotate them to create a grid. Step 2 With the Elliptical Marquee Tool (M) create a circle selection like the one I did in the image below. Step 3 Go to Filter>Distort>Spherize. Use 100% for the Amount and Normal for the Mode. Step 4 Cut the selection and paste it in order to get the front face of the globe. Step 5 Go to Layer>Layer Styles>Gradient Overlay. Apply a gradient from dark red to light blue in linear mode. You can try with Radial as well. Step 6 Duplicate the layer and rotate it 45º Also change the gradient colors to light red on top and dark blue at the bottom. This will create a really nice 3D effect and it's super simple. Step 7 Select the background layer and go to Layer>Layer Styles>Gradient Overlay. Use (#aa616b) and (#2c354d) for the colors, Radial for the Style and 140% for the Scale. Position the center of the gradient a little bit on top of the center of the globe. To do that just click and hold to move the gradient position while you are in the Gradient Overlay properties. Step 8 Select the two globe layers and duplicate them. After that go to Layer>Merge Layers. You will have one layer with the globe. Go to Layer>Layer Styles>Color Overlay. Use black for the color. After that go to Filter>Blur>Gaussian Blur. Use 15 for the radius. Then just resize it and change the opacity to 20%. to create a nice shadow effect. Step 9 Select the front face of the globe and edit the Layer Styles. Click then on Inner Shadow and use white for the color, Color Dodge for the Blend Mode at 60% Opacity. Also change the Angle to 100%, Distance to 3 pixesl and Size to 7 pixels. Step 10 After the Inner Shadow you will get a nice light effect in your globe. Step 11 Select all layers and duplicate them. After that go to Layer>Merge Layers to have one layer with all the image merged. Go to Filter>Blur>Gaussian Blur. Use 20 pixels for the Radius. Step 12 Change the Blend Mode to Overlay and you will get a really nice light effect. Conclusion Now just add the text you want and also you can apply a texture on top. I am using a scanline pattern I created. The whole idea of this tutorial was showing how to create a nice 3D globe using only Photoshop, it's a nice technique for logos and icons and it's super simple to achieve. Download the Photoshop File Click here to download the Photoshop file used for this tutorial
Stylish Metallic Button in Photoshop
Last Saturday I was checking Dribbble for some inspiration when I came across this beautiful design created by a Portuguese designer called Emanuel Sa. It was an icon with some beautiful metal effects, so I decided to learn how to do that in Photoshop. So in this tutorial I will show you how to create a nice metallic button using Layer Styles in Photoshop. Step 1 Open Photoshop and create a new document, the size I am using is 2560x1440 pixels because it's a nice HD wallpaper size. After that with the Ellipse Tool (U), create a circle in black. Step 2 Create another circle, smaller and align both in the center of the document, after that, create a marquee selection of the smaller circle. To do that is super simple, just hold the Command (MAC)/ Control (PC) key and click on the thumb of the layer of the circle. Step 3 Select the big circle and go to Layer>Layer Mask>Hide Selection. You will have a nice ring ready to add some chrome effects. Step 4 Go to Layer>Layer Styles>Color Overlay. Use a dark grey for the color. Step 5 Select Bevel and Emboss, then for the values use Inner Bevel for the Style, 550% for the Depth, 32 pixels for the Size, 2 pixesl for the Soften, 100º for the Angle, 30º for the Altitude. Also change the Gloss Contour for the one I am using in the image below as well as the values for the Highlight and Shadow mode. Step 6 Select Inner Glow and use Color Dodge for the Blend Mode, 75% for the Opacity, white for the color. Then for the Choke use 0% and the Size 6 pixels. Step 7 Select Drop Shadow and use the values below, make sure that the angle is 90º and that you didn't mark Use Global light. Step 8 Create a black circle in the middle and then add another one a little smaller to create the center part of the button Step 9 With the small circle of the center selected, go to Layer>Layer Style> Gradient Overlay. Use Normal for the Blend Mode, 100% for the Opacity, and for the Gradient use a dark grey to black and Linear. Also for the Angle use 90º and Scale it to 75%. Step 10 Select Bevel and Emboss. Use Inner Bevel for the Style, 80% for the Depth, 3 pixels for the Size and 0 for the Soften. For the Shading options use the image below. Step 11 Add another circle using the Ellipse Tool (U), the with the Direct Selection Tool (A) edit the points and also with the Pen Tool (P) add 2 points and delete other 2 that were the horizontal center ones. The image below shows how this shape will look like. Step 12 Go to Layer>Layer Styles>Gradient Overlay. Use Screen for the Blend Mode use Screen. For the Opacity use 100% and for the Gradient use white and black for the colors, for the Angle use 90º and for the Scale use 140%. Step 13 Here is the final result of our button/badge. Now it's time to add your logo. I used the Abduzeedo symbol I created in Illustrator and pasted in Photoshop so I could apply some layer styles. Step 14 With the logo selected go to Layer>Layer Styles>Gradient Overlay. Use the image below for values and the gradient colors. Then apply a bevel and emboss. Step 15 Here is the final result of our logo with the metal symbol. Step 16 Let's create a nice texture for the background, to do that just select the background layer and go to Filter>Noise>Add Noise. Use 5% for the Amount, Gaussian for the Distribution and select Monochromatic. Step 17 Go to Filter>Blur>Motion Blur. Use 0º for the Angle and 20 pixels for the Distance. Step 18 Go to Layer>Layer Styles>Gradient Overlay. Use Multiply for the Blend Mode, 100% for the Opacity, black and white for the gradient color, Radial for the Style and 90º for the Angle. Conclusion As you could see the whole process was super simple, we just played with Layer Styles to create an amazing metal effect in Photoshop. This effect is perfect for icons or if you want to create a logo for an automobile company! Now it's all about practicing and trying different variations. Version 2 Just playing with some light effects to create a nice Start button. Download the Photoshop File Download the Photoshop file used for this tutorials
Sweet Minimalist Designs by Celeste Prevost
I think one of the most common problems that graphic Designers have with clients is that most of the time clients tend to think that the more detailed a project is, the better he will become. This happen with all type of projects, from illustrations to identities. However, we know that sometimes less is more and that was what I've seen on Celeste Prevost works. Every designer who use's a Macintosh is probably a great fan of Apple's identity, well known for it's minimalism and simplicity. I must admit that I felt the same felling when I looked at Celeste Prevost's Identities, icons and illustrations, they're are so simple, but at the same time so effective and recognizable. If you want to see more of her works, please access her website. The Shoppe K.I.D. Collective MIMA Summit Green Spark Haagen Dazs Blender Fresh Simple Hand of God Typeface is available for free via MyFonts.
Radar Icon in Pixelmator
A few weeks ago I showed you how to create a Mac style icon using Photoshop. It was a radar one inspired by the Network Utility icon. As I like to play with all tools I decided to give it a try in Pixelmator as well. So, in this tutorial I will show you how to create a beautiful Mac style icon using Pixelmator. I will show you how to create some bevels and light effects that are very characteristic of these icons. Step 1 Open Pixelmator and create a new document, I'm using 1024x1024 pixels. After that fill the background with a dark grey and add some noise using black for the background. Once you have the background with the Ellipse Marquee Tool (M) create circle and fill it with a 50% grey. Step 2 Duplicate the circle and then go to Edit>Free Transform and resize it so it's slightly smaller. After that go to Edit>Load Selection to create a marquee selection of the smaller circle. Step 3 Select the big circle with the marquee selection active and hit the Delete key to delete that area of the big circle. If you hide the small one you will have a result like the image below. Step 4 Duplicate the grey border we created in the previous step and change the Blending to Screen in order to make it lighter. Step 5 Duplicate the border again and fill it with black then, there are 2 ways to do that, once is using the Paint Bucket Tool (N) and the second one, which I prefer is to go to Filter>Color>False Color. Then just make sure that you have black as the background color before applying this filter. After that go to Filter>Blur>Gaussian Blur. Use 15 for the amount. Then move it down a little bit. Use the image below for reference. Step 6 Duplicate the grey border again and use the fake color filter but this time to convert it to white. Then go again to Filter>Blur>Gaussian Blur. Use 15 again for the amount. After that resize it a little bit in order to make it a slightly smaller. Another thing you will have to do here is this, add a new layer and fill it with black, this layer will be beneath the white border. After that merge the two layers and change the blending of the merged layer to Linear Dodge. Step 7 Group all layers used to create the metallic border. After that create another circle that will be the center of our radar. Use black for the color and it will be beneath the border group. Step 8 Go to View>Show Gradient. Create a new gradient preset and then use radial for the type and for the colors use black and #926007 for the center color. Step 9 Duplicate the black circle in the center and resize it in order to make it slightly smaller. After that go to Edit>Load Selection. Then with the Gradient Tool (G) fill the circle with the gradient where the center will be at the bottom of the circle. Use the image below for reference. Step 10 Add a new layer and with the Brush Tool (B) and with a very soft brush and #926007 for the color paint a light spot on top of the center of the circle with gradient. Notice that the circle marquee selection is still active. Step 11 Add a new layer on top of the previous two layers. Now with the Brush Tool (B) and still with the same very soft round brush, use black to paint on the sides of the circle in order to create some depth. Step 12 Add a new layer then fill with black. With the Rectangular Marquee Tool (M) create a thin rectangle and fill it with white in order to create a line. Step 13 Go to Filter>Blur>Gaussian Blur and use 2 for the Radius. After that change the Blending to Color Dodge. You will get a really nice light effect. Duplicate this layer and rotate it 90º. Step 14 Duplicate both layers and apply more gaussian blur to them in order to create a glow. Step 15 Duplicate the black circle that we created in the step 7 then change its order so it is on top of the others. After that resize it so it will be much smaller like the image below. To create the light effect is very simple. The circle will be black already so go to Edit>Stroke. Use a inner stroke of 3 in white. After that change the Blending of the layer to Color Dodge and apply a Gaussian Blur of 2 or 3 for the radius. You can also duplicate this layer and apply more blur to create the same glow as we did in the previous step. Step 16 Repeat the same thing we did in the previous step to add another white stroke circle. Step 17 Add a new layer and fill it with Black. Notice this layer will be on top of the others but beneath the metallic border. After that with the Brush Tool (B) and a very soft and round brush create some white spots. Step 18 Change the Blending to Color Dodge and you will have a super cool light effect. Step 19 Add a new layer and with the Rectangular Marquee Tool (M) create a rectangular selection and fill it with black, after that create a thinner rectangular selection over the black area and fill it with white. Change the Blending to Color Dodge and go to Filter>Blur>Gaussian Blur. Use 5 for the radius. After that just go to Edit>Free Transform and rotate it 45º, then align it as I did in the image below. Step 20 In order to create a sort of ghost tracking light effect for that rectangle as it is rotating let's use the Gradient Tool (G). Create a new gradient preset using Angle for the type and black and white for the colors. Once you have the gradient preset, add a new layer and create a circle the same size as the radar center one. Then fill this circle with the gradient we created. Rotate it so the white part is exactly over the rotating bar. Step 21 Add a new layer on top of the other radar elements but beneath the border. Then create an elliptical selection of the center circle, just select the center circle and go to Edit>Load Selection. After that select the new layer and then with the Rectangular Marquee Tool (M) change the type to ellipse and then holding ALT create another selection a little bit below the center of the previous selection. Use the image below for reference. Step 22 Fill the selection with white and reduce the opacity to 10% and you have created a nice glossy effect. Conclusion Select all the layers used to create the center area of the radar and duplicate them, after that merge the duplicated layers into one and go to Filter>Blur>Gaussian Blur. Use 15 for the radius and then change the Blending to Screen at 50% Opacity. That will increase the glowing effect. As you can see, we created a very Mac style icon using Pixelmator only. We didn't have any specific filter for bevels but there's always ways to overcome that. Now it's up to you. Download the Pixelmator File Click here to download the Pixelmator file used for this tutorial