| Photoshop Tutorials » Logo » Icon |
Ultimately the creation of each icon is inheretly different. To say that I haven't gone into detail is a mild understatement. There are quite alot of aspects which i haven't covered, but I hope that i've shed some light on the process of making an Icon.
This tutorial shows how to simply create the Google Blogger icon in Web 2.0 style using Photoshop, easy to follow and understand and can be used on any image/icon.
It would be cool to see what you come up with so feel free to upload them to the Photoshop Tutorials Flickr Group and leave me a comment to say when you have uploaded one so people can comment on them,
Fresh Navigation Tabs. Create smooth spherical icons that can be used on anywhere from websites to local desktop. These icons are based lightly on web 2.0 style but also keep a stylish feeling to them, keeping the appeal.
this site is okay. i mean, it's helpful, but i was ;looking 4 something that could help me make a free customizable, one of a king website logo/icon quick and easy.
Title: This Photoshop tutorial teaches you to create a shoe icon Description: This tutorial clearly demonstrates the use of Pen Tool. At the end of this tutorial you will be able to master the pen tool and create the custom shapes of your own like the one shown below, rather than hunting for them on the net.
A Dictionary Every Icon is communicating a metaphor and because you are appealing to a wide audience, the accepted meaning for a term is very important. So the inclusion of a Dictionary with 10.4 Tiger was a boon for anyone who has ever tried to sum up �vertically integrated certification process� in a 16x16 square. This process may sound a bit silly but every Icon needs to rely on a strong metaphor which is understood by the widest audience. Simplicity always wins out so in this case we will produce a key which looks like it attaches to a chain. Sketching Then the process of swirling out your ideas begins. It doesn't matter if the sketch looks like monotone roadkill, you are just throwing ideas down onto paper at the moment. If any aspiring filmmakers ever needed encouragement they should look at the Taxi Driver storyboards of Martin Scorcese. The man has incredible talent in filmaking but would be thrown out of kindergarden art class. Once you have placed some ideas down on paper you can scan them in and dive into your image editor of choice. I'm using Photoshop CS and IconBuilder Pro for this one. The method I use to create icons could be wildly different from someone else so go with whatever method feels comfortable. The end result will be a series of scaled resources that the OS will use in different views. Blocking In Colours From my sketch ideas I'm going to take the angled key with a button for operation at a distance. The icon is going to be built using vector shapes and layer styles so there is no need to build a huge source file and scale down as these will scale up quite well. First we draw out the base layer with the pen tool. It's usually helpful to have the sketch on a layer at the top set to overlay mode as you can then check you are following the rough idea. When we have the base layer laid down we can then start to fill in certain shapes with layer styles such as gradients and inner glows to give definition. The pattern overlay tool can be quite useful to give some texture in certain areas. Highlights And Shadows When we have filled in the base layers with colour and some effect we can start building up highlight layers for each of these examples. The main concern with the highlight layers is to reinforce the overall shape of the icon, be it a sphere, pipe, or circle. So on this Icon, we use a lighter shade of grey to build up the curve of the rubber. The surface would be quite dull so the edges and highlights would all be quite soft. Las...
Although I mostly prefer to make artistic PSDs, we can't ignore the big demand in web 2.0 design elements, be it for software or website graphics. So, I decided to make a mini-icons set with animals. These icons cover the majority of web design trends, including rounded corners, juicy colours combination, folded edge, very light gradients on the icon and text, combination of bold and thin text in one line. I hope you will enjoy this file and as usual � feedback is welcome.
Axialis Iconworkshop: this is the best software you may use to create and manage icons.It's able to create icons from image fies and pngs from icons, convert mac icons to windows icons and create icl files (icon library). Iconworkshop also installs a photoshop plugin that permits you to transfer psd's from photoshop directly to iconworkshop without saving the psd files firstly, then scales them and create the icon in one click.
blog (11) css (1) font (2) freebies (8) graphic (26) illustrator (12) inspiration (17) photoshop (26) projects (2) shop (1) t-shirt (3) tutorials (29)
Copyright � 2007 - Web Design Blog is powered by Garcya Design | Copyright Policy | Privacy Policy | Theme created by Design Disease
Handycons is a free, hand drawn social media icon set that contains 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon, of course. All icons are available in four sizes: 16x16, 24x24, 32x32 and 48x48 pixels.
Hey Roberto. Send us a note with which icons you want to license and also how you plan on using them. You can do so, here: http://www.guifx.com/support
High Quality Adobe Photoshop Tutorials | Omar Salas Blog - All the crazy stuff in the Internet � February 7, 2008 @ 11:13 pm
Kasbersky is a great tool to protect your computer from Virus and Intruder. Today we will guide you how to make its icon Glossy and 2.0 style
Start making the basic shapes of the iTune icon. If you need help on how to trace from an image, visit my Tracing Photo tutorial.
Tags: 3-d pyramid, 3-dimensional pyramid, Design, design icon, draw, draw a pyramid, drawing, drawing tutorial, Photoshop tutorial, pyramid, pyramid icon, pyramid image, three-dimensional pyramid
Today we are glad to release Office Mouse Icons Set, a set of 15 unique icons, in .png and in the resolution 128�128px. The icons are designed by Niki Brown, especially for Smashing Magazine and its readers.
Today, I'm proud to present you my first icon pack: Social Post Stamps. Social Post Stamps is a social media icon set with 13 different icons all placed on post stamps.
[...] writing the Photoshop tutorial on Creating Custom RSS Feed Icons, I decided that I should put together a set of icons based on the tutorial for my readers to [...]
Start with a large black canvas, in your layers window make a new layer set and name it Computer Screen. Choose your rounded rectangle tool with a 4 px radius, in a new layer draw a 139 x 89 pixels, white rounded rectangle.
STEP 1: Start with a large black canvas, in your layers window make a new layer set and name it Calendar Icon. Create a new layer. Choose your rectangle tool and draw a 55 x 52 pixels, #C00000 colored rectangle.
Another major issue that contributes to off-looking icons is color. Make sure you pick colors that either go with the rest of the site (in the case of a website icon) or colors that don't clash with the operating system / other icons (in the case of an application icon). A prime example of clashing colors is my black screenshade icon. It looks OK by itself, but when you plop it in the dock with all of the other icons, it just looks out of place.
PSVibes is pleased to annouce the release of a set of 6 high quality christmas/holiday themed icons. They come in PNG format, in sizes of 512px, 256px, 128px, and 64px.
I really like the OS X Icon scene out there. There are some really unique and original art out there that are made from icons. Today, I've highlighted some of the best OS X icons out there (in no particular order). All the artwork are credited to their respective owners. These site offer free icons to download so you can use these on your computer and enjoy!
Let's start out by creating a new file. I used a 400x200 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer set and name it 'Date Icon'.
In this tutorial, we will learn howto create a flying mail icon in Photoshop. You will also learn how to customize the autoshapes and use them according to need. Final output can be seen below:
If you need to show some compressed files as icon on your website you can try this tutorial which creates a Winzip File Compress Icon. If you don't use winzip you can use another file compressing tool icon like winrar or any other file compressing utility.
[...] Team Tutorials » Adobe Photoshop CS3 Style Icons Tutorial Categories. Hardware Guides · Other Tutorials · Photoshop Tutorials · Basics · Logo Tutorials · Web Graphics · Web Layouts · Programming Tutorials � [...]
Now we will create a couple additonal anchor points to the line. Select the "Add Anchor Point Tool" and place a new anchor on the top and bottom, centered as illustrated below.
Have you ever seen the little icons appearing in the address bar at the top of your browser? Maybe you've seen it in your Favorites? Would you like to learn how to create one?
3. Now make a new layer and name it reflection, then hold down ctrl and click the shape layer from before to load the selection, with the elliptical selection tool and selection mode called intersect with selection drag and select as shown below.
� 2006-2008 pixelapex.net. All Rights Reserved. Home | Tutorials | Gallery | Community | Submit Tutorials | Hobbies | Media | Links | Search | Contact | Faqs / Help
Design a custom RSS feed button using Adobe Photoshop. The technique allows for easy color changes so that the RSS button will match your site or application style. Here are a few RSS icon variations on orange, blue, green, and red buttons against black and white backgrounds:
18. This is how the final icon should look. You can play with it more and customize it how you want or change the colors and make the other Creative Suite icons.
Now we are almost done, we only need the final touch, but its one of the most important things, the glossy effect.
13. Now drag in the new reflection layer to the folder containing the other shape layers. Go to edit -> transform -> perspective and drag the handles to give the image an perspective angle.
This photoshop tutorials has effects which you can use to create an image or a icon for a audio related website. Or you create image for speaker if your website design requires that.
If you are looking for an icon for a shopping webite you may spend sometime learning this adobe tutorial and acquire skill to design a of Colorful shopping Bag icon.
Esta muy chevere el tutorial pero en que formato se debe guardar para poderlo usar como icono, eso me tiene dando vueltas. Gracias por la ayudita
Click on auto shapes and select rectangle tool to draw this shape. Color is not important here, as we change it very soon :) Go to Edit>Transform>Skew. Adjust the points to have this shape. Now, right click on its laye name. Select Blending options and select gradient overlay with these settings :-
Mail (will not be published) (required)
5. Let me use the Doodge tool now to give some variation. Select Dodge tool (Brush size 20, Range is midtones, Exposure is 47 ). I have tried to show what I am doing with dodge tool, see red arrows.
[21]- Now look at your right, you will see the layer window. Here in the Layer window create a new Layer by clicking on the icon which is encircled with Red. This layer will be named as Layer2 by default
[1]-First of all open new document of Custom size like Height & Width 400�400 pixels or choose whatever are your needs and then Resolution 72 and Mode RGB Color.
First, start with creating a new document with any size you want (I used 200*200) and fill it with a dark color or gradient. Then ewe are just going to create a square with the rectangular marquee tool and fill it with any color. It doesn't matter cause we are going to add gradient overlay. Now you should have something that look like this:
Advertise with us
first of all thanks for visiting this tutorial and giving me feedback
Advertise with us
I've create an easy to use Photoshop Template just for mapping out each icon size. This way you don't have to bother creating multiple size documents and what not. Simply drag and drop the icon layer(s) onto the template and the duplicate and resize according to each size on the template. At this time you may want to sharpen icons at smaller sizes to give them more definition. Remember: you can use Fade controls (located under the Edit menu) after using the sharpen filter.
Too lazy to do this tutorial? You can download my free mini icon set.
one more important thing you should do- paint it in #E0E0E0.
So, let's start!
Lets create a clean icon displaying e to indicate .html files available for download from your website.
Advertise with us
Hope you enjoy the tutorial!
1. Begin with a square - any size will do. Use the rectangular marquee tool (M) & hold down shift to constrain the dimensions. I filled it with #ff0000.
At first I thought I would go with a 2-d look but after drawing this I felt I could do more.
You can use the pen tool to create the shape or you can just download the shape from my webpage.
Copyright DesignTutorials.info 2005 | Contact | Privacy Policy
5. Now we are going to add some color. Verify that Colored Circle is the current layer . Using the Rectangular Marquee Tool fill in each quadrant as shown below. Next Ctrl+Click on the layer containing the original circle. Then go to Select > Inverse (Shift+Ctrl+I). Finally press the delete or go to Edit > Cut. Your icon should now look the image below on the right. We will no longer need the layer containing the old blue circle, so you may delete that layer.
[1]-First of all Open New Document of Custom Size, Height & Width 400 x 400 pixels,Resolution 72 & Mode RGB Color
The icon were going to be creating is all done using shape layers which means you can resize up and down without loss of quality. Were going to start off with a fairly big canvas so create a new document 600 x 600 pixels, fill your background with any color, ive opted for a nice blue gradient background. Select the ellipse tool, in the top toolbar change the tool settings to shape layers.
[7]- Fill the any nice color with the help of the Gradient toolhere I have felt color #F8D095, #E07A22. now press the Ctrl+D to deselect
In this lesson we will study to unite some photos which do not concern to each other, in to one beautiful collage. I didn’t photograph, I just found them in the Internet. The basic theme of this collage is Opposite.
[1] Take a new file of 300 pixels by 300 pixels and choose resolution of 72 dpi in the RGB mode.
Learn how to make a free Website Graphics-Icon if you are in the process of making a free website design and need some free images for your website like website banner, logos, layout ideas and content boxes.
Doing something for the music industry or thinking of how to create a music related icon? This tutorial will teach how to create a cool and nice headphone graphic which can be use as an icon as well.
Create a new document 400�400 pixels, fill your background with the color #212529. Select the rectangular marquee tool and draw out a rectangle Fill with the color white, then add these layer styles.
[2] Now take the Shape Tool select this one.
[1] Take a new file of 40 pixels, 400 pixels, of resolution 72 dpi in the RGB mode.
[1]-First of all Open New Document of Custom Size,Height & Width 400�500 pixels,Resolution 72 & Mode RGB Color
Let's see, how to create.
Let's see, how to create.
[1]-First of all Open New Document of Custom size,Height & Width 400�400 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom size,Height & Width 400�400 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom size,Height & Width 400�400 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom size,Height & Width 330�330 pixels,Resolution 72 & Mode RGB Color
[1] Take a new file of 450 pixels, 500 pixels, of resolution 72 dpi in the RGB mode.
[1]-First of all Open New Document of Custom Size,Height & Width 450�500 pixels, Resolution 72 & Mode RGB Color
[1] Take a new file of 400 pixels, 300 pixels, of resolution 72 dpi in the RGB mode.
[1]-First of all Open New Document of Custom size,Height & width 330�380 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom Size,Height & Width 500�300 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom size,Height & Width 300�400 pixels,Resolution 72 & Mode RGB Color
[1]-First of all Open New Document of Custom Size,Height & Width 500�400 pixels,Resolution 72 & Mode RGB Color
[1] Take a new file of 300 pixels, 300 pixels, of resolution 72 dpi in the RGB mode.
If you're lazy and would rather get your grubby hands on the finished product, I have posted up the PSD and various PNG RSS icons for you to download freely. Just check out this post!
In this lesson I will explain to you some main principles of creation of a collage, as �The Arch�. We will use photos which we have found in the Internet. Resources: Planet: http://absolutehalo.deviantart.com/
This lesson will show to you as by means of simple actions to create a beautiful and interesting collage.
In this lesson I will describe the process of creation of water-lily. The lesson can be divided into few parts, but as they will closely interlace between themselves, I didn't do it.
[1] Take a new file of 600 pixels by 70 pixels then choose resolution 72 dpi in the RGB mode.
[1] Take a new file of 400 pixels by 300 pixels and as usual a of resolution 72 dpi in the RGB mode.
YOU CAN DOWNLOAD the PSD/ICONS for this tutorial for FREEEEE using the download button above. Right lets get started create a new document im using 600�200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below.
[1]-First of all Open New Document of Custom size,Height & Width 400�500 pixels,Resolution 72 & Mode RGB Color
In this lesson I'll tell in details how to draw burning candle. The flame is in general complex enough theme, and there is a set of ways to draw it. I'll show you one of them which I use. Step 1. No effects will rescue figure if it is wrong for constructing. It is better to give to this step enough attention because to correct a mistake will be then practically impossible. But first of all - color of a background. I choose dark-brown. Then we take a brush, and on a separate layer draw auxiliary lines. They will help to represent a candle correctly.
The Tools palette layout contains 60 separate tools. Double-clicking any tool will automatically display the Tool options palette and from there you can select individual options for that tool.
We continuing our look at the Layer Style window, especially how Outer and Inner Glow work.
Step 1 – The Inevitable New Document Open photoshop and create a new document, mine is 1000�1000px with a white background.
Create a new document 450�450 pixels, Fill your background with the color #bec0bf. Select the ellliptical marquee tool and draw a white circle towards the bottom of your canvas.
Photoshop is a powerful tool for creating illustrations, here I will show you how using the Cutout filter to make simple illustrations from your photos.
BRUSHES (.abr) WINDOWS: C:\Program Files\Adobe\Photoshop (version)\Presets\Brushes\ MAC: /Users/(username)/Library/Application Support/Adobe/Adobe Photoshop (version)/Presets/Brushes
I started off with a 200X200px canvas because i'm going to make this icon large just so you can see all the detail of it.
Lets get started create a new document 496 x 496 pixels. Use your prefered background color, ive choses a nice light blue gradient background.
Create a new document any size with any background color, select the rounded rectangle change the radius to 10 pixels.
Once you've filled the circle change the fill opacity to 50%.
If you want to look at them you can find them on google image search.
Technique - this option lets you tweak the method that Photoshop uses when forming the beveling effect.
[1] Take a new file of 350 pixels, 350 pixels, of resolution 72 dpi in the RGB mode.
Adobe Photoshop includes Layer Styles, a number of automated effects that you can apply to layers, including drop shadows, glows, beveling, and embossing, as well as a color fill effect. Layer styles allow you to edit applied effects dynamically without having to create a smart object version of the image layer first. This means that you can apply editable effects to a selected image, shape, or type layer without permanently altering any pixels.
[1]-First of all Open New Document of Custom size,Height & Width 400�400 pixels,Resolution 72 & Mode RGB Color
[1] Take a new file of 500 pixels, 500 pixels, of resolution 72 dpi in the RGB mode.
The way that layers interact with other layers in the stack is determined by the blending mode of the upper layer. By default the layer???s mode is set to Normal, which causes the picture content on the upper layer to obscure the picture parts beneath, but Photoshop has many other ways to control how these pixels interact. Called blend modes, the different options provide a variety of ways to control the mixing, blending and general interaction of the layer content.
Fill the background of your work space with white #ffffff by selecting the paint bucket tool
In this tutorial, I will teach you how to create the book above.
[1] Take a new file of 500 pixels, 350 pixels, of resolution 72 dpi in the RGB mode.
There are a lot of methods for imitating different photo effects, but today I???ll tell you how is it possible to tone the picture into sepia and then process it in a way as if it is taken with infrared filter. Sepia toning consists of processing the colored or black and white picture with chemical influence and getting smooth yellow, brown or red nuances. This process in Photoshop may be got, applying Duotone Mode and by the way it is possible to use any other color instead of brown one.
Hi JScud Glad i could be of help.
[1] Take a new file of 500 pixels, 400 pixels, of resolution 72 dpi in the RGB mode.
[1] Take a new file of 400 pixels, 400 pixels, of resolution 72 dpi in the RGB mode.
[1] Take a new file of 300 pixels,400 pixels, of resolution 72 dpi in the RGB mode.
Final Result of Eco friendly Icon
Preview full size icon
Step 1 ??? New Document
Create a download icon in photoshop, to replace your old download button on your website.
Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders
[1] Take a new file of 400 pixels, 500 pixels, of resolution 72 dpi in the RGB mode.
In this tutorial, I will show you how to create a simple home icon. The final result will look like this:
Step 2. Zoom in to 200% magnification and then continue to create the shape below.
background content box
Smashing Magazine has a great summary of the Apple Human Interface guidelines on Icon Design. The section on Realism in Aqua makes some good points about the limitations of realism in icon design and points out when symbolism is necessary. This section discusses the issues at odds between realism and simplicity in icon design.
Create a 35?5 pixel file. Create a new layer by pressing shift+control+n
Go to tools panel > select direct selection tool > select the point and pan down as shown. Then we need to blur it, to do that, go to filter > blur > box blur > set the radius to 12 pixel. Then press ok.
[1] Take a new file of 500 pixels, 500 pixels, of resolution 72 dpi in the RGB mode.
Want to learn how to make your own Adobe Photoshop CS3 Replica Icon? Too bad!! This is a tutorial on how you can make replica Adobe Photoshop CS3 Icon, however you can use this to help you make your own custom icons.
1. Using the Custom Shape Tool while pressing Shift make this shape:
[1]-First of all Open New Document of Custom size,height & Width 400�400 pixels,Resolution 72 & mode RGB color
This Photoshop tutorial teaches you to create a custom search Icon for your web pages. The dimensions used in this tutorial is : width 270px, height 290px and resolution 72px. This tutorial clearly demonstrates the use of Marque Tool, Gradient Tool, Pen Tool etc. You will also learn the techiniques to create Magnifying Glass and scan lines. At the end of this tutorial you will be able to create the custom icons of your own, rather than hunting for them in the net.
Step1: Create a new image 800 x 600 and set the Background Contents to Transparent as shown below.
