Entries From The Icons Category:

Making Rounded Rectangles Look Great

Great product design involves thinking about what features to prioritize, planning the user flow from screen to screen, getting user feedback and lots more, but at the end of the day, someone is going to be in Photoshop pushing pixels. The final visual design of a digital interface isn't going to design itself, and when a designer is crafting the look and feel, here are some elements they're typically designing:

If you really think about it, most interfaces (especially for iOS apps) use tons of rounded rectangles in different shapes and sizes. Long and skinny ones with lots of shine. Squarer, flatter ones with some texture. Smaller, slightly inset ones with photos inside. The list just keeps on going. I actually joke around with friends that my main job is making rounded rectangles look great, so I thought it was time to show off some common techniques.

Drawing Them

It's important to keep your elements in Photoshop in vector format as long as you can because they can be scaled and re-styled easily. To draw a rounded rectangle, I use (gasp!) the Rounded Rectangle Tool with Snap To Pixels turned on. This is incredibly important or the edges of your shape will lie on a half-pixel and look blurry. There are some other ways to draw rounded rectangles in Photoshop (which Marc Edwards has conveniently outlined) but I typically stay with the vector shape tool because it's easy.

If the edges of your shape aren't sharp, then strokes/gradients/highlights/shadows you add later won't be perfect.

Blurry sides

Up or Down?

If your goal is to craft subtle and realistic user interfaces that look and feel like real world surfaces, you'll be making a choice: is this element popping off the screen (convex) or indented into the screen (concave)? Buttons are convex whereas large panels containing text and other elements are typically concave.

Pushed & popped

On the left is a convex button that is designed to look like it's bulging off the screen. It appears bulged out because it's made to appear just like a convex object would appear in real life if it had 90°, top-down lighting. That means that 1) the light catches the top of the object and adds a lighter stripe of highlight, 2) as the bottom bends back down towards the screen, the light is blocked and it gets darker (light-to-dark gradient), and 3) it casts a very subtle shadow, indicating that it's sitting on top of the surface. This specific combination of highlights, gradients and shadows is the most basic way to make a rounded rectangle appear bulged out and convex.

On the right is a larger panel that is designed to look inset into the screen. The fill color is a mostly-transparent black, it has some inner shadows, and then a thin white drop shadow at the bottom. If we analyze this using the same lighting conditions as the previous example, it's made to look sunken in because 1) the edges or lips of the shape are at the surface and cast an inner shadow inside (these edges block light like an awning off a building blocks the rain, causing a shadow) and 2) as the bottom edge of the shape comes back up to meet the surface, the light catches that lip and causes an edge highlight.

Download this PSD here.

Pictures

Most iPhone apps that display profile images have them look slightly sunken into the surface or popped out and semi-glossy. This is achieved with mainly the same techniques from above, but for the glossy one I added a diagonal gloss line (a white-to-transparent gradient cut into a triangle) as a separate layer.

Jeff Croft avatars

Download this PSD here.

Mixing It Up

Although there are distinct elements common in most convex-or-concave elements, there's no special formula for how to accomplish these effects in Photoshop. I typically tweak size and opacity sliders on Inner Glow, Inner Shadow, Stroke and Drop Shadow layer styles until things look good. Other people are Bevel & Emboss specialists. Here are some more examples of rounded rectangles styled in some different (but reusable!) ways.

Other styles

Download this PSD here.

Scratching The Surface

These are just some of the myriad ways you can style and use rounded rectangles in your interfaces. If you really want to see some creative designs, check out some icon designs on Dribbble. All it takes is some imagination and experimentation, and you can use gorgeous rounded rectangle designs throughout your interface.

How To Draw A Mac Internet Globe Icon

Apple's paradigm for indicating network connectivity is nicely-detailed globe icon with crisscrossing wires across it — you can see it in the System Preferences for Network settings. Wolfgang recently rejuvenated this UI analogy in his work on LittleSnapper's interface. I thought it'd be fun to do my version of this icon and step you through the process as I go.

Spheric Realism

Before getting into the tutorial's steps I thought it'd be good to go over some key techniques for creating a realistic sphere.

Designing a nice, shiny ball has many applications and is a nice skill to have in your back pocket. When designing a ball that's meant to look as round as possible here are some things to keep in mind:

Lots to think about! Don't remember high school physics and how a material's refractive index changes light passing through it? Don't worry, just follow along and we'll have you building spheres in no time.

Step 1: Draw Your Base Circles

To make the globe look three-dimensional, it'll take more than one crack at Photoshop's Layer Styles which means a little onion-skinning will be necessary.

We're designing our icon at 256px so get your new document open and use the Ellipse Tool to make a circle sized so that it allows for a shadow underneath it. We're applying two layer styles — Gradient Overlay and Inner Shadow — in order to get the basic lighting in place. The Gradient Overlay is radial and I used the mouse to move it down to the bottom of the sphere representing the light passing through the top of the sphere, reflecting off the bottom. The Inner Shadow was also positioned at the top to give it some initial radial shading.

Step 1

I need to apply some additional effects to the base circle so I duplicated my previous circle, turned the Fill to 0%, and re-opened my Layer Styles. I gave this second circle an Inner Glow with Multiply blending (half opacity) and an additional Inner Shadow positioned only at the top with Soft Light blending.

Step 1a

Step 2: Lay Your Shadows

Before we add the final lighting to our sphere, let's position its shadow first.

I drew a small ellipse at the bottom of the sphere and filled it black. Next I converted it to a Smart Object and applied a 73px horizontal Motion Blur and a 12.5px Gaussian Blur. To darken the center a bit more since that's where the sphere is "touching" the surface I duplicate my previous shadow and shrink it down a bit.

Step 2 shadows

Step 3: Circular Highlights

Realistic lighting and highlights can't be fully reproduced using Layer Styles, you'll need to draw some more ovals.

Draw a circle about 3/4 the height of your previous ones and align it a few pixels from the top of the main circle. Make sure it has a 0% Fill and give it a Radial Gradient layer style from white to transparent with the white directly on top.

Step 2 shadows

Now convert it to a Smart Object and give it a 3.9px Guassian Blur to soften it a bit. This represents the main OS light hitting the top of our sphere. (Note: Others may have a different preference regarding how blurred they want their top highlight. Some people won't want to blur it at all. Do whatever you think looks best.)

Step 2 shadows

To make the center of our top highlight a little brighter, let's duplicate the layer and shrink it down proportionally. Now we have two ovals at the top of the sphere representing our top-down lighting.

For the bottom-up lighting, duplicate your larger highlight you created, flip it vertically, and move it down to the bottom of the sphere. Change the Blending to Soft Light. Here's what it looks like:

Step 4 lighting

At this point we're done with our sphere but we still have the lines to draw, so let's get to it.

Step 4: Draw The Network Lines & Hubs

The network lines proved to be a little tricky to get just right. Here's how I did them:

  1. Use the Ellipse Tool to draw a circle that is approximately the same size as your main sphere.
  2. Free Transform your circle to flatten it out a bit.
  3. Rotate it a bit on its center axis, make it look like a hula hoop wrapped around your globe.

I hopped into the Layer Styles and gave it a 2px white stroke with Blend Mode of Overlay. I also gave it 4px Inner & Outer Glows both white. Doesn't look like much yet, but here's what we've got at this stage:

Initial network line

I'm going to use this loop as both a foreground and background network line, so I duplicated the layer and hid the second one for now.

I used my Eraser Tool with a big brush that's fluffy on the edges so I can keep the edges of the loop anti-aliased as it hits the sides of our sphere. On your foreground loop, erase the left side completely, and erase just enough right at the top and bottom of your loop so that it fades into the sides of the sphere. ow for the background loop, erase the right side and use the same technique for the top and bottom edges.

To make the lines look as if they're sitting on top of the globe more, I duplicated each layer, gave it a slight Gaussian Blur, and then nudged it a few pixels away from its twin. I could've achieved this look with an Inner Glow, but hey, there's different ways of doing what you want in Photoshop.

Finishing a loop

I've now done this a few more times (foreground and background loops) and we're done with this step.

Finishing a loop

Final Step: Adding The Network Nodes

At this stage I think it looks pretty good, but we're not quite finished yet. Where our network lines cross we need some glowing network nodes. Fortunately, these are really easy. Take your Ellipse Tool, draw the node, fill it white, convert to Smart Object. Then, give it a little Gaussian Blur and change the blending and opacity appropriately. We're done!

Our final icon is on the left. On the right is a slightly tweaked example showing what you can do by changing some Blending Modes just for kicks.

Finished network icon Finished network icon

Download The PSD

Reading about Layer Styles isn't that appealing, so if you want to check out exactly how the objects look, download the PSD all zipped up right here: you're free to do whatever you want with it.

LittleSnapper's Icons & Interface

The newest product in the Realmac Software stable is LittleSnapper, their all-in-one screenshot and image organization utility, aka, their answer to Skitch's dominance in the screenshot annotation market. Wait, there's a market for that? Apparently there is!

Realmac makes some of the nicest Mac software around, and you have to look no further than RapidWeaver to see the effort they take in crafting their application's interfaces and icons.

I recently downloaded the app and pulled out some of the beautiful, high-resolution icons they use within the application. I love the network globe icon as it's subtly different than the standard Mac OS X version, as well as the Flickr icon they put together.

Update! I'm not sure how I missed this one, but the icons and UI work for LittleSnapper was done by my very talented friend Wolfgang Bartelme. He's also got a new iPhone game out called Dashball that looks fantastic.

LittleSnapper icons

Miles Ponson Talks About Designing The 280 Slides User Interface

One of the most anticipated web-based applications of this past year was the debut of 280 Slides, a presentation application whose interface matches or rivals Apple Keynote. Beyond it having a beautiful (and desktop-like) interface was the architecture that powered the app. It wasn't written like other web applications, it was written using Cappuccino, an open source application framework that marries the elegance and sophistication of Cocoa programming using Objective-C with Javascript allowing Cocoa programmers to create web-based applications the same way they'd write normal desktop apps.

The 280 Slides interface isn't like normal web applications — it's designed to look like a desktop-class Mac application with typical Mac-like interface stylings, and more specifically, it was designed so that Keynote users would feel at home.

280 Slides user interface

The extremely talented Miles Ponson designed the 280 Slides application icon as well as the entire user interface and was kind enough to answer a few questions I had regarding his work with the 280 North team.

Me: So Miles, how'd you get hooked up with the 280 North guys?

Miles: Well, almost a year ago, I got an email from John Hering about a UI project to design for developers who worked with the iPhone team. I didn't know a lot until I had a video conference with Francisco and Ross. and then I got really interested in designing the User Interface for 280Slides.

Me: For the application's interface, it sounds like it was important to make it look as "Mac-like" as possible, as if a Mac application suddenly landed in your browser. Have you worked on the UI for Mac software in the past? How did the process of designing a browser-based "desktop" application work compared to normal web-based design projects?

Miles: I started to design icons for desktop customization a few years ago, just for fun, and I really loved it. I enjoyed drawing my ideas and then share the shiny icon with everyone to enjoy. And then I started working more seriously for software developers, and open-source such as OpenOffice project.

I did not find any huge difference between a desktop and web-based app, simply because 280Slides is built on a powerful foundation, Cappuccino, that makes 280Slides amazingly behave and work the same way as a desktop class Mac application and therefore, makes the task of designing UI elements natural, as if it would be for a regular app. It worked the same for me. The toolbar icons are in 32 pixels, the buttons in 3 elements, etc... It's just great!

Me: When it came time to integrate it into the application, what was that like? Did you hand over PNGs or any HTML/CSS? How did you have to slice up the various UI widgets, if at all?

Miles: When the time has come to integrate everything, you have to slice the pizza, the buttons must be in 3 elements, left corner, right corner and 1 pixel wide middle, the HUD window was in 7 elements, the top-left, top-right, bottom-left, bottom-right corners, bottom-center and top center part, and body middle part. When it comes to slice all the elements, I got some sweat on the forehead and a load of tiny 1x30 windows open everywhere in Photoshop. The hardest is to keep track of all the elements, put them in assigned folders and make sure that you did not forgot a piece of the puzzle, hehe. I did not hand any kind of code over though. The 280 North team made an incredible job at coding everything.

Me: Thanks Miles!

(See more of Miles' work at Californian Design or follow him on Twitter.)

Beautiful Fad: The Blueprint Look

A design fad that's been around for awhile now is the "blueprint" look: people drawing architectural blueprints/sketches either as a background to their roughed-out icon, or integrating a blueprint into the icon/design itself. What does the blueprint represent?

When should you use the blueprint look in your icon?

What you use to represent metaphors in your icon design is completely up to you, however it's clear that most icons that incorporate a blueprint are indicating that "this application is used to build stuff" whatever that "stuff" may be. For Apple's suite of developer tools it means building other applications or widgets. For your blueprint icon it could represent building anything you'd like, but something that a user can actually build within the application.

Here are a few full-size icons that use the architectural sketching metaphor, oh, and can't forget about MacThemes' website!

CSSEdit

Xcode

Xcode project

Quartz Composer

Architect

Interface Builder

Jar Bundler

Interview With Laurent Baumann, Icon & UI Design Master

Bowtie, Architect, DrawIt icons by Laurent BaumannLaurent Baumann is a brilliantly talented designer and is very well-known within the Mac UI customization community for his icon sets and work on Bowtie among many other projects. He's currently working on a next generation Mac theming app Architect and its soon-to-be-unveiled partner app, Façade. I caught up with him over email to pick his brain!

Me: Hey Laurent, great to be chatting with you! I've gotten to know your brilliant icon and UI design work over the past year but still don't know as much about you personally. Where are you currently living? How did your interest in design — especially icon design — get started?

Laurent: Thanks for the chat Mike, I'm really glad you like my work! I'm currently living in Cannes, in the south of France. I had interest in drawing and design since as far as I can remember. After 4 studious years at a design school in Aix-en-Provence, I started as a freelance designer in print and web design. To be honest, it didn't work out very well, and I often had some free time, so I started designing for myself. My interest in icon design really started when I switched from OS9 to OSX. I had the idea of making a full system replacement set based on the bezel design (I think you can still find them somewhere on InterfaceLift). And since I didn't know how to create an icon, I started to search for some good advices, and found MacThemes and its early small community. I met some of the best icon designers here, and I learnt a lot from them. After some time and releases, I figured out that icon design was just something I loved, was not that bad at, and was comfortable with.

Me: You've designed some fantastic application icons as well as quite a few free system replacement sets. What would be a typical process for you when starting out a new icon design project? What are the differences between designing an icon set (toolbar or system replacement) versus an application icon?

Laurent: When I'm designing a free system replacement set, I just obey my passion for design. I'm haunted by ideas until I can't help it, and start sketching the first drafts. It's also a good way to try new stuff, to challenge myself (with a totally black and white system replacement for example). It usually takes me months to finish an icon set. For an application icon, it's different of course. In my opinion, an application icon is at the crossroad of logo design and illustration. An application icon concept, just like a logo, has to be understood in 2 seconds at most, while still providing enough details to be eye-catching even after a long period of time. I guess I would say that I'm less available when I'm designing an application icon, but in fact it really depends on the client ;-)

Me: Bowtie is a huge hit with the Mac design and GUI customization community right now, especially over at MacThemes where it debuted. How did the idea for the project start? Who else is working on it with you?

Laurent: I started working with Matt Patenaude on his application TuneConnect, then did some work for a small utility called Colors. At some point, I felt the need to rethink the whole iTunes desktop controller concept, because I wasn't satisfied with desktop coverart/controller in every software I worked on (mainly CoverSutra and Cover Stream). So I came up with a mockup and asked Matt if he would like to help me concretize it. Each time we were talking, I was changing the mockup, without being able to nail the controller of my dreams. I guess he got tired of me, so to speak, when he offered me to implement a fully themable html+css+js controller, so I could play with it by myself, try to implement some ideas (and letting him work on Façade and Architect, *laughing*). And it turned out that I started making tons of themes for it, exploring paths none of the other iTunes controllers did. We then found a fun name for the app, along with a playful icon, trying to stay in line with with the simple concept we both love now, and keep it that way.

Me: You've worked with Pieter Omvlee to define DrawIt's updated interface, and then designed the icon for the application *with* the drawing program itself. I've been playing with DrawIt for a few weeks and find it a lot of fun to use. How did your design process change when using DrawIt instead of your usual arsenal?

Laurent: DrawIt uses a radically different approach than my usual "arsenal", which is Photoshop in fact. I think the beauty of DrawIt lies in the simplicity of the UI, along with the "coherent" workflow you can have (objects creation on left, object position on center, and objects effects on right). When I was working in Photoshop, I often had to duplicate my layers multiple times, to achieve multiple inner-shadows for example. And effects like radial-blurs were so annoying to handle that I avoided them. In DrawIt, the CoreImage engine make everything live and non-destructive, along with very "layers saving". Last, but not least, I'm a Cocoa applications lover, and DrawIt blends deeply with my system than my usual arsenal…

Me: There's a lot of buzz about the two Mac OS customization apps you're working on, Architect and Façade. GUI customization fans have been waiting for these two programs for awhile and are really excited that they'll usher in a new wave of Mac OS customization and theming. I downloaded the beta of Architect and it looks awesome -- how's work on Façade coming? Could you explain how Architect and Façade work, and how they'll be working together?

Laurent: Architect is the "free, developer" part of the couple. It allows you to easily create a theme by drag and dropping your custom-made elements in place of system ones. A validation system insure that the format and the size are valid. A live preview system, called LiveAqua, allows you to quickly check how your elements go together. When your theme is done, you can release it as a bundle, the Façade theme format. Façade is the other side of the couple, intended for people who will apply themes. See Façade as an iPhoto, specialized for themes. It perform all the necessary backups in order to make switching system resources very safe, along with some more features I can't talk about right now :)

Me: You've designed the interfaces for applications like DrawIt, Architect, and a bunch more. What is your process like for designing a program's interface, and when the project is complete, what are the deliverables you send over? If you use Interface Builder, how does that fit into your normal design process?

Laurent: Designing a user interface is really different than designing icons. There is no "artistic" part in this job. This is more about laying out a good interface, and to constantly see it as it was the first time you were discovering it, trying to always make it simple and welcoming for the first time the user will see it. I'm very curious about other software's user interface, and I'm trying a lot of them, to keep up-to-date with (numerous) innovations in this domain. I'm not using Interface Builder, because switching nib/xib in projects is not a easy task (and you would have to link every actions and outlet again from the "early working UI" the developer often start before I ship him the final UI). The biggest base of a mockup is usually a collage of Apple apps screenshots, in order to look and feel like a regular OSX UI, then I'm drawing the custom elements, like I would do for an icon. I'm delivering complete mockups of every views of the software, as pictures. If the gradients and such are not drawn in code, I also need to slice every needed tiles and caps.

Me: Thanks, Laurent!

How To Draw The Billings Application Icon

When I first started designing for the web (don't ask how long ago that was!) I was constantly finding websites that had a particular "look" that I didn't know how to reproduce. When you're a flat-out beginner you don't have anything in your mental repertoire to pull from — techniques and concepts that you can do blindfolded. Now that I'm working harder on icon design, I've found that the easiest way for me to get experience and learn is to try and reproduce the fantastic work that others have put together. It's only for learning, however, I absolutely do not advocate taking anyone's creative work and passing it off as your own.

Billings iconNow that I've got that out of the way, let's take a crack at doing our own version of the brilliant Billings application icon (designed by the extremely talented Cian Walsh) in Photoshop.

Step 1: Draw the basic shape

The Billings icon is meant to look like some sort of futuristic stopwatch (and perhaps EVE from WALL•E!) so the shape is essentially a stretched out circle. To get this shape, I grabbed the Ellipse Tool and drew a circle that approximated the dimensions of the top half of the stopwatch.

The full shape isn't a circle, so we've got some work to do to make it look how we want. Grab the Direct Selection Tool. Click directly on the object's path and drag the bottom point of the circle down to where the bottom point of our stopwatch object will end up being. This will warp the circle, but not to worry, you can reshape it by grabbing directly on the curve and moving it to where you want it to be. Manipulating the path's curves will force the bezier points on either end of the curve to adjust themselves to fit your adjustment. Tweak the individual bezier curve handles in order to fine-tune your shape, but remember to leave the overall shape smooth with no jagged points. I've got my stopwatch shape colored #e1e2e1 as my base color for the object.

Step 1: Base object

Step 2: Draw the shadow

I like to work on the shadow early in the design process as it gets my mind into 3D mode faster, letting me better visualize the lighting of the object.

I find it easier to create drop shadows on icons via separate layers rather than Layer Styles because when trying to emulate perspective, the shadow's size needs to look like it's behind the object and therefore visually smaller to your eye. Feel free to use normal Layer Styles to create the drop shadow if you'd like.

Duplicate the layer you were just working on and move the duplicate behind your actual stopwatch layer. Next, give it a black fill and resize it down a little bit — proportionally — using the top-right handle. Rasterize the layer and give it a Guassian Blur enough to start making it look like a nice shadow. I also gave my shadow a Motion Blur from left to right to spread it out a bit more. Here's what we've got so far

Step 2: Base object with shadow

Step 3: Initial shading on the base object

The shape we're drawing has some complex lighting so it can't be taken care of with just one Layer Style, it'll take a few layers overlapped on top of each other to finish the shading. In this step, we'll be roughing out the initial shading with a Gradient Overlay and an Inner Shadow.

The Gradient Overlay has Blend Mode: Normal, Opacity: 100%, Gradient: #fff->transparent, Style: Radial, Angle: -65°, and Scale: 117%. For radial gradients, the angle changes the size of the radial gradient. To get the placement of the gradient exactly where I want, while I was working on the Gradient Overlay I just grabbed and moved the gradient right on the object itself while the dialog box was still open.

The Inner Shadow has Blend Mode: Overlay #000, Opacity: 100%, Angle: 164°, Distance: 26px, Choke: 9%, Size: 24px. Just like with the Gradient Overlay, to get the perfect placement I grabbed and moved the shadow myself. This was important because to duplicate the shading exactly, there should be no shadow on nearly the entire right side of the object.

There's a lot more work left to be done, but here's where we are so far:

Step 3: Base object and initial shading

Step 4: Onion-skinning your way to realism

Most of the time your object will need additional shading details that just can't be created with a single group of Layer Styles — you'll need to layer a bunch of effects on top of each other to make it look how you want. Here's what a typical process is like:

  1. Duplicate your original layer, name it something recognizable.
  2. Drop your Fill to 0% if it's not there already. You want your effects to layer up and not block-out the original layer.
  3. Add new Layer Styles and adjust your Blend Mode to accomplish the look you want.
  4. To build up additional effects, start back at 1, rinse and repeat

Why is this necessary? Because Photoshop doesn't allow you to have multiple versions of the same Layer Effect on a layer. That means if you want an inner stroke, and outer stroke, and a center-aligned stroke on the same layer, you're out of luck. Multiple inner shadows? Sorry, no can do. You can accomplish a build-up of the same effect via this onion-skinning technique, but keep in mind if you ever have to change your initial shape you'll have to tweak all your duplicated layers as well.

I've got 3 duplicate layers on top, each with 0% Fill and a series of Layer Effects applied. Here's the list of layers and their effects in the order they're shown in Photoshop:

Step 4: Base object with final shading

Step 5: Drawing the face of the stopwatch

Compared to the body of the stopwatch and all its shading, the face is much easier technically. It's comprised of only a few layers:

Step 5: Stopwatch with face

Finished!

There are some small tweaks to be made like darkening up certain areas of the icon for enhanced contrast, and adding the stopwatch button at the top right, but I think this is a good place to leave off. Some quick tips:

And that's it for now!

Beautiful Icons From Relationship, Architect, Bowtie, and CSSEdit

Designing icons for Mac OS X is an intricate and painstaking process because the maximum resolution is so high, up to 512x512 pixels. At that size, Apple suggests that your icons be as photorealistic as possible, which calls for a lot of design talent. Icons for OS 9 and earlier versions of Mac OS X didn't need to be so incredible detailed as they were never shown at large sizes — letting a designer get away with some pixel imperfections here and there.

The current school of icon designers aren't typically at 1600% zoom in Photoshop placing each pixel precisely, but are using scalable vector illustrations and 3D renderings to produce the realism they desire. I've talked to many icon designers and although rendering icons in 3D is the ultimate way to get photorealism in an object (shading, lighting, perspective, etc.) many are still using Illustrator and Photoshop to work their magic. The last few versions of Photoshop have offered vector drawing tools similar to Illustrator, so now even Photoshop allows you to design nicely-scalable graphics which are very important when designing application dock icons.

I download applications all the time — normally to actually use the program — but sometimes just because I like to study the dock icon at full-size and see how certain lighting and shading scenarios were created. In case you're not aware, here's a quick way of viewing the full .icns file with the high resolution icons:

  1. Download the application, find the main .app bundle.
  2. Right-click on it, go to "Show Package Contents".
  3. Navigate to Contents > Resources and find the .icns file for the app.
  4. Open the file in Preview to see all sizes.

Relationship, Architect, Bowtie, and CSSEdit icons

Shown above are some beautiful application icons I've seen recently. In numerical order is 1) Relationship designed by Icon Drawer, 2) Architect & 3) Bowtie, both designed by Laurent Baumann, and 4) CSSEdit.

I've spoken to Laurent and he's told me that he still works completely in Photoshop for all his icon work, even though his designs look beautifully photorealistic. The chess pieces in the Relationship icon look very real, so I'll guess that it was easier to accomplish that realism by using a 3D rendering app like Cinema 4D. The CSSEdit icon has some great hidden text on the bottom left if you're viewing it at full-size.

Seen any other great icon design work recently? Let me know!

Featured Project

Design Then Code