Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 11 2013

17:23

40+ Fresh And Free Icons In PSD Format

In the web designing, designers concentrate on every area of their designs whether it is color selection, icons, creativity, color blending and so on. Right selection of icons can make their designs stand out and look stunning as well. In the web designing field, icons play a very important role because beautiful and creative icon sets can easily make web designs more attractive and stunning. This is the reason that every web designer keeps in hand some high quality and useful icon sets that enhance their designs productivity.

In this collection we are showcasing some exceptional, fresh, high quality and free Icons in PSD files. All these stunning icons are in PSD format so that designers can easily edit these PSD files with their ease and requirements and save their precious time too. Click through and feel free to download. Use these creative and eye-catching icon sets and make your web designs more stunning and wonderful. Have a look at this collection and also share what do you think about this collection via comment section is below.

App Icon

Download Popover

Gemicon Icon Set

Glossy World Globe Icon

Simple Flat Social Media Icons

SSD Icon

PhotoCam

Download Button

Meteo Gauges

Facebook Newsfeed Icons

24 Flat Icons

Minicons

Handcrafted Micro Icons

Winter and Summer Thermometers Icon

Simple Flat Icons

Cellphone Menu Pointer

Mini Glyph Icons

Task Accomplished Icon

Mini Glyphs Icon Set

Cloud Growl

Security Verification

Thin Stroke Icons

Phone Book Icon

20 Flat Icons

Abstract Origami Speech Bubble Icon

Mouse Cursor PSD and Hand Pointer Icons

Phone iOS Icon

Responsive Icon Design

Discussion Icon

Download Software Box

Organization Chart Icon

FatIcons

Not the new Clear iOS 7 icon

Flat Icons

Flat File Icons

Megaphone PSD

Glyph Icon Set

Glyph Icons

Trophy PSD

Credit Card Icons

Icons

Music App Icon

May 06 2013

07:00

How To Create an iOS App Icon for Your Website

Did you know you can give your website its very own app icon for iPhones and iPads? It only takes a few seconds and it makes your site look really smart when it’s saved on a user’s home screen, or when viewed in popular apps such as Reeder.

Why create an app icon?

Specifying an app icon is one of those little finishing touches that isn’t really noticeable but makes all the difference if you take it away. Without an app icon if you bookmark a site on your iPhone or iPad you’re left with an ugly screenshot of the page crammed into the little rounded square, but with one line of code you can choose your own icon design, such as a logo. It’s much like a favicon, but on a larger scale.

Having someone bookmark your site onto their device home screen is probably a rare occurrence, but as I discovered today there’s another major benefit of creating an app icon. Roberto Alanís tweeted me recently asking how I achieved such a nice icon in Reeder app. My first response was “I don’t know!”, but then I realised it was my apple touch icon that was being used.

How to create an Apple touch icon

The specified dimensions of a touch icon directly from Apple is 114x114px, this will compensate for Retina displays and produce a nice crisp home screen icon. However, as you can see from the Reeder screenshot, other sites using 114px touch icons don’t fill all the available space. Reeder is one of the most popular RSS apps, plus the touch icon may be used elsewhere too, so it’s worth creating your icon at much larger dimensions.

I chose the dimensions of 512x512px, which is probably a little overkill, but apparently 241x241px would suffice.

Next you need to decide whether you want Apple to add their glossy highlight effects to your icon. If you do, name it apple-touch-icon.png, if you don’t, name it apple-touch-icon-precomposed.png.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

You don’t actually need to write any code to get your touch icon working, just pop it in the root directory of your website and it will automatically be used by Apple devices. It might be worth linking it in your <head> though just as a reminder that it’s there. If you ever redesign you might end up forgetting to update it. Once again, make your choice of glossy or precomposed.

September 05 2012

07:08

Sosa – 121 Icons in One Free Webfont


  

Ed Merritt, Designer from Bournemouth, took a pragmatic approach. Sosa is a tailored icon font, which carries all the symbols he needed most frequently in his daily development work. As Ed is a designer, just as probably most of you are, it doesn’t seem far-fetched to expect, what Ed needs most might be identical to what you need most, too. Since Sosa is free for both personal and commercial projects, why not take a closer look?

Sosa: Icon font without a specific use case

If you know common icon sets, Sosa might surprise you. Despite the relatively small amount of just 120 symbols, the set is able to cover a variety of potential use cases. You’ll find device-icons as well as brand-icons, icons for user interfaces and more. Even weather-symbols and currency-icons are provided.

With only 95k, the download is rather lean and contains the icons in the formats TTF, EOT, WOFF and SVG. Sosa has to be integrated in your own website via @font-face. Merritt didn’t deliver the necessary related files, which shouldn’t impose a major problem to the average designer. Sosa’s project website has an overview of which key on your keyboard produces which icon.

Sosa: Contents of the downloaded archive

Even though Sosa is offered free of charge, its developer is always happy to accept donations via PayPal as to keep up font-development. There are no restrictions regarding how to use the icon font. Of course you’re not allowed to offer the set as a download from third-party domains or imply that you’re its developer. Backlinks are always appreciated, but not presupposed for the use of the product.

September 04 2012

06:04

Typicons: Free Icon Font with 88 Symbols


  

Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

August 07 2012

12:38

Showcase: 20 Retina-Ready, Highly Detailed iOS Icons

Advertise here via BSA

The first thing a user sees when they’re browsing for apps is the icon. The icon is essentially important to the app’s marketing efforts, and also to its inclusion on the home page of a user’s phone; I, for one, simply refuse to have anything on my iPhone that is poorly designed or not Retina-ready. Below are 20 icon designs that are exceptionally designed and stand out from others on the App Store.

Scany

01

Spyglass

02

Pay with Square

03>

Cellar

04

Net Status

05

Lemon.com Wallet

06

Bill Organizer

07

Strætó

08

Gemibears

09

Skala View

10

Diet Coda

11

Habit List

12

Photo Guard

13

Shows

14

Real Drum

15

Macworld

16

My Travel Bag

17

Airbnb

18

Iris App

19

Instabooth

20

April 23 2012

03:49

How to Create a Color-Inspired iOS Icon for Retina Displays

Advertise here via BSA

Creating an icon for iOS presents a variety of challenges to designers — challenges such as the size constraint. The purpose of this tutorial is help you create an icon for iOS that not only looks good, but also gives you a feel for what actually goes into creating icons for iOS. For this tutorial, we’ll be using Photoshop and Fireworks as well Cocoia’s iPhone 4 Icon PSD which you can download here.

Part One: Starting in Fireworks

In this part, we’ll be actually creating the content of the icon. The icon will look like a blend of colors so Photoshop may be considered overkill for this, while Fireworks does the job easily and efficiently.

1. Fire up Fireworks and create a new document that is 512 x 512px with a white background (don’t worry, this will be changed later).

Screen Shot 2012-04-22 at 09.18.38

2. Select the Ellipse tool from the left-hand sidebar or by pressing U and draw a reasonably-sized circle on your canvas whilst holding down the Shift key to constrain the circle. Select your circles and change the width and height to 210px – you can do this by changing the dimensions in left of the Properties window.

3. Now, on the right-hand side, right click the layer called Ellipse and click duplicate layer, do this three times so you have four circles on your canvas and spread them out.

Screen Shot 2012-04-22 at 09.22.26

4. Select a circle and in the Properties section (at the bottom) change the color to something strong – in this example I will be choosing Red (#FF0000) to be the shape’s fill color.

5. Repeat this step for each of the circles, each having a strong color – I am using Red: #FF0000 Blue: #0000FF, Green: #339900 and Orange: #CC6600.

Screen Shot 2012-04-22 at 09.26.04

6. Now, select all the circles on your canvas and select the opacity slider in the Properties window at the bottom and change the opacity to something substantial such as 60%.

7. Now, align all the circles that are on your canvas in the center and then select the top-most layer and in the bottom left corner (the left side of the Properties bar) change the Y position to 221 and, providing you’ve done everything correctly, it should read as: H: 210, W: 210, X: 151 and Y: 221. Now, select your second layer and change the Y position to 81. Select the third layer and change the X value to 221 and then the final layer’s X value should be 81 and it should be aligned in the center of the canvas.

8. Now, select all of the shapes and select the free transform tool from the sidebar (Command + T) and increase the size of the circles whilst constraining them by holding down Option (alt) and Shift and then press enter to accept.

Screen Shot 2012-04-22 at 09.42.29

9. Save your document as a PNG in your desired location.

Part Two: Making the Icon in Photoshop

Now, we’ll be moving from Fireworks to Photoshop and actually creating the icon along with a slight tint.

1. If you haven’t done so already, download Cocoia’s iPhone 4 Icon PSD template and then open it in Photoshop — for this tutorial, we’ll be creating an icon that is for the iPhone and for the retina display, so with the template open, right click the folder within the layers area entitled “114 Pixels (iPhone 4 home screen)” and select Duplicate Group and under document, select New and give it a name and press OK.

2. You should now be left with the icon on your canvas, select the Crop tool and crop around the icon template – the document size should end up being 114×114px once cropped. This is the standard size for a retina display icon.

Screen Shot 2012-04-22 at 10.03.45

3. Within the group (in the Layers section) we’re going to delete some layers, so delete the layer called Sample Shape copy 2, this should remove the star and also delete the layer called Stripes and you should be left with a clean, clear icon.

4. Select the color next to the layer entitled Base Shape copy 2 and change it to white and then navigate to your saved PNG file from part one and drag it to your canvas and then resize the icon (again, constraining it using Shift and Option) to a size that you believe looks good.

5. Right click the layer that you just created by dragging the new shape onto the canvas and select Create Clipping Mask.

6. Now, this is where you use your own discretion — you can alter the opacities of the tint and fill of the icon to make it look like you want. You can also change the background color from white to another color. In this example, I have used a dark shade of blue (#196088).

Photoshop

7. Once you’ve finished changing the opacity and tint of your icon, you’re ready to save it. The standard naming convention for retina display icons is Icon@2x.png so save your file with that name as a PNG file.

That concludes this tutorial – the purpose of this tutorial was to help you get to to grips with some basic color-blending techniques in Fireworks as well as to allow you to get to know the world of creating icons for iPhone and iPod Touch in Photoshop. In the source files I have included the Fireworks and Photoshop document along with the source code for an Xcode document if you want to test the new icon out on your retina device.

IconOnDevice

Icon@2x

Click here to download the source files.

March 26 2012

21:00

How to Create a Sexy Small Download Icon

Hi there folks, I’m back with another tutorial on how to create a sexy small download graphic. It doesn’t even have to end up as a download graphic, it can be anything. Think of a loading bar, a upload thing or even a cool button.

In this tutorial you will learn simple but elegant techniques that you can apply on your designs!

Resources for this tutorial

The only thing you need for this tutorial is the Open Sans font. Download here. Original shot on dribbble.

Step 1: Setting up the Document

  • Start by creating a document in Photoshop, something like 600 x 400 px.
  • Fill the background with the bucket tool (G). My colour was: #f0e9dd. 

Step 2: Working on the base shape

Here we go. When I first started this graphic, it had a basic circle shape. Not really original, that’s why decided to use the anchor points to modify the shape.

First, grab the Ellipse tool. Pull out a nice circle with the size you like. Next, grab the pen tool (P). Ctrl + click on the circle you just made. This should make the anchor points of the object show. Again ctrl + click, but now only on the lower anchor point. You should see this now:

With that anchor point selected, hold shift and press your down arrow twice. This should drop the point 20px down. There it is, the sort of upside down egg shape.

Let’s style that thing up!
All there is on there is:

  • Gradient Overlay
  • Inner shadow
  • Stroke

Settings below:

Next is the little lip at the bottom of the main shape.

I made this with the pen tool. I created one side first, duplicated this layer, flipped it horizontally and moved it to the right position. With these 2 layers merged you can go ahead and give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Color overlay


If you look at my finished image, you see there’s another highlight at the bottom. We’ll get to that in the end.

Step 3: Let’s bring in some colour

For the workflow it’s easiest to first create the inside of the coloured circle. Like this:

This is also made with the Ellipse tool (U). Layer styles below:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Gradient Overlay



We’ll be adding text to this later.

Now it’s time for the orange loading bar. I guess there are more ways to make this. But I took the easiest approach. First, create an Ellipse again. about 10px larger than the one above. Make sure the layer is set beneath the dark ellipse and above the main shape.

Now we’re gonna modify this shape a bit with the pen tool by adding some anchor points and curving some lines. Try to make it like this:

This shape has 5 added layer styles, and next to that some lighting layers above which we will get to after this.

Layer styles:

  • Drop Shadow
  • Inner Shadow
  • Inner Glow
  • Color Overlay
  • Stroke (with gradient)

Now, make a new layer, (ctrl-shift+N) and ctrl click on the orange shape layer thumbnail. This should bring up a selection.

Put the new layer selected on Blending mode Soft light, grab the brush tool with about a 40px radius and white colour and start playing around to make some highlights on the orange circle.

Than, again a new layer. Still with the selection of the orange circle. Again on soft light, pull down the opacity to about 60-70% and pull a standard black-white gradient from top to bottom.

Now you should have something like this:

Starting to look pretty sexy ha!

Let’s make the shape in which the orange is sitting. Above the orange layer, and beneath the inner circle layer create a new layer and grab the Ellipse tool again. Create a new circle the same size as the orange circle.

To make things clear, we’re making this now:

Load the selection of the orange layer again (ctrl+click on the layer thumbnail). Rasterize the new shape we made and hit delete. This should delete all of the overlapping on the orange. Doe the same thing again, but now load the selection of the inner dark circle. So you only have the visible of the circle left. (The one-quarter piece). Let’s give it some styling.

  • Drop Shadow
  • Inner Shadow
  • Gradient Overlay

What a bummer guys, we’re almost done already!

Few things left to do.

  • Add the numbers in the middle.
  • Highlights on all the shapes.
  • Simple background shadow

Grab the text tool, with the Open Sans font, typ 75% in the middle on everything (16px, bold #ddd3c3). Give the text a drop shadow, deselect the Global lighting option and set the direction to -90 degreesdistance: 1, spread: 0, size: 0. Colour: #000.

Another text layer beneath the percentage. This will show the file size, or download speed. Whatever you like. Same styling same options, only not bold and 10px big now.

All set, now we have this:

Now we have to add some highlights to make this thing shine.

This is after my added highlights:

Try to do something similar, most of it is done the pen tool, or just by loading the layers selection and stroking it with white on a new layer, a little erasing some parts an blending options should do the trick. Just play around ;). If u have questions feel free to ask.

My shadow is a gaussian blurred triangular shape on 5% opacity. Transform it a bit to get the right shape of the shadow. It also depends on when your light is coming from.

You can spice up the background a bit more with patterns/textures/lights/shadows, etc.

Here’s my final outcome once more:

I hope you likes this tutorial. If you still have any questions, feel free to ask!

Follow me on Twitter to stay tuned for more!

January 16 2012

07:00

How To Create a Vibrant Cloud Icon in Photoshop

Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.

Cloud icon

The cloud icon we’ll be creating features plenty of vibrant colours to create a three dimensional appearance. A flow of purple to blue provides the colourful base while the highlights help illuminate the icon and lift it from the screen.

View the full size icon design

Open up a new Photoshop document and begin by filling a black circle with the elliptical marquee tool on a new layer. Hold Shift and move the selection to one side and fill a copy, then use the rectangular marquee tool to fill in the centre while aligning the bottom edge perfectly.

Back with the elliptical marquee tool, draw a slightly larger circle and a slightly smaller circle each overlapping the original left and right circles.

Fill in any gaps in the centre to finish off the graphic as a recognisable cloud shape.

Double click the layer to open up Photoshop’s layer styles window and add a Gradient Overlay. Add a third swatch in the middle then change the colours to #300a85, #2555dd & #c8ecff. When choosing colours, avoid selecting tones from the same hue. Instead, move around the colour wheel to create more intense changes in colour, so the tones become warmer or cooler.

Give the cloud an Inner Glow effect to add to the three dimensional appearance. Change the settings to white, Soft Light and 100% opacity, then play around with the size slider.

An Inner Shadow effect can be converted to create a cool top highlight. Change the default fill from black to white, then alter the blend mode to Overlay to allow the colours to interact. Adjust the Distance, Choke and Size to balance between a hard/glossy highlight and a smooth/soft highlight.

Press OK to confirm the layer styles, then CMD+click the cloud layer thumbnail to load its selection. Go to Select > Modify > Expand and enter 5px.

Fill this new selection with black on a new layer underneath the main cloud to create an outline effect.

Open up the layer styles for this black outline and add a Gradient Overlay. Choose similar purples and blues, but enough change in tone so they contrast against the cloud layer. I’m using #571a9b, #4c54e5 and #c0e8ff.

Load the selection of the cloud layer again, then right click and select the Stroke option on a new layer.

Alter the stroke width to 2px using white as the colour, then make sure the Location is set to Inside.

Use the Eraser with a large soft brush setting to delete the lower portion of the stroke outline, leaving a gradual fade from top to bottom. This little touch adds another subtle highlight to the icon.

Dab a spot of black on a new layer at the bottom of the stack, then transform and squash it down into more of a shadow shape.

Split the shadow in half using the marquee and selection tools. Hold Shift to make sure the second half stays on the same plane.

Use the Single Column marquee tool to make a selection, then transform and stretch this selection to fill out the centre area of the shadow with a straight segment.

Move the shadow into place under the cloud to ground it onto the background, then add another Gradient Overlay in the layer styles window. Use darker tones of blue and purple to continue the colours into the shadow. A shadow in reality isn’t black, it is made up of all the colours and reflections that are around it.

Cloud icon

Our vibrant cloud icon is now complete. The gradients and highlights really help create a three dimensional appearance, while the variations in colour subtly give a more realistic feel to the shading.

November 21 2011

18:27

Create a Business Icon from Scratch an Adobe Illustrator Tutorial


  

Business icons are one of the most poplar vector illustrations. As with all vectors in general, business icons are scalable which makes them perfect for use in web design. The best way to create an icon is to use one of the vector based programs, such as Adobe Illustrator, Corel Draw, etc. We are going to create an interesting business icon that consists of two arrows and a globe in this Adobe Illustrator tutorial. The techniques we are going to describe is applicable for creation other kinds of illustrations as well.

So, let’s get down to business.

This is what we will be creating.

Creating the Globe

Before we create the globe we need to prepare a grid of parallels and meridians. It means we have to prepare the symbol that we’ll apply to the globe. The Blend Tool will help us do that.

Grab the Line Tool (/) from the Tool Panel and create a vertical line. Now, select Add Anchor Point Tool (+) and add an anchor point exactly in the middle of the line.

Select the Direct Selection Tool (A) from the Tool Panel, grab that anchor point and drag it to the left (don’t forget to hold the Shift key on the keyboard for straight dragging).

This way we have created a sharp corner. We need to smooth it out. Grab the Convert Anchor Point Tool (Shift + C) from the Tool Panel, click on the anchor point and to drag it downwards (Shift for straight dragging).

Select the path and under Object select Transform > Reflect. Set the Axis to Vertical and hit the Copy button. It will create a mirror image of our path. Move the new path to the right (Shift for straight dragging).

Select both paths and under Object select Blend > Make. It will create more paths in the middle. To specify the exact number of the paths open Blend Options (Object > Blend > Blend Options). We’ll set the value for the Specified Steps to 17.

Grab the Line Tool (/) from the Tool Panel and create a horizontal line (Shift for straight dragging), as shown on the picture below.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the line and place it as pictured.

Select both horizontal lines and under the Object select Blend > Make. Set the value for Specified Steps to 9.

Select all the elements we’ve created so far and Group them (Ctrl / Cmd + G). Grab the group of elements and drag it to the Symbol Panel. Symbol Options window will pop up. Set the name to Grid, make sure to set the Type to Graphic and hit the OK button.

Now we have created a symbol which we’ll use to apply to our globe.

Creating the Globe

First of all, we have to create a circle. Grab the Ellipse Tool (L) from the Tool Panel and create a circle (don’t forget to hold the Shift key on the keyboard for the proper circle).

With the Direct Selection Tool (A) select the anchor on the left side and hit the Delete key on the keyboard to remove it. You should end up with something like this.

Under Effect select 3D > Revolve.

Under the 3D Revolve Options box make sure to set the Surface to Diffuse Shading and then hit the Map Art button. This is the where we are going to apply the symbol we created to our sphere.

In the Symbol drop down Menu select the symbol of the grid we have already made. Make sure to hit Scale to Fit button. It will apply the grid symbol properly.

You should end up with something like this.

Now we need to apply some nice color gradients. To be able to do that, first we have to turn our object into editable shapes. Under Object select Expand Appearance. Then we need to Ungroup (Shift + Ctrl/ Cmd + G) the object. Be ready to repeat that action a few times, until you “separate” the sphere from the grid. When you achieve that select the sphere (you’ll notice that it contains many concentric circles) and under the Pathfinder Panel hit the Unite button. This will turn the circles into a single one.

Set the Fill color for the grid to #61D4E0.

We are going to apply a nice blue radial gradient to the circle. It will turn our circle into a nice blue sphere.

There is one more thing we should add to the globe. Select the Rectangle Tool (M) from the Tool Panel and create the ellipse. Set its Fill color to white (#FFFFFF) and place it as it shown on the picture below.

Set the Opacity of the new ellipse to 26%.

Our globe is ready for some nice arrows. Before we create them don’t forget to Group (Ctrl / Cmd + G) all the elements of the globe together.

Creating the Arrows

To create nice 3D arrows we will be using 3D effect Revolve. It will help us to fold the arrow around the globe. So, lets get started. First we will create the shape of the arrow.

Grab the Rectangle Tool (M) and create a rectangle, as it’s shown on the picture below.

Now, grab the Star Tool from the Tool Panel and click on the Artboard. The Star Options window will pop up. Set the value for Points to 3 and hit the OK button.

It will create a triangle. Rotate it and place it as it show on the picture below. Align the shapes by using Vertical Align Center under the Align Panel.

When you are satisfied with the result under the Pathfinder Panel hit the Unite button. It will turn both shapes into the arrow shape.

Drag the arrow to the Symbol Panel and name it Arrow. Set the Type to Graphic. This way we are creating the symbol of the arrow which we’ll be using later.

Now, grab the Rectangle Tool (M) from the Tool Panel and create a rectangle, as pictured.

Under the Effects select 3D > Revolve. Check the Preview box in order to be able to see what are we doing. Under the Revolve Options box click on the Map Art button.

You will notice that the cylinder contains three sides. Upper ellipse, lower ellipse and the lateral side of the cylinder. Switch between sides, and when you select the lateral side of cylinder select the arrow in the drop down menu for Symbol. Also, make sure to check Invisible Geometry. It will remove the cylinder shape and only the arrow will be visible.

Feel free to play with the size and the rotation of the arrow, until you reach the right angle and position.

When you reach a desirable result hit the OK button. We can also change the rotation of the invisible cylinder in order to find the best position for our arrow by rotating the cube in the 3D Revolve Options box.

Now we have to turn our arrow into an editable shape. Select the shape with the arrow and under Object hit Expand Appearance. You should end up with something like this.

Lets Ungroup (Shift + Ctrl / Cmd + G) the new shape (we’ll have to do it more than once) and remove everything besides the arrow. This is what we should have by now (blue color is changed to be able to see the result clearly).

Take a good look at the arrow. See if there are any unnecessary anchor points and remove them.

Now we have to turn the arrow into a 3D shape. Select both parts of the arrow and duplicate them (Ctrl / Cmd + C, Ctrl / Cmd + F). Using the arrow keys on the keyboard nudge the copies a few pixels to the right and then downwards. You should end up with something like this.

We have to connect some shapes now. Grab the Add Anchor Point Tool (+) from the Tool Panel and add few anchor points.

With the Direct Selection Tool (A) grab the new anchor point and move it to the lower corner of the green shape.

Repeat this step for the other corners of the arrow as well.

To be able to create a glossy arrow with lots of reflected parts, we’ll have to divide some parts of the arrow. Select the Pen Tool (P) from the Tool Panel and create the path as it’s shown in the picture. We will use the path to divide the red part of the arrow. Just select them both (red shape and the green path) and under the Pathfinder Panel hit the Divide button. It will split the red shape exactly in half. Don’t forget to Ungroup it (Shift + Ctrl / Cmd + G).

And, now our arrow is ready to get some nice colors.

Applying the Color Gradients

In this part of the tutorial we will try to achieve a nice glossy look for the arrow.

To start we will apply some nice linear gradients.

Use a radial gradient for lateral side.

We can also divide the inner part of the arrow. Just create another path using the Pen Tool (P) and divide the inner side of the arrow. Apply a nice radial gradient to both sides.

We can also make some additional shapes that will help us to create the glossy look of the arrow. Select the right upper side of the arrow and under Object select Path > Offset Path. Set the value for Offset to -3 and hit the OK button.

With the Direct Selection Tool (A) move the upper side of the new shape. Just select the upper anchor points and move them upwards, as shown below.

Apply a nice linear gradient to the new shape.

We can do the same thing with the left side of the arrow. You should end up with something like this.

In order to create more light reflections we will divide some other parts of the arrow as well. Grab the Line Tool (/) from the Tool Panel and create a few random lines.

Use each of the lines to divide the surface underneath the line. Just select the line and the shape you want to divide and under the Pathfinder Panel hit the Divide button.

Apply a green radial gradient to the new shape, just make sure to create a sharp transition, just as it’s shown in the pictures below.

Repeat this step for the other shapes as well. It will create nice light reflections.

Some nice edge highlights will give our illustration a real glossy look.

The Final Touch

Now we will combine our globe with the arrows. To be able to set the two arrows in the right place we will have to learn to draw a Clipping Mask. A Clipping Mask is actually a random shape without the Fill and Stroke colors which allows us to hide some parts of the illustration.

Let’s get down to business.

Place the arrow on the top of the globe (as pictured). Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the arrow and send the copy behind the globe (Shift + Ctrl / Cmd + [). You should end up with something like this.

Grab the Pen Tool (P) from the Tool Panel and draw a shape similar to this.

When you are drawing the shape for the Clipping Mask keep in mind what parts of the arrows needs to be visible (everything inside the path will remain visible). Also make sure to follow the shape of the globe in order to avoid overlapping the globe and the part of the arrow that needs to be behind it.

When you are satisfied with the shape of the Clipping Mask remove the Stroke color, select the globe and the arrow and under the right click select Make Clipping Mask.

This action will hide all parts of the arrow outside the Clipping Mask. This way we have created the illusion that the arrow is "sitting" on the globe.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the green arrow behind the globe, Bring it to the Front (Shift + Ctrl / Cmd + ]) and change the color to red. Using the Reflection feature under Object > Transform > Reflect flip the arrow upside down by using reflection on a Horizontal and Vertical axis. You should end up with something like this.

Repeat the steps for creating the Clipping Mask and you should get something like this.

Feel free to create a few more shadows and some sparks…

…and we are done!

The Conclusion

Glad that you went through the entire tutorial. It will help you to create a really interesting web icon that can be used for different kinds of purposes (business, environment, communication, etc). Using this technique you can actually do other kinds of illustrations as well.

Just feel free to be creative and to explore the other possibilities. Hope you like this tutorial. Thank you for following along.

(rb)

September 20 2011

14:56

How to Create a Beautiful Icon with CSS3

Today, I’d like to show you a neat trick. We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.


The Game Plan

  1. Create a square box
  2. Round the edges
  3. Use pseudo elements to create a curled corner
  4. Create the illusion of text with a striped gradient

Let’s get started!


Step 1: Create a Box

We’ll begin by adding our single HTML element: an anchor tag. This makes sense, as most icons also serve to be links.

    <a class="docIcon" href="#">Document Icon</a>

Let’s set the somewhat arbitrary dimensions for our icon. We’ll do 40x56px – simply for this demo. In a real world application, you’ll likely want to reduce this! Also, keep in mind that we need to add display: block, since all anchor tags are inline, by default.

.docIcon
{
    background:#eee;
    background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    border:1px solid #ccc;
    display:block;
    width:40px;
    height:56px;
    position:relative;
    margin:42px auto;
}

Note that, above, we’re setting a positioning context in order to work with pseudo elements shortly. You’ll find that I’ve only used the official CSS3 syntax for the gradient. You’ll likely want to use the various browser prefixes as well. To speed things up, you can use Prefixr.com, or its API in your favorite code editor. Simply copy the code snippet above, paste it into Prefixr’s textarea, and click enter. It’ll then spit out all of the various prefixized properties, like so:

.docIcon {
	background: #eee;

	background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
	background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
	background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
	background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
	background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

	border: 1px solid #ccc;
	display: block;
	width: 40px;
	height: 56px;
	position: relative;
	margin: 42px auto;
}
Prefixr

Next, let’s add some shine using CSS box shadows. I’ve also used the text-indent property to hide the text.

.docIcon
{
   ...
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;

    text-indent:-9999em;
}

So Far, We Have:


Step 2: Rounded Corners

Next, we need to create a rounded corner effect. Add the following:

.docIcon
{
    ...
    -webkit-border-radius:3px 15px 3px 3px;
    -moz-border-radius:3px 15px 3px 3px;
    border-radius:3px 15px 3px 3px;
}

By passing four values, we can specify the top, right, bottom, and left radii, accordingly. This is similar to the way you would apply margins or padding.

Which Gives Us…


Step 3: One Curled Corner

To create the illusion of a curled corner, we’ll use generated content, or pseudo elements.

First, add content :before our icon. In this case, we don’t require any specific text. Instead, we need to create a 15px box, and apply a background gradient.

.docIcon:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 15px;
	height: 15px;
	background: #ccc;

	background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
	background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
	background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
	background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
	background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

	-webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
	-moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
	box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;

	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

In order for our generated content to also receive the top-right rounded edge, we must, again, apply the same radii to align it.

...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;

Tada!


Step 4: Adding Lines

Next, we’re going to use the :after psuedo element to add some dashed lines to represent zoomed out text. Apply a width of 60%, and a margin-left and margin-right of 20% (which equals 100%). Next, we specify a height and position it at 0 0.

.docIcon:after
{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:60%;
    margin:22px 20% 0;
    height:15px;
}

Creating a set of lines is a bit tricky. If we’re clever, though, we can use CSS gradients to achieve this effect. First, divide the total height by five, and set each block with a solid fill. Refer to the image below for a clearer exemplification of this thinking. Nifty, ay? It’s a nice technique to have in your toolbelt.

Multiple Lines (Stripes) with CSS3 Gradienst

.docIcon:after
{
    ...
    background:#ccc;
    background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}

We’re Finished!

Did you enjoy the post? Have other similar tricks? If so, link to them in the comments below.


July 07 2011

10:00

Mascots: Where Are They Heading?

Many companies use a virtual mascot or avatar to represent their product or service on the Web. At first glance it seems so simple, just follow the well-known guidelines and voilà, you have a cool mascot that keeps people engaged with your site. But is it really that easy? After doing some research I ended up noting that most of the popular mascots and avatars are of rather the same type – there is some personality but not much movement. That raised questions: How much room is there for development and why are mascots so popular?

The answer is simple: People prefer talking face to face. A mascot/avatar helps companies to connect with people and develop a relationship with them. Generally, people prefer common types of avatars such as humans and animals. It’s hard to connect with something abstract, although it is possible. There is also an emotional aspect – the more emotional the design is, the more likely it creates a feeling for visitors. The three following steps should make it easy to create an attractive mascot:

  • Consider your target audience
  • Make the mascot match the website
  • Give the mascot a personality

And yet, most of the mascots and avatars don’t serve their purpose as effectively as we’d expect. Concerning these less effective avatars – for some reason most companies stick with a mascot who has personality but who doesn’t ‘live’ on the site. Therefore, I would like to point out five different examples.

One of the most popular examples of a typical mascot is MailChimp.

Whenever you check reviews about the best online mascots, the MailChimp monkey is always among them. It took 7 years of work and revision until the creator of the logo was finally happy with the result. It happened only when they hired an expert, creator of Firefox logo Jon Hicks, who redesigned the mascot and gave the logo its current appearance. You can read more about the design process of MailChimp mascot here.

Another highly rated example from Jon Hicks is Silverback @ silverbackapp.com

The creation process took a lot less time than for MailChimp, but it’s a good example of the steps a designer goes through to get a good mascot that relates well with users. An idea was turned into basic sketches, which, after adding some details, were scanned in. The next step involved the first layer of colors in Photoshop that resulted in a realistic gorilla wearing a shirt and a drawing pad. But it is difficult to relate to a simple animal. Therefore, as a last phase, Hicks added some more human-like details and facial expressions. You can see the steps of this process here.


One mascot, which takes a step further motion-wise, is Crayons.

The Belgian mascot Crayons is rather rare in the mascot world because it is based on an inanimate object. And yet they have still managed to create a friendly mascot which creates positive feelings and is easy to bond with emotionally. The only negative side to Crayons is its relative similarity to the Microsoft paperclip Clippy. The designer has given the mascot more emotions and movement than usual, and I must say that without a doubt he has done it successfully. Some emotions displayed by the Crayons mascot can be found here.


Now, I’m not quite sure whether Roger MozBot by SEOmoz should be grouped with Crayons or following Sportlyzer.

SEOmoz has done even more amazing work with an inanimate object. Roger MozBot looks like he is alive and emotional. In addition, most female users probably find him cute. SEOmoz has used Roger MozBot in several situations on their homepage and he ‘lives’ a separate life on Twitter and Facebook. And yet, he is still somewhere in between. It’s difficult to say whether it’s because of the company’s brand building or because of the fact that,despite his cuteness, he is still just an inanimate robot.

Sportlyzer has tried to go even further with its avatar, Mike Lyzer.

The virtual coach avatar, Mike Lyzer, is a key element of Sportlyzer’s UI therefore an attempt to make the avatar as ‘live’ as possible has been made. Mike, like Roger MozBot,communicates on Twitter and Facebook but, in addition, he also has a primary role on Sportlyzer. He acts as a coach on the website and gives practical advice to users. Mike’s avatar was chosen via a competition on 99 Designs. Applicants were given three emotions and they had to create a virtual coach from whom people would like to receive advice. You can see the development of Coach Mike Lyzer and some examples of the winning designs in action here.

The last two examples seem to be taking it one step further, and yet we still haven’t seen many examples like this – most of the mascots are rather like MailChimp’s monkey or Silverback’s gorilla. Is there a good reason as to why sites are choosing this path? Is it simply because different mascots and avatars serve different purposes or have SEOmoz and Sportlyzer really gone a few steps further in mascot development? If so, then what’s next?

July 04 2011

07:00

How To Create a Vibrant Radar Icon in Photoshop

Get to grips with Photoshop’s various tools to create a detailed and vibrant radar icon. We’ll build the icon over multiple layers with the help of gradients, brushes and layer style effects. The final icon would look great in your dock as a Mac application or used to create an icon for your iPhone app.

Radar icon

The icon we’ll be creating features a typical green radar with a vibrant illuminated screen. Subtle gradients help add depth to the icon while the scanlines pattern and soft glows on the screen elements really help add a touch of realism.

View the final radar icon

Create a new Photoshop document and fill the background with black. As for sizing, create the design at the largest your icon will ever need to be. Fill a white circle in the centre, then right-click and select Transform Selection. Scale down the selection while holding Shift and ALT. Press Enter then delete out this centre portion to leave a thin ring.

Double click the ring’s layer in the layers palette to open up the layer styles. Add a Gradient Overlay flowing from dark to light green, then add a soft white Inner Glow.

Next, change the settings of the Outer Glow effect to add a black shadow around the ring. It won’t be visible yet, but it will help add depth to the radar screen later.

Draw a circular selection within the area of the outer ring, then fill a new layer underneath the ring with a green gradient. Choose colours from black to mid-green to a very light green and select the radial gradient option.

Create a new document at 2x3px. Zoom right in and select the Pencil tool. Draw a line across the top edge, then go to Edit > Define Pattern.

Draw another selection within the confines of the outer ring, then select the fill tool, change the drop down menu to Pattern and select the recently created pattern swatch. Change this layer to Overlay at 50%.

Use the Single Row and Single Column selection tools to draw horizontal and vertical lines over the document. To make sure they’re centred, press CMD+A to select all, then CMD+T to transform. You can then drag out guides from the side rulers (CMD+R) and snap them to the transformation handles.

Add a layer mask to the lines layer and fill it entirely with black to render everything invisible. Then use a large soft white brush to bring back the lines by clicking once in the centre.

Draw two circular selections aligned to the centre (Click+drag from the centre guides while holding ALT), then right click and select Stroke to give them a 1px white outline.

Use the Polygonal Lasso tool to draw a rough outline to contain the radar sweep. Pay close attention to the alignment to the centre. Add a blob of white with a large soft brush.

CMD-click the outer ring layer thumnail and add in an extra selection to surround and delete any unwanted excess from the radar sweep layer. Change this to Overlay to allow the colours to interact and produce a vibrant green effect.

Use the brush tool to dab spots on the radar, then give them an extra vibrant glow using the Outer Glow effect from the layer style window.

Radar icon

This leaves our cool little radar icon complete ready for exporting as a transparent PNG and putting to use as a fully working icon file in your favourite app, or as some kind of interface icon on your web app or web site.

May 12 2011

04:10

50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Advertisement in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials
 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials  in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials  in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Designing an icon set may sound like an easy thing to do but in actuality it is much easier said than done. Many designers end up with a disaster, while some more matured and experienced designers successfully meet the expectations and deliver.

Generally speaking, a designer needs to learn the basic principles of icon design first, and must be aware of the significance of and function that icons perform on web sites and in user interfaces. In order to create useful and effective icons, one must know the difference between icon and logo designs; and most importantly, how to use your creativity to incorporate the characteristics we need in the icon successfully.

In the end of 2009, we had compiled a post on Illustrator Icon Tutorials, and since we have noticed that there are lots more outstanding tutorials on designing beautiful and attractive icon sets that have been shared by experienced designers all over the world. So, we have decided to bring you all another collection of Adobe Illustrator Icon tutorials.

Illustrator Icon Design Tutorials

How to make a realistic vintage typewriter in Illustrator
In this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator.

Illustratoricon54 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Super Glue and a Paint Tube Icon
In the following tutorial you will learn how to create a super glue and a paint tube icon. These shiny icons are simple to create, we’ll cover a complete workflow, and show you techniques that will speed up your work process.

Illustratoricon1 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Suitcase Icon in Adobe Illustrator
In the following tutorial you will learn to create a suitcase icon, suitable for a travel oriented site, or vacation brochure. Grab hold of your vector tools and let’s get to building.

Illustratoricon5 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create simple but effective Weather Icons in adobe illustrator
In this tutorial you will learn how to create some attractive little weather icons in Adobe Illustrator.

Illustratoricon25 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Make a Detailed Printer Icon Using Illustrator
In this icon design tutorial, we will construct a desktop printer icon that is rich in detail. Ready? Perhaps you should serve yourself a cup of coffee and grab a bag of chips to pass the hunger while we draw our icon (it could take a while to finish)!

Illustratoricon38 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Jeans Pocket Icon Using Adobe Illustrator
In this tutorial you will learn many useful and necessary techniques, such as the creation of vector texture, working with the Scatter Brush, using the Graphic Style palette, creating scuffs and creases on the fabric, using the Gradient Mesh, and more. Believe me, it’s worth your attention.

Illustratoricon31 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Nice Award Medal Icon
In the following tutorial you will learn to create an icon of an award medal. You will use various shapes and pathfinder techniques to make this great looking icon. This illustration can be made without the use of the Pen Tool, so it’s a great tutorial for beginners. You will be proud of the results!

Illustratoricon32 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Syringe Icon Tutorial
In this tutorial you will learn how to create a medical syringe icon with illustrator CS5.

Illustratoricon41 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Simple Paint Brush Icon
Here you can learn to create a quite simple paintbrush icon. For this fast tutorial you’ll use some basic tools like the Rectangle Tool, the Ellipse Tool or the Pen Tool. Then, for some neat effects you’ll need the Wrinkle Tool or the Warp for rougher effects.

Illustratoricon55 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Tasty Burger Icon in Illustrator
In this delicious tutorial the artist will show you how to create a three-dimensional, scrumptious burger using Adobe Illustrator.

Illustratoricon56 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Quick Tip: Create a Shiny Shield with Illustrator
In this Quick Tip, you’ll learn how to harness the Appearance panel to make the basic structure of a shiny, beveled shield. Once the structure is in place, a few well-placed gradients are all it takes to achieve a sharp, polished look.

Illustratoricon4 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Simple Cardboard Box Icon
In this tutorial you will learn how to create a simple cardboard icon using 3D Extrude & Bevel and basic gradient fills.

Illustratoricon16 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Shiny Bucket Icon
In this tutorial you will learn how to make a realistic vector bucket icon. You will learn to use the 3D Revolve function, how to add realistic light effects and how to draw different objects to form a composition.

Illustratoricon46 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Hyper-realistic Flashlight
In this tutorial you will learn how to create a very realistic illustration of a flashlight. This style of illustration is particularly popular for icons and technical illustrations. Although this tutorial is more advanced than others, don’t let that dissuade you from giving it a go, you will find it’s written in an easy to understand format and the results will be worth the perseverance.

Illustratoricon49 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Shimmering Cityscape in Perspective, Using Illustrator CS5
The Perspective tools in Illustrator CS5 make it a lot easier to draw in perfect one, two or three-point perspective. Using symbols in conjunction with the Perspective tools will make quick work of this stylized cityscape.

Illustratoricon3 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Safe Icon in Adobe Illustrator
In the following tutorial you will learn to create a safe icon. We’ll use a variety of Adobe Illustrator tools and techniques to create this icon. Learn how to make a place to stash your vector gold. It’s all about the details you put into this design to give it a bit of shine.

Illustratoricon6 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Quick Tip: How to Create a Simple 3D Lollipop Icon
In the following tutorial you will learn to create a lollipop icon. By using some simple shapes and the Distort & Transform function, you will see just how easy it is to make a great looking icon.

Illustratoricon7 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Make a Headphones Icon Using Adobe Illustrator
In this tutorial you will learn how to create a realistic image of headphones using simple and understandable techniques. It turns out that to get a good result there is no need to do it in a complex way. This tutorial is easy for any beginner to complete.

Illustratoricon8 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Make a Mailbox Icon Using Adobe Illustrator
Attention! This icon was not created solely for educational purposes. You can see the working process of real designing! We are going to use various professional techniques to create this icon, and artist will give you many useful tips along the way.

Illustratoricon10 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Use the Perspective Grid to Create a Modern TV
In this tutorial you will learn how to create your own modern TV on a stand. Using the Perspective Grid in Illustrator CS5 as the basis of your work you will learn how to quickly create a product illustration with perfect perspective.

Illustratoricon11 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Modern Style Icon with a Professional Finish
If you want to learn how how to create a professional level Hard Drive icon with shading and lighting the techniques, then we have an awesome tutorial for you.

Illustratoricon12 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Use the Opacity Mask to Make High Gloss Icons and Reflections
The Opacity Mask is a somewhat hidden feature in Adobe Illustrator. Mask work like Photoshop’s alpha channels to obscure parts of your artwork. In this Quick Tip, you’ll learn how to use Opacity Masks to make reflections and highlights on a vector icon.

Illustratoricon14 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Stylish Wireless Phone
In this tutorial you will learn how to make a great looking Wireless Phone. You will be using Offset Path and various gradients to create a three dimensional phone with realistic highlights and reflections.

Illustratoricon15 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

The Perfect Diamond
In this tutorial you will learn how to cut a perfect diamond.

Illustratoricon17 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Vector Retro Television
In this tutorial, you will be shown how to make a stylish retro looking television in Adobe Illustrator. You will learn how to draw basic shapes, modify them and apply gradient and gradient mesh for more realism. Hope you enjoy this illustrator tutorial.

Illustratoricon18 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How To Create a Colorful Logo Style Icon in Illustrator
Follow this step by step to create a vibrant and colourful logo style icon graphic. This style of abstract three dimensional shape has become a popular trend in the world of logo design. Today we’ll look at how to build the graphic in Illustrator using a range of tools and techniques.

Illustratoricon20 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Simple Trunk Icon
In the following tutorial created by Andrei Marius, you can learn to create a simple trunk icon. This detailed Illustrator tutorial uses some Extrude & Bevel 3d effects, gradients, offsets, and other techniques that can be easily applied to other icons ans illustrations.

Illustratoricon21 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Dirty Water Drop Character Icon
Did you know that 3.575 million people die each year from water-related disease? Moreover, 884 million people lack access to safe water supplies; approximately one in eight people. That’s pretty crazy! To spread the awareness about The Water Crisis, you can create the following Illustrator icon and learn more about the crisis at Change.org.

Illustratoricon22 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Quick Tutorial: Create A Sleek Bevel Styled Icon With Just a Few Illustrator Tools
I love simple and sleek looking icons. I love them even more when they’re easy to make, and completely versatile as a foundation for a ton of other icons. With a little practice, you can probably whip out some really beautiful icons in under a few minutes!

Illustratoricon23 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create A Briefcase Icon
In this tutorial, you will be shown how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover, you can easily apply these techniques to other icons, logos, and illustrations.

Illustratoricon24 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to make a Calendar icon
This tutorial is for any and all of those users out there interested in icon development. In this tutorial you are going to learn how the folks at DryIcons made the Calendar Icon from their most popular icon set “Coquette”.

Illustratoricon26 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Windows Vista Icon
In this video we will go from the very start of the process to the very end of the process of duplicating the “my computer” icon for Windows Vista and making it all vector.

Illustratoricon27 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Vector coffee cup tutorial Illustrator
In this tutorial you will learn how to make a realistic looking vector cup of coffee.

Illustratoricon28 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Simple Skull Vector Icon
In this tutorial you will learn how to create an easy, light skull vector icon.

Illustratoricon29 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a vector stop watch icon
In this tutorial you will learn how to create a vector stop watch icon in Adobe Illustrator. The tutorial is covering all the steps needed to create a great looking, realistic stop watch. Only the basic tools in Illustrator such as Ellipse, Rectangle, Gradient and transformations are used to achieve the result you see here.

Illustratoricon30 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Design a Realistic Gamepad
In this tutorial, you will learn how to create an illustration of a gamepad using the Pen Tool, Gradients and Filters. You can use this illustration as the basis of an icon or for a decorative element on a larger design.

Illustratoricon33 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Draw a Glossy Yo-Yo Icon using Adobe Illustrator
Entertain yourself with this tutorial on creating a glossy yo-yo icon. You will learn how to combine different gradient and object effects to make a hyper realistic and shiny plastic surface. The result is a perfectly rendered and appealing icon that can be made in just one hour!

Illustratoricon34 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a 6-egg box (not necessarily for Easter)
In this tutorial you will learn how to create a carton containing half a dozen eggs. We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

Illustratoricon35 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a yummy vector cupcake
In this tutorial you will learn how to create a tasty looking vector cupcake treat.

Illustratoricon36 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Design a 3D Digital Clock Icon with Illustrator
This tutorial will explain how to create a glossy and stylized digital clock from scratch in Adobe Illustrator composed of basic shapes and nifty gradients. We will make a vector icon that will be scalable to any size by taking advantage of designing icons and graphics using a vector-based application like Illustrator.

Illustratoricon37 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a 3D Shipping Package Box Icon in Illustrator
This icon design tutorial will discuss how to create a shipping box/parcel box icon from scratch using Adobe Illustrator. We will use the 3D Extrude & Bevel effect, the Pen Tool for drawing simple shapes, several panels like the Transparency Panel and the Gradient Panel, and other fundamental Illustrator features.

Illustratoricon39 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Vector printer tutorial Illustrator
In this tutorial you will learn how to make a realistic vector printer in Adobe Illustrator.

Illustratoricon40 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Gift Box Illustration
In this next tutorial you will learn how to create an illustration of a gift box. You will be shown how to use the rectangle tool and the star tool to create a pattern and a symbol. For the box and the bow shapes you will use the 3D Extrude&Bevel effect, the Map Art option plus some Warp effects and Pathfinder options.

Illustratoricon42 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Laptop Icon
In the following tutorial you can learn to create the icon of a laptop. Once you’ve created the basic shapes, it’s easy to continue with the other components. Give it a try and you might learn some interesting stuff about the role of Smart Guides and Rectangular Grid Tool.

Illustratoricon43 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Neat Price Tag
In the following tutorial you will learn how to create a nifty little price tag. First, for the basic shape, the grid and the Snap to Grid will significantly ease your work. Then, for the rest of the illustration you’ll use the Pathfinder options, multiple gradients and strokes plus some basic effects and brushes.

Illustratoricon44 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Cute and Simple Hippo Face
In the following tutorial you’ll learn to create a simple hippo face. It’s made with simple tool like the Ellipse Tool, the Rectangle Tool and the Rounded Rectangle Tool. Also, for some discrete details I added some basic effects like the Inner Glow or the Gaussian Blur.

Illustratoricon45 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Make an Opulent Chair Icon
In this tutorial, you will learn how to make a chair icon using gradient mesh, the pathfinder tool and the appearance panel. Don’t let this tut deceive you, with a bit of imagination you can create an entire collection of soft furnishing icons in minutes with a few easy tricks.

Illustratoricon47 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Illustrate a Marvelous Violin Icon
If you want to learn how to create a marvelous violin icon, then we have an awesome tutorial for you. This tutorial covers how basic shapes and a solid understanding of perspective and volume work together to quickly build a successful icon.

Illustratoricon48 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

How to Create a Distinguished Personal Diary Icon
In this tutorial we are going to create a stylish personal diary icon using Illustrator CS4. Gradient is at the core of this tutorial and we will be taking look at it in close detail. You will also learn how to use the opacity mask to create drop reflections and shadows.

Illustratoricon50 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Stylized First Aid Icon in Illustrator
In this tutorial we’ll use a combination of craft and Illustrator’s 3D tools to create a first aid icon. You can use the techniques you learn in this tutorial to create realistic rounded box icons of your choice. This works well for complex icons at large sizes and scales down nicely.

Illustratoricon51 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Design a Stylish Wallet Icon in Illustrator
In this simple tutorial you will be shown how to create the wallet icon from the Cute Little Factory’s Women’s Icons using Adobe Illustrator CS4.

Illustratoricon52 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Reflections Done Right – Creating a Money Roll Icon
Cash-in when you follow this tutorial for creating accurate and logical reflections. Learn how to use shading and masking to create an illustration that’s worth the look.

Illustratoricon53 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

Create a Classic Calendar Icon
Here you’ll learn to create a classic calendar icon. It’s a pretty simple and fast tutorial. You only need to know how to use the basic tools and some effects like the Inner Glow, the Drop Shadow, the Transform effect, the Rounded Corners effect or the Warp effect.

Illustratoricon57 in 50+ Fresh And Useful Adobe Illustrator Icon Design Tutorials

(rb)

May 03 2011

13:13

Creative Brainstorming: 50 Examples of The Logo Design Process

Advertisement in Creative Brainstorming: 50 Examples of The Logo Design Process
 in Creative Brainstorming: 50 Examples of The Logo Design Process  in Creative Brainstorming: 50 Examples of The Logo Design Process  in Creative Brainstorming: 50 Examples of The Logo Design Process

Everyone knows how important a logo is to your identity and brand. Every business, online and offline, requires a logo. A logo represents your company and products to potential customers.

Almost any designer can create a good logo, but it won’t necessarily be perfect. Creating an extraordinary logo requires a thorough design process. It should involve brainstorming ideas (either on paper or in digital format), incorporating standard logo elements, choosing appropriate typography, using colors correctly and—most importantly—making a few versions of the proposed logo in different fonts, colors and styles. Points of comparison will help you see which one is perfect.

In this post, we’ve compiled a list of businesses that have shared a peek inside their fascinating logo design process with the public. We hope it will get you started on your own.

The Logo Design And Development Process

The Bounty Bev Logo Design Process
“A bounty is a reward given to those who seek the best, and BountyBev brings you the reward of American Craft Beer. Our brands are steeped in history, tradition, and countless stories that should be shared with those who are worthy and paired with flavorful foods.”

Logodesignprocess23 in Creative Brainstorming: 50 Examples of The Logo Design Process

Grooveshark | Case study
“Grooveshark is an international peer-to-peer music platform, built behind a social network online. Its users are able to stream their own composed full-length songs, build playlists, share music and make friends—all for free.”

Logodesignprocess26 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design Process: Homespun Chili
“Homespun Chili uses local and international ingredients to create one-of-a-kind meat and vegetarian chili creations. The Logo was supposed to be clean, smart, quirky, mainstream with a little Martha Stewart!”

Logodesignprocess28 in Creative Brainstorming: 50 Examples of The Logo Design Process

Siah Design Rebrand Process
The Siah Design logo shows a hand with index finger showing direction with the bottom part of the hand being the pencil. The icon suggests giving direction to creativity. The significance of the finger pointing up is that it is pointing up to God giving Him any credit for his design work. Being a Christian creative director Josiah Jost is very open about his faith. Siah Design specializes in logo design, has won various awards for its work and has been published in multiple design books. Siah Design serves a local, national and international clientele.

Logodesignprocess19 in Creative Brainstorming: 50 Examples of The Logo Design Process

Artistic Expression: Logo Design From Start to Finish
Vero offers restaurants, cafés and hotels an eco-friendly bottled water alternative. The company uses the latest in microprocessor-controlled water-purification technology to purify, chill and (if needed) carbonate tap water at the point of use.

Logodesignprocess32 in Creative Brainstorming: 50 Examples of The Logo Design Process

Dache.ch Logo Design Process
Dache is the portfolio of David Pache, where he also describes his self-branding. He’s a creative consultant and brand and identity designer in Switzerland who works with clients all over the globe to design logos, websites and more.

Logodesignprocess6 in Creative Brainstorming: 50 Examples of The Logo Design Process

The Logo Development Process: New England Breeze Case Study
New England Breeze sells and installs wind turbines and solar panels for commercial and residential customers.

Logodesignprocess31 in Creative Brainstorming: 50 Examples of The Logo Design Process

Step by Step Logo Design Project
The idea behind myNiteLife is to provide an online organizer and planner for nightlife in the city of Sheffield, where bars, restaurants and clubs, among other venues, are listed, along with user reviews and ratings.

Logodesignprocess9 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design Process and Walkthrough for Vivid Ways
Vivid Ways is a new blog that focuses on personal development and colorful living. It aims to inspire and encourage readers by offering ideas and tips on how to live an amazing life.

Logodesignprocess8 in Creative Brainstorming: 50 Examples of The Logo Design Process

Giacom Brand Identity Design
Giacom is a leading provider of Internet services in the private and public sectors of the UK, Europe and beyond. Giacom’s portfolio includes scalable Internet hosting and outsourced message filtering and archiving systems.

Logodesignprocess1 in Creative Brainstorming: 50 Examples of The Logo Design Process

Henri Ehrhart Brand Identity Design
Henri Ehrhart is a French wine producer in the Alsace region. The company, in operation for more than 50 years, focuses on standard and medium-range wines distributed mainly in supermarkets. It sold 4.5 million bottles in 2008.

Logodesignprocess2 in Creative Brainstorming: 50 Examples of The Logo Design Process

VISSUMO Brand Identity Design
VISSUMO is a provider of next-generation touch technologies for industrial, architectural, retail, transportation, instructional and entertainment applications. The company has recently undergone a name change, from Infini Touch to VISSUMO, and this designer’s task was to create the new brand identity and stationery.

Logodesignprocess3 in Creative Brainstorming: 50 Examples of The Logo Design Process

Ecometrica Brand Identity Design
Ecometrica is a provider of carbon-footprint services as well as land-use–change monitoring. The company is also a source of information on business and climate change.

Logodesignprocess4 in Creative Brainstorming: 50 Examples of The Logo Design Process

Tammy Lenski Brand Identity Design
Tammy Lenski LLC is a business that deals with conflict resolution in the workplace. The new logo was expected to be simple and clean, inspiring and inviting.

Logodesignprocess5 in Creative Brainstorming: 50 Examples of The Logo Design Process

Troove Logo Design Process
Troove is a company based in Mountain View, California. It originally started out as a search engine for finding structured business applications to download, hence their name (a variation of the French word “trouve,” which means “to find”). The new logo was inspired by the phrase “finders, keepers”.

Logodesignprocess7 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design Process for Just Creative Design’s Award Winning Logo
In this article, Jacob Cass talks about how he decided on the name for his freelancing business, Just Creative Design, and the process he used to design the award-winning logo.

Logodesignprocess10 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design Case Study
JMR Insurance Group is an insurance company based in Florida. Their new logo was created around the phrase “Protecting Your World”.

Logodesignprocess11 in Creative Brainstorming: 50 Examples of The Logo Design Process

Berthier Associates Brand Identity Design
Berthier Associates is a Tokyo-based architecture firm with extensive experience in designing corporate office interiors, creating innovative workplaces, improving corporate image and fostering individual performance.

Logodesignprocess12 in Creative Brainstorming: 50 Examples of The Logo Design Process

A-List Blogging Bootcamps’ Identity Design
A-List Blogging Bootcamps is a website that offers a series of short, live online training courses for bloggers.

Logodesignprocess13 in Creative Brainstorming: 50 Examples of The Logo Design Process

Metro Aviation Logo Design Process
Metro Aviation is a helicopter transport company.

Logodesignprocess14 in Creative Brainstorming: 50 Examples of The Logo Design Process

Creating a Business Logo
UserScape is the company behind HelpSpot, a market-leading, Web-based help-desk software solution.

Logodesignprocess15 in Creative Brainstorming: 50 Examples of The Logo Design Process

Case Study: Brokers Logo Design Process
“Brokers runs stock market simulations, reality contests for college students of finance. A team of five members receives a portfolio of $1 million in virtual money to make trades in the Mexican stock market and the foreign exchange market. Principal message to be portrayed by the new logo? A fresh, impacting brand style but still giving the professional image of the event.”

Logodesignprocess16 in Creative Brainstorming: 50 Examples of The Logo Design Process

Kick’s Logo Design Process
Kick is a chic women’s boutique with throwback glam décor. It is located in a progressive and growing downtown area. It aims for the distinguished in taste and style.

Logodesignprocess17 in Creative Brainstorming: 50 Examples of The Logo Design Process

Blackberry Creek’s Logo Design Process
Blackberry Creek Community Church needed a logo…

Logodesignprocess18 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design Process For Fitucci
Fitucci is a source for custom doors and windows. It specializes in luxury residential and commercial projects and supplies state-of-the-art doors and windows.

Logodesignprocess20 in Creative Brainstorming: 50 Examples of The Logo Design Process

Sponsr Logo Design Process
Sponsr is a Web company in Orlando, Florida, that connects sponsors to event promoters, venues and producers. The visual identity was to be more end-user driven than b2b oriented.

Logodesignprocess21 in Creative Brainstorming: 50 Examples of The Logo Design Process

LatitudeSouth’s Creative Process
LatitudeSouth is a new enterprise that offers a fresh approach to outsourcing legal services. Important objective: Its New Zealand origins are important to the company, though it works with clients all over the world.

Logodesignprocess22 in Creative Brainstorming: 50 Examples of The Logo Design Process

HotBox Studios’ Logo Design Process
HotBox Studios is a company based in southeast England that specializes in creative animation and design.

Logodesignprocess24 in Creative Brainstorming: 50 Examples of The Logo Design Process

Mindberry’s Logo Design Process
Mindberry GmbH is a company based in Vienna that offers consulting and project management services. It has established the business in Austria and is looking to expand service to the rest of Europe and the US. The Brand wants to target a young/trendy audience as well as more conservative companies.

Logodesignprocess25 in Creative Brainstorming: 50 Examples of The Logo Design Process

Design Process of Undersea Productions
Undersea Productions is a team of underwater image specialists run by Josh Jensen and Liz Harlin, a husband-and-wife and video-and-photo duo with years of experience in all aspects of underwater imaging. They are truly passionate about the underwater world.

Logodesignprocess27 in Creative Brainstorming: 50 Examples of The Logo Design Process

Design Process of Dimitrovi & Co.
Founded in the early ’90s in the city of Pleven and focused on delivering heavy machinery services (excavators, bulldozers and heavy trucks), Dimitrovi & Co. is now one of the largest construction companies in north Bulgaria.

Logodesignprocess29 in Creative Brainstorming: 50 Examples of The Logo Design Process

The Logo Design Process From Start to Finish
Uke sells unique arrangements of chocolate as an alternative to gift baskets. It targets an upscale market.

Logodesignprocess30 in Creative Brainstorming: 50 Examples of The Logo Design Process

The Logo Design Process: From Concept to Completion
eLIFELIST is an online community dedicated to acknowledging and fulfilling its members’ life goals.

Logodesignprocess33 in Creative Brainstorming: 50 Examples of The Logo Design Process

Identity Design Process for Butterfield Photography
Butterfield Photography is run by Maria and Robert Butterfield, who each focus on a different area of photography: wedding and family photography, and commercial and sports photography. One of the constraints: The logo had to be usable across a broad range of businesses.

Logodesignprocess34 in Creative Brainstorming: 50 Examples of The Logo Design Process

Logo Design: From Start to Finish
DANZK is a soon-to-be-launched lifestyle blog that focuses on culture, food, art and design from Denmark. The blog aims to expose the Danish way of life to locals and foreigners who are interested in the country. It recommends and reviews Danish products related to food, design and music. Problem: Come up with ideas free of clichés!

Logodesignprocess36 in Creative Brainstorming: 50 Examples of The Logo Design Process

Process: Branding Ian Matteson
This brand and identity development project is for photographer Ian Matteson, an action and commercial-based photographer out of Salt Lake City, Utah. Along with Ian’s action and commercial work, he shoots a lot of film and fine art. The Logo was to compliment his style.

Logodesignprocess37 in Creative Brainstorming: 50 Examples of The Logo Design Process

Dezeen Watch Store
The Dezeen Watch Store identity brief was initially small in scope, but the outcome has remarkable underlying complexity. Watch Store is Dezeen’s first retail venture. It specializes in watches by famous designers and boutique brands. The outcome: a dynamic clock identity!

Logodesignprocess38 in Creative Brainstorming: 50 Examples of The Logo Design Process

Visual Identity: Sabienzia
Sabienzia is a dynamic and international enterprise. Its team has more than 20 years of experience in the area of teleworking, unified communication, virtualization, advanced analytics and green IT.

Logodesignprocess39 in Creative Brainstorming: 50 Examples of The Logo Design Process

IBBT’s Logo Redesign
The Interdisciplinary Institute for Broadband Technology, a Flemish research institute, creates highly competent human capital through interdisciplinary, demand-driven basic research that targets ICT and broadband services in collaboration with companies and government.

Logodesignprocess40 in Creative Brainstorming: 50 Examples of The Logo Design Process

Brokers Direct Identity Design
Brokers Direct is an online insurance company that offers quick, friendly and low-cost insurance for landlords, tenants, owners of vacant property, homeowners, students and owners of commercial properties.

Logodesignprocess41 in Creative Brainstorming: 50 Examples of The Logo Design Process

A Guide to Creating Professional Quality Logo Designs
Here are some general rules of logo design and guidelines we should stick to in order to make high-quality logos. The author also explores how to put them into practice to create a logo design that works in the real world.

Logodesignprocess42 in Creative Brainstorming: 50 Examples of The Logo Design Process

WebMYnd Logo Design Process
One of WebMYnd’s products is a browser plug-in that turns your Web-browsing history into an extension of your own memory. It allows you to keep a copy of everything you look at on the Web and search actual page images and text when you need to remember or find something.

Logodesignprocess43 in Creative Brainstorming: 50 Examples of The Logo Design Process

Branding Fixel
Fixel is a small design agency that puts out top-shelf work. Its team of designers, developers and creative thinkers aims to help companies unlock the potential of their brand.

Logodesignprocess44 in Creative Brainstorming: 50 Examples of The Logo Design Process

Apple & Eve Identity Development
This logo process post is for a company tantalizingly called, Apple & Eve.

Logodesignprocess45 in Creative Brainstorming: 50 Examples of The Logo Design Process

Funcrumb Logo Design Process
Funcrumb, currently under development, is an online community that helps make your social life more active and stimulating. It makes it easy to find people who share your hobbies and interests, find romantic connections or establish new business contacts.

Logodesignprocess49 in Creative Brainstorming: 50 Examples of The Logo Design Process

Green Candy’s Logo Design Process
Designing a logo is no easy task; a lot of thought is required to achieve the best possible design solution for the client. Here is the process for Green Candy.

Logodesignprocess50 in Creative Brainstorming: 50 Examples of The Logo Design Process

Articles And Resources

10 Principles of the Logo Design Masters
The veterans of the logo design industry have achieved success for a reason. Sure, it’s partially due to years of practice, blood, sweat, tears and inky fingers, but it’s mainly because they stuck to the 10 solid-gold principles of world-class logo design.

Logodesignprocess48 in Creative Brainstorming: 50 Examples of The Logo Design Process

Brand New
Brand New shares opinions about corporate and brand identity work.

Logodesignprocess47 in Creative Brainstorming: 50 Examples of The Logo Design Process

Trademarkia
Trademarkia is promoted as “the ultimate research tool for logo designers.”

Steps in a Successful Logo Design Process
To design a memorable logo, the designer progresses through various stages of listening, research, development, feedback and changes.

(rb)

January 03 2011

07:00

How To Create a Detailed Gauge Icon in Photoshop

Follow this step by step guide to creating a detailed gauge icon in Photoshop. We’ll be using various Photoshop layer styles to build up gradients and shadows to produce a detailed and realistic large scale icon, then modify and rebuild the icon into a range of typical icon sizes.

Gauge icon design

The icon we’ll be creating features a sleek and colourful gauge set in a chrome beveled frame with subtle textures and gradients. The largest and most detailed version comes in at 256x256px, then it is incrementally scaled to 128px, 64px, 48px and 32px, each becoming less detailed but modified slightly to work at the smaller sizes.

We’ll start with the largest of the icons. Draw a 256px circle with the Marquee tool on a new layer and fill it with any colour. Double click the layer to open up the layer styles options. Add a Gradient Overlay alternating between dark and light greys to give a shiny metal effect.

Add a thin 1px stroke using a mid-grey between the two tones used on the gradient. Using Photoshop layer styles throughout the creation of the icon makes it much easier to rebuild the icon at the smaller sizes as each effect can be reloaded and quickly edited via the layer styles options palette.

CMD+Click the layer’s thumbnail to load the circular selection. Right click and choose Transform Selection, then scale down the selection while holding Shift and Alt. Fill this new selection with black on a new layer.

Open up the layer styles window for this layer and add a black to dark grey vertical Gradient Overlay to form the base of the fascia.

On the same layer, add an Inner Glow and Stroke effect using light grey tones to give the impression of a chrome surround.

Load the selection by CMD+Clicking the layer thumbnail, then fill a new layer with a repeating pattern. I’m using one of the patterns from the recent pixel patterns freebie here on Line25. Change the blending mode to Multiply to render the white areas transparent then reduce the opacity to around 25%.

Load another circular selection, scale it down slightly and fill with white. Load the selection again, scale down further and delete this selection to form a white ring. Create a square selection, right click and choose Transform Selection, rotate it by 45 degrees (hold Shift) then move it downwards so the top corner is aligned with the centre of the gauge. Delete this selection from the white ring.

Load the layer styles for this shape and add a Gradient Overlay using the default rainbow color spectrum. Change the style to Angle then alter the orientation until the gradient begins with blue and ends with red. Add a subtle Inner Shadow to the top edge.

Draw a small circle in the centre of the gauge and add a metal style Gradient Overlay using grey tones. Also add a subtle Drop Shadow to add depth and a touch of realism.

Use the Polygonal Lasso tool to draw a needle shape on a layer underneath the centre pin and add a Gradient Overlay using dark and light red tones. Alter the gradient angle so it flows exactly down the centre of the needle. Give the needle a subtle Drop Shadow to give the impression that is lifted from the gauge face slightly.

The largest of the icons is now complete. All the subtle gradients help to replicate light and shade to create a more realistic icon design. Now let’s rebuild the icon into the smaller versions.

Select all layers and press CMD+T to Transform. Using the top toolbar to enter the specific dimensions of the smaller icons.

When the icon is scaled some of the effects are lost, or their size remains too large to work properly on the smaller icon. Go through the styles and remove effects that are no longer visible.

Other effects such as gradients and shadows will need adjusting to accommodate the smaller icon size. Go through and reduce the size of each of these effects.

The great thing about layer styles is the contents of the layer can be recreated entirely while keeping the same effects. The centre pin in particular becomes way too small on the tiny icons, so fill a larger circular selection on the same layer – The layer style will automatically add the same gradient and shadows.

The largest of the icons features all the textures and details, but as the icon is scaled down some of these details are lost. As the icon moves into the 48px-32px range the proportions are adjusted so the design is still recognisable, this includes a larger centre pin and needle as well as replacing the gradients of the chrome surround with a plain grey stroke.

September 20 2010

07:00

How To Create a Detailed Briefcase Icon in Photoshop

Follow this step by step guide to create a detailed briefcase icon in Photoshop. We’ll build the rough outline with basic shapes, then add depth and definition with various Photoshop layer styles such as Inner Glow and Stroke. To really bring the icon to life we’ll use real photographic textures to give a tactile leather feel to the icon.

Briefcase icon

The icon we’ll be building has that crisp digital appearance popular in icons on the web. The sharp lines really help define what the icon actually depicts, which is important when it’s used at small scales in a web design or web app. What really brings the icon to life is the subtle gradients and textures. These additions don’t stand out when viewing the icon at a whole, but without them the design would appear flat and lifeless. Let’s go through the step by step process of how it’s made in Photoshop.

Many icons nowadays come in a huge range of sizes, anything from 16px right up to 512px. We’ll create a document at 256x256px to build the largest version of the icon.

Start by drawing a Rounded Rectangle onto the canvas. Change the corner radius to 10px and ensure the method is set to Fill Pixels by checking the third icon in the options bar at the top of the screen. Double click the layer to open up the layer styles options. Add a Gradient Overlay spanning from dark to light brown.

Next, add an Inner Glow. Alter the settings so the Blend Mode is Normal, Opacity is 100%, Colour is a lighter brown, Choke is 100% and the size is around 3px.

Finally, add a Stroke using a Size of 2px, aligned to the Inside and a darker brown tone as the fill colour.

Open up a leather texture and scale it down to sit over the icon. CMD-Click (CTRL-Click for Windows) on the thumbnail of the icon layer to load the selection, then use the shortcut CMD-Shift-I to inverse the selection. Delete out the excess to trim down the texture to the confines of the icon.

Change the blending mode of the texture to Soft Light to allow the brown gradient to show through, then go to Filer > Sharpen > Sharpen to bring out the details of the texture.

On a new layer draw another rounded rectangle, this time with a 5px corner radius. Make a selection with the marquee tool and trim the rectangle down to leave a straight bottom edge.

Right click on the layer containing the lower portion of the briefcase and select Copy Layer Style. Then right click on this new rectangle and select Paste Layer Style to duplicate the effects.

Paste in another copy of the leather texture, scale down and trim to size to match the upper portion of the briefcase to the lower half.

Draw a thin rectangle in the centre to represent a buckle strap. Add the same layer style, but also give it a subtle Drop Shadow to add a touch more depth.

Use the marquee tool to draw a simple square. Set the Eraser tool to Pencil mode at 1px and clip the lower two corners, but leave a straight top edge.

Double click this layer and begin adding similar layer styles to build up the effect of a metal lock. Use similar Inner Glow, Stroke and Gradient Overlay options but with grey tones as opposed to brown.

Draw a few extra details on a new layer using a mixture of the Pencil tool and layer style effects to create a keyhole.

Add a simple and subtle texture to the lock mechanism by filling a new layer with noise (Filter > Noise > Add Noise). Set this layer to Soft Light and reduce the opacity to around 50%.

Use the same metal layer style to create two handle mounts on the upper edge of the briefcase. Start with basic squares, notch the corners with a 1px Eraser, then trim them down to fit flush with the briefcase lid.

To create a handle, draw and fill an ellipse on a new layer. Then draw a slightly smaller ellipse selection and delete out the centre. Use rectangular marquee selections to trim down any excess to leave a semi-circular handle between the two mounts.

To finish the icon off, add a subtle shadow. Begin with a tiny radial gradient then squash it vertically.

Make a selection across half of the radial gradient and move this into position on the opposite side. Fill out the centre area by making a tiny selection of the gradient, then transform and stretch it horizontally.

Briefcase icon

Toggle off the background layer and export the design as a PNG-24 with transparency making it ready for use in your next web project. All that’s left is to create the design in the various other icon sizes. Simply scaling down the icon will blur the lines and lose the detail, so the best option is to follow the same steps but on a smaller canvas size.

Download the PSD icon file

August 11 2010

12:50

Designing the Campaign Monitor iOS icons

Jesse Dodds gives us a peek inside his creative process of Campaign Monitor‘s icons and discusses the value of sketching and pushing personal boundaries. Great read and icons.

May 26 2010

10:00

Designing for iPhone: The Ultimate Roundup of Resources

For most Apple lovers, having an iPhone or iPod Touch can be very useful and exciting at the same time. You can transfer your music playlist, take pictures or record a video, or keep e-books to read when you’re away from your Mac. Like other iPhone or iPod users, we easily get bored with how “clean” the iPhone theme is which came with it. Of course it is easy to find iPhone themes just by googling it, but have you ever think of creating your own iPhone theme, changing the icons, or design the wallpaper screen yourself?

Below is the round-up collection for iPhone related designs that will give your iPhone the new look and some of them even guide you on how to create your own iPhone theme.

Tutorials Wrap

Make And Use Themes With WinterBoard

This tutorial is simply organized to guide you step by step in creating your own iPhone theme. Whether you want to partially create the new theme or entirely create the new look than the usual theme, you can play around with the theme with this guidance.

Design Your iPhone Widgets

If you like the dashboard panel on your iPhone or want to slightly change it and have your own designed icon on it, this is the right tutorial for you.

iPhone Theme Behind The Making

For some of you who doesn’t want to change your iPhone and design the theme from scratch, say you only want to change the icons, or change the SMS background, just for few simple changes. This will tell you how.

PSD Files Resources

iPhone Icon Style .psd Kit

iPhone Style Buttons Modified

App Icon Template Kit

Upojenie PSD

iPhone GUI

iPhone Gradation Set

iPhone 3G-3GS .psd

Apple iPhone 4G .psd

iPhone Icon Designs

Keyboard For iPhone

iPhone Icons

Upojenie iPhone Icons

40 Beautiful MAC OS X and iPhone Inspired Icon Sets

35 Free Icon Sets for your iPhone – Pimp it Up!

30 Free iPhone Icon Sets

50+ Free Hand-picked Creative and Amazing iPhone Icon Sets

iPhone Wallpaper Designs

Extraverage iPhone-Wallpapers

iPhone Wallpack Vol 1

iTunes Store Art For iPhone

30 Free iPhone Wallpapers

TokyoCandies iPhone Wallpapers

Filter017 iPhone Wallpapers

50 iPhone Wallpapers for Design Lovers

100 (Really) Beautiful iPhone Wallpapers

SnowCover Designs

While listening to your music on your iPhone, you will notice how standard is the look from the lockscreen. But, do you know that you can change and customize that look with SnowCover? It is an extension to display the cover-art on the lockscreen in a different way. You can use your own background and Vinyl-Cover / CD-Case images. Credits to Thyraz for creating the vinyl cover-artwork. Be creative and customize your own or see samples below.




Selective iPhone Themes

eZuneHD

Channel Zero

Teknologik iPhone Theme

Ocean and Vodka

Adeline

Protek

Labeled Theme for iPhone

Whitoken iPhone Theme

Milk iPhone

Extra

iPhone Skin Designs

Make your iPhone skin looked different from the other. Get awesome designs for your iPhone skins or create your own onn GelaSkins, Infectious, or MusicSkins.

iPhone Design Tools

If you decide to take iPhone designs seriously, features which is offered by iPhone Designs Tools would be very useful for you. From iPhone templates, sharp vector graphics, to Apple guidelines can be found here. All packed depends on your need.

May 20 2010

21:44

What the Twitter for iPhone icon should have been

Gerardo Diaz posted his rendition of what the Twitter (aka Tweetie 3) for iPhone should have been on Dribbble — and I couldn’t agree more.

May 15 2010

11:00

Draw Golden Pen and Envelope Icon in Photoshop

In this tutorial we will use Photoshop to create a fancy looking golden pen and envelope icon. We will be using lots of shape and layer style to achieve a realistic look. Before we start, take a look at the final image below.

If you like outcome be sure to keep reading – you will learn a lot of advanced and interesting features to build these two icons.

Final preview

tutorial photoshop draw pen envelope

Step 1

Start by creating a new group, named pen. We’ll put everything there to keep layers organized.

Activate rectangle tool and draw a rectangle. Click top, right, and left middle to add points. Move some points to create pen’s base. Use image below for reference.

tutorial photoshop draw pen and envelope

Step 2

Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 4

Select path we just created, copy it by pressing  - CTRL+C.

In Path panels, create new path and paste (ctrl+V). Modify the path to make it longer. See picture below (#2). Change path to selection by ctrl+click the path. In Layers panel create new group and click Add Layer Mask icon. Every details on the pen will be placed inside this group.

tutorial photoshop draw pen and envelope

Step 5

Draw a small rectangle on top of the pen. Use color #906a00. Press ctrl+T for transformation, right click and choose warp. In the option bar select Warp: Arch with blend setting 30%.

tutorial photoshop draw pen and envelope

Step 6

Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 7

Using similar steps above, create another shape on the pen. Use layer styles shown below.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 8

Using an ellipse tool create an ellipse. Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 9

Zoom closer to see more detail. Create new layer. Create selection with polygonal lasso for highlight. Fill the selection with white (Edit > Fill). Remove selection ( ctrl+D ) then add Gaussian Blur (Filter > Blur > Gaussian Blur). Make the highlight more subtle by lowering its opacity to 80%.

tutorial photoshop draw pen and envelope

Step 10

Create shape shown below. Change its fill layer to 0% and add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 11

Duplicate shape a few times and place it below.

tutorial photoshop draw pen and envelope

Step 12

Create new layer. Using soft brush, draw white line along the pen’s body. Add Gaussian Blur to soften it. Change its opacity to 65%. Erase both ends using soft eraser. Duplicate highlight layer to make it stronger.

tutorial photoshop draw pen and envelope

Step 13

The gold metal is more reflexive and need to cast more lights. Create new layer. paint it with white, add Gaussian blur and change its opacity to 50%.

tutorial photoshop draw pen and envelope

Step 14

Now, we’ll add marble texture to the pen. Add another layer above all layers. Press D button to change foreground and background color to black and white. Click Filter > Render > Clouds then Filter > Render > Difference Clouds. Do this a few times until you have satisfying result. Change blend mode to Overlay and opacity to 40%.

tutorial photoshop draw pen and envelope

Step 15

Use pen tool and draw pen’s handle. Add Inner shadow.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 16

Draw small circle under the pens handle. Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 17

Draw small circle and put it under all the other layers.

.tutorial photoshop draw pen and envelope

Step 18

Draw small rectangle to connect pen and its handle.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 19

Draw pen’s tip underneath the pen’s body. Add some layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 20

We’re done with the pen. Right click pen’s group and choose Convert to Smart Object.

Next, we’ll focus on the envelope so click the eye icon to hide the pen.

tutorial photoshop draw pen and envelope

Step 21

Create new group named envelope. We’ll put every shapes here.

Activate rounded rectangle tool. Choose radius 3px in the option bar. Draw a rectangle on the stage. Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 22

Draw another shape like shown below. Add these layer styles.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 23

Draw similar shape, this time on top. Use layer styles shown below.

tutorial photoshop draw pen and envelope

tutorial photoshop draw pen and envelope

Step 24

Copy the path, and transform it until it looks like this.

tutorial photoshop draw pen and envelope

Step 25

Ctrl+click on path to change it to selection. Create new layer, fill it with black.

tutorial photoshop draw pen and envelope

Step 26

Remove selection ( ctrl+D ). Add Gaussian Blur.

tutorial photoshop draw pen and envelope

Step 27

Change its opacity to 40% and erase shadow outside the envelope using soft brushed eraser.

tutorial photoshop draw pen and envelope

Step 28

Draw a rectangle shape. Press ctrl+T, right click and choose Warp, then move its top side. Duplicate rectangle by pressing ctrl+alt+T

and right arrow a few times. Press ctrl+shift+alt+T few time to repeat the duplication.

tutorial photoshop draw pen and envelope

Step 29

Duplicate layer ( ctrl+J ) and change its color to #f1b6c1.

tutorial photoshop draw pen and envelope

Step 30

Select rectangle number 1, 3, 5, 7, … and delete it. This way, we’ll alternating red and blue shape.

tutorial photoshop draw pen and envelope

Step 31

Select both red and blue shape layers, alt+drag to duplicate it. Put it in every side of the envelope.

tutorial photoshop draw pen and envelope

Step 32

Remove unneeded shape by adding layer mask and paint it with black.

tutorial photoshop draw pen and envelope

Step 33

Okay, we’re done. Right click envelope group and choose Convert to Smart Object. Press ctrl+T and rotate the envelope.

tutorial photoshop draw pen and envelope

Step 34

Unhide the pen by clicking its eye icon. Ctrl+click pen to create selection base on its shape. Create new layer and fill it with black. Press ctrl+T, move pivot point to bottom left corner and start dragging to rotate it.

tutorial photoshop draw pen and envelope

Step 35

Click Filter > Blur > Gaussian Blur. Add layer mask and give it a white to black gradient. As you can see below, we have just creating its shadow.

tutorial photoshop draw pen and envelope

Step 36

Oops, I forgot the envelope’s shadow. This one is easy, just add drop shadow layer style to the envelope layer.

tutorial photoshop draw pen and envelope

Final Result

We’re done. I hope you like the result and enjoy doing this tutorial.

tutorial photoshop draw pen envelope

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl