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
3D City by Anna Paschenko
It's Labor Day Weekend here in the US so naturally I took a day off to enjoy some outdoor activities. As a result, I've refrained from laboring and therefore the tutorial of this week will be posted tomorrow. Today, we're delighted to share a super cool project created by Anna Paschenko, a freelancer designer and illustrator from Saint Petersburg, Russian Federation. In this project Anna creates a super detailed city in 3D replete with style and that Sim-City feel. The requirement were a series of about 20 specific buildings which represent different types of business like mechanic store, cinema, post office, small shops and etc... Final render
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.
Gorgeous Icon Design Collection
Icon design is a true art! To come up with a single piece of design to represent an app is something that some people have really mastered. Here you can see some examples of gorgeous icons. Check it out! These were done by talented designers. To check more of their work all you have to do is to click each icon. I really hope you like our picks. Also, if you got your own icons, share it with us! Cheers. ;) JJ-Maxer Creativedash Eddie Lobanovskiy Román Jusdado Mike | Creative Mints Eddie Lobanovskiy Konstantin Datz Dustin Wallace Slava Beskrovniy Eddie Lobanovskiy Jee Kamil Khadeyev Kamil Khadeyev Artua Skelet Art Creativedash Marc Clancy Pixeden Skelet Art Eric R. Mortensen Anna Paschenko SoftFacade Creativedash Jee
Sky News Weather Icons by Harry Ward
Sky News Weather Icons were designed by Harry Ward, a graphic designer, motion graphics designer and art director from. London, United Kingdom. This work was a revision of the Sky News Weather icons to launch with the wider weather graphics relaunch. They follow the simplicity, legibility and character of the house typeface, ensuring these icons sit comfortably within the Sky News brand. For more information check out Harry Ward's Linkedin profile Via Behance
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
Exquisite Icon Design by Anna Paschenko
We don't get to post very often about icon design, but I've found a fantastic set of icons by Russian designer Anna Paschenko and it's definitely something that had to be shared with you guys. These are some fantastic skills Anna got! She definitely comes up with sweet icons. In her Behance portfolio you can even check the making of the glove icon, which I find great. But there's more for you to see, so don't forget to visit her. I hope you enjoy these, and if you know any more great icon designers, let us know! Cheers. ;) Click here to see the Making of
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
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/
Amazing Work of Julian Burford
A few weeks ago we saw this amazing food icons and we were blown away by the quality of the illustration. We decided to check out who was the author and we ended up on Julian Burford's Web site. Julian is an extremely talented illustrator from the Netherlands and totally deserves a full feature post her on Abduzeedo. I illustrate all kinds of things, from crazy characters to icon design to highly detailed product illustrations and even pin-up girls. At the moment I have a full-time job at MediaMonks. But no worries I am always interested in some extra freelance jobs. Raketje HOOK Ren & Stimpy London Office Food App Icons 50's Advertising Illustrations For more information and the full portfolio of Julian Burford, visist http://www.julianburford.nl/
Web Design: Huge Icon-Like Illustrations
One thing I definitely fell in love with are modern icons! So, when I got to see websites using huge ones, I was amazed by how well it fits in a good design. I call it "icon-like" because I'm not 100% sure that these can be indeed called icons. What defines an icon? The size? The use? Where it is made? I really don't know... but looking at these I imagine they were made in Fireworks, but I know someone smarter than me will tell us what's the most common tool to make something like these. Anyways, here are some awesome examples... and as you will notice, most of these are used by Mac apps, which makes total sense for me. Awesome OS, awesome icons... or icon-like illustrations. Also, I'd love to know from you if you know any more like these! Let us know! Cheers. ;) 6 Wunderkinder Postbox 2 Little Snapperh Cornerstone 2 Youzee Kaleidoscope Versions Checkout Enstore Candybar Transmit
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
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