How to Improve Your Drop-Down Menu
The navigation menu is central to the user experience on a website or mobile app. When we visit a website, we have a particular goal in mind. We want to get somewhere on the site as quickly as possible. Usually, the drop-down menu is the most efficient way to do that.
Optimizing your navigation menu should be a top priority. Here are some things you should do to optimize it, plus some you shouldn’t.
Do Kill the Clutter
Keep your navigation simple. You may have tons of sub-pages and a variety of product categories, but you don’t have to include them all in your main navigation. There are other ways to set this up. Alternatively, you could create a top-seated breadcrumb-style menu to offer easier navigation through lesser sub-pages, while keeping all the juicy stuff in the main nav.
When you open a nav menu, you don’t want it to take up the entire screen. Many retailers and e-commerce sites do this, and it’s poor design. You want navigation to be quick and easy, but that also means keeping a lid on the box. If you add too many options, things get cluttered and confusing. This is especially true on mobile, where the screen is much smaller.
The restaurant Denny’s did this with their newer design. The menu displays the most important categories first. When you select one, it opens to reveal sub-categories or additional options.
Do Use Borders or Shadows
Adding a subtle border or drop shadow to your menu helps it stand out from the rest of the page especially if you’re using a lighter background. This isn’t so important when you have plenty of negative space below your menu foldout. However, if you have images or text content, sometimes these elements can make the menu harder to differentiate.
Do Consider Applications
When browsing on desktop, it makes sense to have the drop-down menu or main nav take up the width of the page. On mobile, however, where there’s much less space to work, a collapsible menu is the better choice. Consider the applications for your menu, such as how and where they will be used. This makes a huge difference when it comes to the function, style and even layout of your design.
Do Include Images or Icons
Most menus are text-based, which is a shame because many devices can display high-quality HD content. Why not spruce things up and make your menu more engaging? It’s okay to add images, icons or even visual indicators to your menu alongside text labels.
An auto seller or manufacturer, for example, might consider putting images of the vehicle next to the model name. As a bonus, this can also help when people know visually what they’re looking for, but don’t know the model.
Formula Boats gets this right with their visually appealing dropdown menu. Open it up, and you can see all their boat models, making it easier to choose between them.
Do Use a Column or Grid-Based Design
Column or grid-based navigation menus are better organized, simple to understand and easy to create. Keep your dropdown menu structured appropriately, especially since consumers and internet users are so used to this design technique.
Don’t Have a Disappearing Menu
Ever notice when a site uses a dropdown menu, it remains visible and follows you down the page? This is good web design, especially on mobile. The main navigation menu is always only a tap away, no matter how far down you scroll. This is important for infinite or lengthy scrolling sites.
Amazon has one of the best examples of this anywhere. While their menu doesn’t collapse, it is a mega menu with a dropdown design. It’s visible no matter where you are on the site, on both desktop and mobile versions. Customers retain quick access, to any section of the site.
Don’t Use Unclear Headings
With a dropdown menu, you’re going to have quite a few menu items in view. That’s alright, so long as you have clear headers to differentiate the varying categories and pages.
For example, an electronics retailer might have categories for home theater, laptops and PCs and printers. The correct way to structure this is to bold the headers of each category so they stand out. The improper way to do this is to list all the options in the same font, color and weight. Then you end up with one list of items, and that’s confusing.
Take a look at the official Columbia site. Pay attention to their mega dropdown menu and how it’s structured. Notice how the header for each category stands out from the rest? Now imagine if all those fonts were the same. Even with the columns separate, things would get confusing.
Don’t Forget to Test
You may prefer Chrome over Microsoft Explorer, or maybe you use Safari. Whatever the case, the worst thing you can do is assume everyone has the same preferences as you. One of the biggest mistakes you can make with web design is not testing your setup on multiple platforms.
Before you roll out the final design for your drop-down menu, check it out on multiple devices, browser types and resolutions. The content may scale differently on certain platforms, which could ruin your perfectly crafted menu.
Look no further than IWC Schaffhausen. Open their site on desktop, and you see a drop-down menu with high-quality images of their watches. This makes sense considering you want to choose a watch that looks good. But on mobile, the menu acts differently. Instead of a full menu that takes up the entire screen, you only see a few of the watches, and you must scroll left or right to see the rest.
Don’t Neglect a “Best Sellers” Section
One of the beneficial aspects of a drop-down menu is when you structure it appropriately, you will have some wiggle room — some space to be innovative. Instead of doing something wild, include your popular or best sellers here. Your customers can jump to your most popular product or service right from the get-go.
Don’t Make It Sluggish
You want your site to look beautiful, and that means including animations, visuals and effects. But you don’t want to hinder the experience by creating something that takes too long to load. It is possible to bog down a drop-down menu, making it sluggish in the process. More importantly, you have control over open and close times, where it appears on the page and how hover elements work. Keep this in mind when designing your menu.
The same is true in the opposite direction, too. If a user is moving their mouse over a menu, you don’t want it to pop open and block another element they’re trying to interact with. Find the sweet spot — usually a half a second — before that menu shows up.
Time to Overhaul Your Menu
If you noticed one or two things on this list that conflict with your drop-down menu, you may want to head back to the drawing board. You see, the navigation menu — dropdown or not — is central to your customers’ experience on your site.
Think of it in terms of a brick-and-mortar storefront. When you go into a grocery store, the building is laid out and organized. Each aisle has a purpose and is properly labeled. If you want something specific, you can usually find the aisle quickly. Now imagine if all those signs were gone. It would be utter chaos.
Your nav menu is the equivalent of those signs in digital form. Not only do you need them to direct traffic, but your customers need them to understand your design.
Lexie Lu is a freelance UX designer and blogger. She enjoys researching the latest design trends and always has a cup of coffee nearby. She manages Design Roast and can be followed on Twitter @lexieludesigner.
Join us every Thursday, when your friends here at the Arsenal take over the Go Media blog to share insights, tips, freebies or other fun to brighten your work day.
Today we’re releasing Valentine’s Day vector freebies for your use in any personal project. This includes four icons as seen below. Enjoy!
Love our products? Access our huge product library ($11k in resources) and exclusive content for only $15/mth. Yes, seriously. Learn more now.
Download it now: GoMedia_Vector_Valentine Icons
How to Create an Icon Pack using Adobe Illustrator
Since Halloween is just around the corner, we thought we should give you an early treat this year, in the form of a little icon tutorial. The idea was to show you guys how to create a cute set of three icons from scratch, using some of Illustrator’s basic tools such as the Shapes Tool, combined with the power of the Pen Tool and Pathfinder panel.
In terms of difficulty this course is aimed at those who have a basic knowledge of how Illustrator works, but that doesn’t mean beginners can’t give it a go, since every step is presented as explicitly as possible.
So, assuming you have Illustrator up and running, let’s jump in and start creating!
Download the: How to Create a Halloween Icon Pack Resources (AI + EPS Files)
1. Setting Up Our Document
The first thing you should always do, no matter the project, is make sure that you start off on the right foot by setting up a proper document.
So, go to File > New (or use the Control-N shortcut), and let’s go through some of the settings that need adjusting:
- Number of Artboards: 1 – since we will be creating a small pack, one Artboard will suffice
- Width: 800 px – which is the overall width of our Artboard
- Height: 600 px – which is the overall height of our Artboard
- Units: Pixels – this setting is really important since we will be creating for the digital medium, so screens and other display devices, which are pixel based.
And from the Advanced tab (which can be made visible by clicking on the little right facing arrow):
- Color Mode: RGB – which is the color mode for the digital medium
- Raster Effects: Screen (72 ppi) – this option controls the way drop shadows, textures and other effects are displayed on different media. If you’re creating for the screen 72 ppi will suffice, but if you’re designing with the intent of printing the final artwork on paper, then you should go with one of the higher values
- Align New Objects to Pixel Grid: checked – as we want everything to correctly snap to the Pixel Grid
2. Setting Up Our Layers
Once we’ve properly set up the document, we should take our time and think about the project itself in terms of layers.
Usually when I create detailed artwork, I find it useful to separate the different sections from one another using layers. This way I can easily work on a specific part of the design, without worrying that I’ll accidentally misarrange or affect my other shapes.
Since in our case the project is composed out of 3 assets (icons), it would be a good idea to create a layer for each one, so that we can better manage and edit them along the way.
So, assuming you know how the Layers panel works, let’s create 4 layers and name them so that they’ll be easier to identify:
1. grids – which will house the simple custom grids, that we will be using in order to create a cohesive pack
3. Setting Up a Custom Grid
For those new to the Grid, well you shouldn’t worry since it’s not that hard to master. At its core, the Grid is a system of vertical and horizontal lines that allow you to compose and position you artwork with a high level of precision. It is usually used in UI design, where the process of creating a balanced composition requires the designer to put a lot of consideration into the relation established between the different visual components.
But as with most of Illustrator’s tools, this too gives you the ability to do so much more with, one particular one being that of creating pixel crisp artwork.
Since I’m a strong believer in creating with Pixel Perfection, I always set up my Grid to the lowest values since this will assure me that my shapes are as crisp as possible.
Illustrator itself comes preconfigured with a default set of values, which we will have to adjust in order to be on the same track, by going to Edit > Preferences > Guides & Grid.
Here, a new popup window should appear giving us the option to adjust the following settings to the values indicated below:
- Gridline every: 1 px
- Subdivisions: 1 px
Once you’ve entered the indicated values, you need to make sure that the Grid snapping is actually active by going to the View menu and clicking on the Snap to Grid option.
At this point, we’re pretty much done with the adjustment process, which means we can now move on to building the custom icon grids.
4. Defining Our Icon Grid System
If you’ve ever created icons before, then you should know that the first step one needs to take when creating a new icon pack, is figuring out the size of the assets. There are a dozen of available options depending on where the icons themselves will be used, options that range from just 16 x 16 px all away to 256 x 256 px and even beyond that.
Now, for our current project, I’ve decided to go with something relatively large, more exactly 96 x 96 px, which means that our icons will be big enough so that we can put a considerable amount of details inside of them.
Once you’ve decided on your size, which we did, you will have to create a custom icon grid, which will allow you to build within that size boundary, which in the end will give you the ability to create an all-around cohesive icon set.
The grid itself is usually a square, since this shape allows you to push your pixels all the way to the limits of the confined space.
Yes you could add a bunch of horizontal, vertical and diagonal guides, for a deeper level of consistency, but in our case, a simple square will do the trick.
So assuming you’re on the “grids” layer, lock all the other ones and create a 96 x 96 px square using the Rectangle Tool (M). Position the shape to the center of your Artboard by selecting it and then using the Horizontal and Vertical Align Center options found under the Align panel, making sure that the alignment is done to the Artboard and not to a Key Object or Selection.
Once you have the guide in place, change its color to a light grey (#e6e6e6) so that it will be easily visible without drawing too much attention.
Quick tip: in case your Align panel isn’t showing the Distribute Spacing and Align to options, that’s because you didn’t told Illustrator to do that. To change this, simply click on the right corner down facing arrow and then enable the Show options feature and you should be good to go.
Now, since I usually like to give my icons some inner padding, I tend to add a relatively smaller square to the one I already have.
If you’re wondering why, well let’s just say I like to fool proof my designs so that when exported, I can be sure that none of the sides of the icons gets accidentally chopped off. This would result in a flawed file.
So, using the Rectangle Tool (M), let’s create a smaller 92 x 92 px one, which we will position over the one we already had, giving it a slightly lighter shade (#f2f2f2).
Since we will need a pair of grids for each of our icons, we will have to group the first one that we’ve just created using the Control-G shortcut, and then create two copies which we will distance at 60 px from the original using the Horizontal Distribute Spacing option.
At this point we’re done setting up the icon grids which means we can move on to creating our first icon, the creepy little pumpkin head.
5. Creating the Pumpkin Head Icon
Assuming you’ve locked the “grids” layer, and moved up onto the “pumpkin” one, we can start working on our first icon from the set.
Since all of our icons will have a fill/inner section and an outline, we will follow a pretty straightforward process of creating the inner section first and then applying a 4 px outline to it using the Offset Path effect.
That being said, let’s grab the Rounded Rectangle Tool and create an 84 x 70 px shape with a 35 px Corner Radius which we will color using a dark orange (#bf7355) and then position over the first set of grids, so that we have an even gap of 4 px between it’s left, right and bottom sides and the larger grid itself.
Quick tip: I recommend you turn on the Pixel Preview mode by going over to View > Pixel Preview, since most of the steps from this tutorial will rely on using this mode. I will also be giving you some pretty precise details when it comes to positioning the composing shapes.
Once we have our inner section of the pumpkin, we can give it an outline by selecting it, and then going to Object > Path > Offset Path and giving it an Offset of 4 px.
This will create a larger shape just under the selected one, which we will have to color using a dark color (#392a16).
As soon as we have our outline, we can add the all-around inner ring highlight by first creating a duplicate of the orange fill (Control-C > Control-F) and then adding a smaller 80 x 66 px rounded rectangle with a Corner Radius of 33 px to the center of the fill shape.
This smaller shape will help us create a cutout, which we will do by selecting both it and the shape underneath, and then using Pathfinder’s Minus Front option.
Since the resulting shape isn’t quite there, we will have to change its color to white (#FFFFFF) and then set its Blending Mode to Overlay while lowering its Opacity level to 20%.
Add a little texture to the surface of the pumpkin, by drawing a bunch of 4 x 4 px rectangles which we will color using a darker shade of orange (#9e5943). Then make sure to have them positioned underneath the highlight that we’ve just created, by sending the highlight to the front using the Arrange > Bring to Front option.
Don’t forget to select all the composing elements of the texture, and group them together using the Control-G shortcut, since you wouldn’t want the elements getting misplaced by accident.
Next, we will start working on the vertical delimiting lines, which will give the pumpkin its nice curved look. To do this, we will first create a 44 x 70 px ellipse to which we will apply an Offset Path effect of 4 px.
Now, with both shapes selected, use Pathfinder’s Minus Front option to create a cutout from the larger ellipse, which will result in ring like shape that we will adjust by cutting it in half by removing its right section, and then changing its color to #392a16.
Position the resulting shape towards the left side of the pumpkin fill section, leaving a gap of 8 px between it and the larger outline.
Create a copy of the curved line and position it towards the right side of the pumpkin, making sure to reflect it vertically (right click > Transform > Reflect > Vertical).
Add a secondary pair of vertical rings by creating a slightly narrower 28 x 70 px ellipse, to which we will apply Offset of just 2 px. Repeat the same process of removing the inner shape from the created offset, and then cutting the resulting ring in half, making sure to position a copy on both sides of the pumpkin at about 10 px from the thicker rings.
Next, let’s add a couple of highlights and shadows to the rings, in order to give it more depth.
First let’s add the highlights by creating a copy after the rings and moving them slightly towards the inside of the pumpkin. Make sure to change their color to white (#FFFFFF) and set their Blending Mode to Overlay lowering the Opacity to just 20%.
Add the shadow by repeating the same process – only this time, position the shapes towards the outside of the pumpkin, setting their color to black (#000000) while changing their Blending Mode to Darken and lowering their Opacity to 30%.
As you can see, the highlights and shadows go over the actual outlines and highlight of our pumpkin which is something that we don’t want them to do. To fix this, we will have to create and apply a clipping mask in order to hide the parts of the details that we don’t want overlapping.
First, we will have to create the mask itself by creating a copy of the ring outline, and then separating its inner path from the outer one by right clicking > Release Compound Path. Once the path is released, we will have to select and delete the larger shape since we will be using the smaller one.
With the resulting shape from step 11 and both the highlights and shadows selected, right click > Make Clipping Mask.
Since some parts of the details still go over the outlines, we will have to select all the vertical rings and bring them to the front (right click > Arrange > Bring to Front).
Before we start adding the face features, let’s add one more vertical ring highlight towards the right side of the pumpkin, positioning it a little towards the middle.
Follow the same process as before, only make sure that you’re creating the shape inside the actual clipping mask by double clicking on one of the composing elements, or by right clicking > Isolate Selected Clipping Mask.
Once you’re done simply exit the Isolation mode by pressing Esc.
Up until this point we’ve followed a pretty strict do-this-then-that workflow, so I thought it’s time I gave you a little creative freedom and let you “carve” your pumpkin by your own, so that in the end you will have something special to show off with.
The only thing that you will have to keep in mind is that no matter the expression, you will have to keep the detailing process consistent by adding a 4 px outline to each of the created shapes. Also, for the fill colors you could use lighter or darker shades of orange, I for example, have gone with something darker (#634133) but you don’t necessary have to use the same tint if you don’t feel like it.
That being said, take your time and once you’re done move on to the next step.
Quick tip: there might be situations where the Offset Path trick will produce irregular outlines, so for those cases try and use a 4 px stroke instead.
Assuming you’re carved an awesome scary look, let’s start adding the finishing touches, by working on the pumpkin’s top side that houses the vine.
First, grab the Ellipse Tool (L) and create a 20 x 6 px shape, which we will color using a dirty light green (#87826f) and then position towards the top section of our pumpkin, making sure to position it underneath.
Oh, and as always don’t forget to give it that 4 px outline!
Add a highlight to the vine’s base by creating a duplicate of the green shape, and then cutting out a smaller 18 x 4 px ellipse out of it. Color the resulting shape using white (#FFFFFF) and then change its Blending Mode to Overlay while lowering the Opacity level to 40%.
Finish off the vine by adding a 4 x 4 px square towards its top, which will act as the tip. Then change its color to a darker green (#757061) and give it an outline, only this time make sure to set the Joins option to Round.
Finally add a couple of highlights to the top and right side and a vertical divider towards the center, making sure to send all the tip’s elements to the back (right click > Arrange > Send to Back). You should also group the elements together (Control-G) so that things won’t end up being misplaced.
Add some “hair” to our little old pumpkin, by drawing a couple of curved paths using the Pen Tool (P), keeping the stroke Weight set to 1 px and the Cap to Round.
Finish off the icon by adding three diamond like highlights towards its middle right section, which will have their Blending Modes set to Overlay and their Opacity levels to 60%.
6. Creating the Gravestone Icon
As soon as you’re done creating the pumpkin icon, you can lock its layer, and move on to the “gravestone” one and start working on it.
Let’s start with the base of the grave by creating a 66 x 12 px rounded rectangle with a 4 px Corner Radius, which we will color using #a09793, and then position towards the middle of the smaller inner grid so that it touches its bottom side.
Next, we have to make some adjustments to the shape by selecting its bottom-center anchor points using the Direct Selection Tool (A), and then deleting them by pressing Delete.
As soon as you get rid of the anchors, use the Control-J keyboard shortcut in order to close the path.
Once you’ve adjusted the shape, give it a 4 px outline using the Offset Path (right click > Object > Path > Object Path) which you will color using the same color that we’ve applied to all our outlines (#392a16).
Since I feel that the bottom corners of the outline are a bit too hard, I thought we should adjust them by selecting their anchor points using the Direct Selection Tool (A) and giving them a 2 px Corner Radius.
Using a similar process to the pumpkin icon, start adding a couple of highlights and a shadow to give the shape some depth.
Once you’ve added the highlights and shadows, add a 66 x 1 px rectangle just above the shadow coloring it using the same color as the rest of the outlines (#392a16).
Add a bunch of cracks to the piece using the Pen Tool (P) and give them some highlights where you feel it’s necessary. Then select all the shapes and group them together using the Control-J keyboard shortcut.
Let’s move on to the upper section of the icon, and start working on the stone itself by creating a 52 x 98 px rounded rectangle with a Corner Radius of 26 px. Color the shape using #66605e, and then adjust it by removing its bottom center anchor points using the Direct Selection Tool (A) and finally positioning it above the bottom section making sure to vertical align the two.
Give the stone an outline, and then add a highlight and a 4 px tall shadow where its bottom sections meets the base of the gravestone.
Quick tip: Where the workflow is similar to the previous steps I won’t be repeating the entire process since it will be weird, but I will give you indications where things need to be done a little bit different. In the present case since we already went over the process of creating the highlights and shadows, I trust that you should be able to apply what you’ve learned in the previous steps.
Now, let’s give the stone a texture similar to the one used for the pumpkin by creating a couple of 4 x 4 px squares, which we will color using #514a48. It would be a good idea to group the texture’s elements since you’ll want to be able to keep them in place.
Once we’ve added the texture, we can continue the detailing process by adding a couple of cracks and some highlights underneath each of them using the Pen Tool (M).
Add two vertical highlights, by drawing a wider 2 x 72 px rectangle and a narrower 1 x 72 px one to its right side at a distance of 1 px. Color the shapes using white (#FFFFFF) and then set their Blending Modes to Overlay as we did with the previous ones, while lowering their Opacity levels to 20%.
Position the highlights to the right side of the gravestone so that their bottom sides touch the stone’s shadow.
Now as you’ve probably already noticed, the top side of the highlights overlaps the highlight of the stone itself, which we will need to correct by adding a clipping mask.
To do that, simply create a copy of the stone’s highlight, and then using the Direct Selection Tool (A) remove its outer anchor points, and then close the resulting path by pressing Control-J.
Then simply select the new shape and the two vertical highlights and right click > Make Clipping Mask.
Quick tip: in case you’re wondering why I prefer using clipping masks instead of Pathfinder, well the answer is really simple, while Pathfinder could achieve the same result, it won’t allow me to adjust my shapes later on if I find that I need too, which for me is a deal breaker.
We’re almost there, but something seems like missing? Oh, right, the cross.
Let’s grab the Rectangle Tool (M) and create a 16 x 6 px shape which will act as the horizontal line and another 6 x 22 px one, which will act as the vertical one.
Position the horizontal line towards the top section of the secondary line so that you have a gap of 6 px between the two. Then, color the shapes using #392a16, group them (Control-G) and then position them towards the top side of the stone, aligning the cross to the middle.
Using the Rectangle Tool (M) create a 20 x 8 px shape, and then color it using a dark grey (# a09793). Since this will act as the name plate, we will have to stylize its corners by creating four 4 x 4 px circles which we will use in combination with Pathfinder’s Minus Front option to create those nice looking inner cutouts.
Now, since the Offset Path effect won’t be able to create an accurate outline, we will have to create it manually by drawing a 28 x 16 px rectangle which will follow the same stylizing process as before, only this time we will use four 8 x 8 px circles.
Once you have the outline shape, simply color it using #392a16, and then make sure to position it underneath the plate itself.
Add some highlights to the plate and then using the Rectangle Tool (M) draw two horizontal lines, one thinner and one thicker which will represent the name.
Finally add two 2 x 2 px circles to each side of the plate, which will act as a pair of little screws holding the plate, and a shadow underneath its outline to give it more depth.
Add the three little diamond shaped highlights towards the top right corner, by creating a copy (Control-C > Control-F) of the ones from the pumpkin icon.
Since at this point we’re pretty much done with the gravestone itself, it’s time to start working on the little skull.
First, create a 14 x 14 px circle and color it using a light grey (#d3c6c1). Then, add a 10 x 6 px rounded rectangle with a 1 px Corner Radius just above it, coloring it using the same color.
Now, with both shapes selected, give them an Offset of 4 px making sure to group them together (Control-G) and then position them towards the lower left corner of the stone, so that the jaw’s outline touches the outline of the grave.
Add a pair of eyes to our little skull, by creating two 4 x 4 px circles (#392a16) which we will distance at 2 px from one another, and then position towards the middle lower section of the skull.
Then add a little nose and two teeth insertions to make the object look like an actual skull.
Finish off the skull by adding a nice all-around highlight, and two overlapping elliptical ones towards the top section of the skull.
Lastly, let’s add the little blood drips from underneath the skull.
First, select the Rounded Rectangle Tool and create a 2 x 9 px shape, which we will color using a dark red (#c95b55), and then adjust by removing its top center anchor points in order to give it a flat edge. Then create a copy and adjust it by shortening its height to just 4 px, and position it on the original’s right side leaving a gap of 2 px between the two.
With both shapes selected, give them a 2 px outline using the Offset Path, and then position them towards the left side, underneath the skull, so that the red fills touch the top side of the grave’s grey fill.
Since we want the two drip lines to be connected, we will add a 2 x 2 px square in between them, which we will adjust by cutting out a 2 x 2 px circle from its lower half.
Finish off the gravestone icon by adding a couple of highlights to the blood drips, using the same Overlay Blending Mode but a slightly higher 50% Opacity level.
7. Creating the Eyeball Icon
We are now down to our final icon, the eyeball one. As usual this means we will be locking the “gravestone” layer and move on up to the next and final one.
Using the Ellipse Tool (L) let’s create the base fill for our eye, by drawing a 64 x 64 px circle, which we will color using a dirty grey (#d3c6c1), and then position it towards the bottom side of the third grid set leaving a gap of 7 px between it and the smaller inner grid.
As always, don’t forget to give it that 4 px outline.
Give the inner fill a ring highlight with the Blending Mode set to Overlay and the Opacity to 50%.
Since the eyeball itself is slightly rotated so that its iris will be looking up, we will have to add a second circle over the inner fill that we already have, and position that towards the top, so that the current fill will act as a bottom shadow section.
First, select the fill, and create a copy after it (Control-C > Control-F), which we will position towards the top at a distance of 6 px from the original. Then change the shape’s color to something brighter (#e5ddda), making sure to mask it so that it will remain confined to the boundaries of the underlying circle.
Also, since the ring highlight needs to sit on top, we will have to select it and bring it to the front by right clicking > Arrange > Bring to Front.
Now, let’s add that texture that we’ve used for all the previous icons, only this times mix it up a little by drawing both 2 x 2 px squares and a couple of 1 x 1 px ones, which we will color using a darker shade of grey (#bdb1ac).
Leave the center of the eye free of any details since they won’t be visible once we add the inner iris section.
Start working on the iris, by drawing a 30 x 30 px circle, which we will color using a swamp green (#6a6e48), and then position towards the top section of the main eye fill, at about 13 px from its top side.
Give it a 4 px outline, and then add a smaller 14 x 14 px circle to its center which will represent the pupil.
Give the iris a ring like highlight, making sure to set the Blending Mode to Overlay and the Opacity to 20%.
Start adding a bunch of scattered 1 x 1 px squares (#392a16) which will give it a nice looking texture.
Next, start adding a bunch of circle like reflections to the top right and bottom left corners of the iris, using the same Blending Mode and Opacity level as before.
Give the eye a visual pop by adding a overlaying highlight over the top half of the iris, making sure to mask it using the green shape from underneath.
Use Overlay as the Blending Mode and crank up the Opacity to 30%.
Add a subtle shadow underneath the iris’s outline, by creating a copy of the later, and moving it towards the bottom by 2 px.
Change its color to #d3c6c1, and make sure to position it underneath the outline and not the other way around.
Grab a copy of the diamond shaped highlights from one of the previous icons, and position it towards the right side, and then add two more circular reflections to its left to really make it shine.
As with the pumpkin icon, I’m going to give you the ability to get creative and draw your own version of this cute little eye stabbed icon.
As always, keep it consistent, use as much details as you can, and don’t forget to keep those outlines at 4 px.
Huurraay we’re finally done guys!
I really hope you’ve enjoyed the tutorial and most importantly learned something new during the process. That being said, I’m looking forwards to seeing your final designs, and if you have any questions just leave them in the comments section and I’ll get back to you in a jiffy.
And for more resources like these, join our Arsenal Mailing List!
App Icon Inspiration
For a long time now, I’ve been a fan of really well designed app icons. It’s quite similar to logo design, in that it represents the brand and personality of a product, but that it only has a very small canvas size in which to do so. It’s also exceptionally difficult to get it right, and when it’s done well it looks easy.
Mobile app icons have – over the years – only gotten better, partly as more and more designers have gotten used to the format, and also because the bar has been consistently raised each year. It’s often no longer good enough to have just a standard, functional app – it needs to be beautifully designed with impeccable UI, and the icon has to look good if you want it to feature on the home screen of the device.
So, with that said, I wanted to bring together a collection of some of my favourite fresh, recent, beautifully designed app icons that all make the most of the tiny screen size they’re given. Each of these has been carefully crafted and gives a real brand to the software that they represent. I hope you find the collection useful and interesting, and if you know of any other app icons that you’d like to share (or if you’ve created any that you’re especially proud of!), I’d love to hear about it in the comments below.
Hopefully this collection of app icons has given you some inspiration, and maybe it’s even encouraged you to open Photoshop or Sketch and get some of your own designs out of your head and onto the screen. I’d love to hear what you think of these designs or if you have anything else that you’d like to share.