Icons
Best Of 2011: 40 Detailed Photoshop Icon Design Tutorials
Icons are an imperative fraction of web design. In a lot of cases you can pay money for icons or download free ones, however every now and then you may require generating custom icons to acquire exactly what you want. Luckily, there are loads of tutorials out there that get through the process of designing an icon.
In today’s post, we have composed an extremely valuable list of Adobe Photoshop icon design tutorials that were created in 2011. These tutorials will teach you the techniques you will require for designing your own icons by means of Photoshop chiefly.
These tutorials will categorically help you accomplish your goals if you have a craze for icon design or are a GUI designer on the hunt for some tips. Enjoy and stay creative!
Draw a Realistic Steam Iron in Photoshop
This Photoshop tutorial will show you how to create a realistic Steam Iron from scratch. You’ll learn how to create realistic shadows & highlights on plastic and metal.
Create a Detailed Camera Icon in Photoshop
In this tutorial we will demonstrate how to create a detailed Fuji X100 camera icon in Photoshop. Let’s get started!
How To Create A Green Button Isolated
In this tutorial we will demonstrate how to create a green button isolated using layer styles, dodge and burn Tool. Let’s get started!
In this tutorial artist will be walking you through the process of creating a industrial style folder icon. Lets get going…
Create a Star Trek Style Communicator in Photoshop
In this tutorial, we will draw a retro Star Trek style communicator, a voice communication device used in the original Star Trek series. We will combine layer styles and lots of manual drawing. So, prepare your Wacom to boldly go where no Photoshop tutorial has gone before.
Learn To Create A Padlock Icon In Adobe Photoshop
Ever wanted to create a realistic padlock icon in adobe photoshop? Well you’ve come to the right place. In this tutorial artist will take you step-by-step in creating the best looking lock icon you’ve ever seen.
Design a Detailed Audio Receiver Icon in Photoshop
In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!
Learn To Create A Glowing Google Plus Icon/Illustration
Google Plus is making its presence all over the internet, so in today’s tutorial I’ll be showing you how to create your very own glowing google plus icon/illustration.
Create a Sweet Donut Icon in Photoshop from Scratch
In this icon design tutorial we will learn how to make a sweet and tasty donut icon from an initial sketch. So let’s begin, and remember: don’t try to bite the screen!
How to Draw a Shopping Bag Icon in Photoshop
In this tutorial you will learn how to drawn a red shopping bag icon. This tutorial will cover the basic techniques of drawing such as creating the shape, shading, and adding shadows.
How To Draw a Vintage Polaroid Camera Icon
In this tutorial, we will create a Polaroid camera icon. We will use lots of layer styles and draw manually with the brush tool to achieve a realistic appearance. Let’s get started!
Create a Leatherback Book Icon in Photoshop
Learn how to create this leatherback book design in Photoshop. This tutorial will show you how to draw a book and apply textures and layer styles.
Draw a Roll of Camera Film in Photoshop
Icon design can be a lot of fun. In this tutorial we will demonstrate how to create a roll of camera film using Photoshop. Let’s get started!
How To Design a Realistic Takeout Coffee Icon
In this tutorial we’re going to show you how to design an Incredibly Detailed Drinks Icon. We’ll walk you through the process of creating the takeout coffee cup from start to finish, exploring a wide variety of techniques in Photoshop that can be applied to almost any type of design and drawing.
Create a Download Folder Icon in Photoshop
Icons are an important part of most interactive and web design. While icons are small, they can often be challenging to create. In today’s tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!
Stock royalty vector digital clock
In this tutorial we will illustration of digital clock using Pen tool, dodge and burn Tool. Let’s get started!
Create an Open Book Icon In Photoshop
In this tutorial we will demonstrate how to create an open book icon in Photoshop. Let’s get started!
Create a Detailed Vintage TV from Scratch in Photoshop
In today’s tutorial, artist will show you how to create a detailed vintage TV from scratch using Photoshop’s vector editing capabilities. The detailed step by step guide will help you to understand the process of its creation.
In this tutorial we will demonstrate how to create a packing box using layer styles, dodge and burn Tool. Let’s get started!
Create a Futuristic Bicycle Icon in Photoshop
It’s fun and challenging to create items from scratch in Photoshop. In this tutorial we will create a futuristic bicycle icon from scratch using some basic Photoshop tools. Let’s get started!
How to Illustrate a Realistic Guitar Using Photoshop
In this tutorial we’re going to explore how easy it is to illustrate a guitar in Photoshop using tiny shapes, gradients and subtle shadows. Using these techniques and a good reference photo you can create an amazing amount of detail and realism. Lets jump right in.
Learn How To Create A Nintendo WiiU From Scratch In Photoshop
The new Nintendo WiiU was recently revealed at the E3 gaming conference boasting new ways in which we play our games. Now you can create your very own WiiU in photoshop using this detailed tutorial. The tutorial itself is very “Layer Style” heavy so set a side a good two or three hours to complete it.
Or this tutorial we will be dipping into a little bit of icon design for iOS applications. The example icon for the tutorial’s sake will be an iPod Shuffle icon that would be used for a music related app or something of that sort. The tutorial should give some exampled of how to shade elements in an icon as well as bases that typical iOS icons would use.
Create A Nintendo DS In Photoshop
Today we are going to be using basic layer styling and some basic tools in Photoshop to create the open version of our Nintendo DS. In this tutorial you will learn to create the open view of a DS from scratch, using nothing but basic tools and filters. Now, let’s get started. As always this is what we will be creating:
‘Zohf-Ee’ Cup Icon – Illustrator And Photoshop
Yep, another new tutorial author has joined the team here at HV-Designs and his first tutorial is awesome! Josh will be walking you through some simple Adobe Illustrator techniques on creating vector shapes and bringing them to photoshop and then applying some photoshop techniques to bring it all together. Let’s get started!
how to create a seal in Photoshop cs3
In this tutorial we will demonstrate how to create a seal using layer styles, dodge and burn Tool. Let’s get started!
Toggle Switch Photoshop Tutorial
Hey, guys. Today, we’re going to learn how to create a toggle (on/off) switch, and we’re gonna do it using vector shapes and layer styles. That’s right. For now, say goodbye to working in raster and open your eyes to the bright future of resolution independence. Kinda warm and glowy, isn’t it? Good stuff.
Stock photo vector portable meter interface
In this tutorial we will illustration of vector meter interface using Pen tool, dodge and burn Tool. Let’s get started!
Create an Apple Safari Icon in Photoshop
Learn how to create a detailed Apple Safari icon in Photoshop. This tutorial will show you how to create shapes and use different layer styles to create effects.
Create a Mac Style Home Icon in Photoshop
We occasionally need a home icon for our design project. Commonly, a designer draw with Illustrator, but this time let’s create a mac style home icon with Photoshop. The techniques used will be about making shape and playing with layer style. It’s not difficult to make this sweet icon.
In this tutorial we will demonstrate how to create a cool orb using layer styles, dodge and burn Tool. Let’s get started!
Create a Diana Mini LOMO Camera Icon in Photoshop
Learn how to create a LOMO camera icon with this detailed Photoshop tutorial. This tutorial covers many drawing techniques such as creating a leather texture, adding reflection to glass, shading, and more.
In this tutorial we will demonstrate how to create a Alarm using layer styles, dodge and burn Tool. Let’s get started!
How to Illustrate a Stethoscope Icon
This work is a common project created together with Iaroslav Lazunov and Oleksandr Iegupov. We have used Meshes, Art brushes, and Blends to create the final work. The skills you will learn here can easily be transferred to creating various objects. So let’s get started!
In this tutorial artist will show you how to create a Mac style radar icon in Photoshop.
Learn To Create A Camera Lens In Photoshop
In this detailed tutorial artist will be showing you how to create a cool camera lens in photoshop. The camera lens later could be used as an icon or illustration, lets get going…
In this tutorial we will illustration of vector water bottle using Pen tool, dodge and burn Tool. Let’s get started!
In this tutorial we will demonstrate how to create a process icon using layer styles, dodge and burn Tool. Let’s get started!
In this Photoshop tutorial I’ll show you how to create a 3D Push Pin using Photoshop Extended’s 3D drawing and rendering capabilities. Put your 3D glasses on and enjoy the show!
Vector portable media player interface
Creating still life objects in Photoshop is often great practice for learning how to create other objects. In this tutorial we will illustration of portable media player using Pen tool, dodge and burn Tool. Let’s get started!
Five Online Graphic Makers To Create Simple Design Elements
There are many websites out there for generation and creation of graphical elements, but getting by free and good ones is not that easy. That is why I am sharing Five Online Graphic Makers To Create Simple Design Elements. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more graphical element generators that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Logotype Maker
This is a dead simple yet free logo maker web tool which can helps you create a logo in just few easy steps.
BgPatterns
BgPatterns is a tiny web app for making background patterns in a few clicks. It was created mostly for fun and experimentation but you can use it according to your custom background need for your designs.
FreshGenerator is a webdesign tool which can create interesting graphic elements used in many web 2.0 sites. You may use it to create boxes of different styles and colors.
Bannersketch
On BannerSketch.com you can online, without any knowledge of designing, make your own advertising material. Now you can think about making your own banners, headers, footers, business cards or even avatars and avoid spending your money.
Businesscardland
This tool gives you an easy way to make free printable business cards without any designing knowledge. After you have designed your cards, you can create a PDF file to print, save, or take to a printshop to have duplicated.
50 (NEW) High Quality And Free Icon Sets
Icons are the most adored component for any web design and keeping them simple yet attractive surely is the vision of every designer. Attractive and stylish icon sets are the plus point of any good web design. Innovative use of icon sets can simply make or break the entire look of any web design. Free sample design elements in particular fine-looking icon set is what every designer desires to have got in his designing kit.
In today’s section, we are delivering an overwhelming compilation of magnificently designed, fresh and beautiful yet professionally high-quality icon sets. Though all the icons sets presented below are free but be sure to read their terms and condition prior to using them for commercial purpose. We hope that you like this awe-inspiring collection of attractive icon sets and will share it with your friends. Enjoy!
Professional E-Commerce Icons Set
Vista Artistic Icons by Lokas Software
Electronics Icons by Double-J Design
Twitter Follow Buttons & Icons
Icon Set for Writers and Editors
Crayon Cute Icons by YohProject
Cool collection of Vector Food Icons
Summer Olympics Icons by Sportsbetting Spot
Roundup Of Fresh And High Quality Smart Phones PSD Files
We have already published a post about 60 Extremely Beautiful Mobile Phones GUI PSD Packs and that was greatly appreciated by our readers. Now we have gathered another great collection of Mobile Phones GUI PSD Packs. In this summary, we are gathering a collection of some quality psds. PSD files are the truly amazing and unique resources among all the available resources for designing. PSD files not only present the natural inheritance of the artist, but in addition also offer the opportunity for the designers to understand more deeply and discover how they are produced. Unlike tutorials that are step by step guide, PSD files let you get your hands dirty digging deeper into its inner workings. We hope that you like this collection and get the most out of it. Here is the full list after this jump. So, let us take a close look at this assortment and enjoy!
HTC Eris Smartphone
HTC Touch 2 Smartphone
HTC Desire HD
Tt MP3
iPhone Mania
Apple iPhone 4 PSD
iPhone 4 PSD
Motorola Droid
Android GUI Interface Design Package
Apple iPhone 4G psd Layered Material
Apple iPhone 4 PSD
iPad PSD
Google Nexus One Phone Pictures Layered Template Material
Google Nexus one V2 Templates
Nokia 5300 Cell Phone Interface
Tt MP2
Nokia phone black
Motorola Droid 2
Sony Ericsson W800
Motorola Droid
iSlate Photoshop Template
TabletPC
IPod Nano
Apple iPhone 4
Motorola Neon
Samsung Nexus Z
HTC HD3
HTC Nexus One
Dell Metro
iPad PSD
HTC HD2 Smartphone
Tv Mobile
Motorola Droid X
HTC EVO 4G
Samsung Nexus Z
Nokia Sleek Mobile
Windows Phone 7
Mobile LG kg 275
HTC HD3
MobiTemplate
Simple Mobile Logo
HTC Chachacha
HTC Smartphone
HTC Nexus One
Samsung Star 2
DC-660i
Samsung Star S5230
Nokia E7
Damino
Tt MP1
Maemo 5 GUI
DC Touch Light
50 Fresh And High Quality Free PSD Files
It goes without saying that high-quality free PSD files are precious tool for the designers because they ease their designing tasks and allow the designers to complete their work at a fast pace. Although, there are tons of PSD files collection available on the net, but to find out the high-quality PSD files that you can use in your project is such a hectic thing.
Considering this difficulty, we have come up with an amazing collection of 50 high-quality PSD files that you can download and use for free. You can modify these PSD files according to their project requirements and individual client taste. Enjoy!
Elegant MP3 Player Skin Free PSD
Stunning Curled Notebook PSD Graphic
Transparent Glass UI: Free PSD for User Interface Design
Sexy Round Google Plus Icons PSD
Comment, flag, thumbs up and down
Free PSD Colored Pencils Graphics
Free PSD Unique Portfolio Template
Icon For Financial ERP Application And Web
Glass Shelf Dock from Leopard OS in Photoshop
40 Examples Of Creatively Integrated Social Media Links In Web Design
Social media is progressing extremely enormously and is becoming a crucial aspect of marketing as more and more business taking advantage of it. Integrating different social media networks with your website not only drives a huge traffic from these sites to your own website but also lets you promote your goods and services on almost at negligible cost. The key is to do it right!
Here we are showcasing a collection of some excellent examples of websites that have very well-integrated social media links to their web designs so that they appear as the integral part of their own web design. We hope that this collection will inspire you a lot to integrate social media links to your website as well.
13 Beautiful Free Google Buzz Icons
Google Buzz is the relatively new social networking tool introduced by Google that has been gaining huge popularity among internet users. You can use Google Buzz for sharing photos, videos, comments, status messages and links that are ordered in “conversations” and visible in the user’s inbox. Google has integrated Google Buzz into Gmail making it easier for their users to use it.
Here, we are listing down a free collection of some creatively designed Google Buzz icons for you. The collection also contains PSD files that you can modify according to your own needs. With these icons you can set your website apart from other similar websites. Enjoy!
Google Buzz Social Icons for Bloggers and Designers
PSD of glossy google buzz button icon
24 Free Exclusive Google Buzz Icons
Five Great Websites To Download High-Quality Design Freebies
There are many websites out there for us for design freebies, but getting by good ones and free is not that easy. That is why I am sharingFive Great Websites To Download High-Quality Design Freebies. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more websites to download design freebies that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Twibies
A gallery showcasing the best and free twitter icons and themes.
SearchPSD
Here you can search more than 1.500 psd files order by categories that are all free for you.
FlashVillage
All FlashVillage templates are 100% free. You simply need to register as a free member and you can start downloading.
Plaintextures
This site provides free high resolution textures for 3D artists and web designers.
Icon Gallery
You can search and browse this Icon Gallery for the finest high quality free icons on the web.
7 Excellent (And Fun) Ways To Create Avatars That Represent You
People have been using avatars for as long as I can remember. Be it any web forum or a social networking website it has always been fun creating Avatars that looks like you and represent yourself. One of the most widely used Avatars were the South Park characters which people used all over the internet by making them look like yourself. For those who are looking to create an Avatar for themselves let’s look at 7 fun and cool ways of creating avatars that represent you and your ideas.
You are welcome if you want to share more ways to create avatars that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Androidify
If you are an Android fan or just someone who finds the Android avatar really cool, Androdify is an app that will let you take that little green Android avatar and turn it into yourself, your friends, your family or anyone. You just need to download the app for which you will need to sign-in with an account with which there is an Android phone associated. The app comes for FREE, so get started.
Eightbit.Me
Do you remember the Atari days when the graphics came in eight bit? well Eightbit.Me is a website on which you will be able to create an eight bit avatar of yourself. You just need to sign-in with your twitter account and visit the website on your iPhone and the website will walk you through easy steps to make a cool eight bit avatar of your choice. It’s for FREE.
ThatsMyFace
ThatsMyFace takes your avatars to real life. What you need to do is upload a Front Photo and a side photo (optional). The website will give you an image of yourself in 3D which you can edit to change race, age, gender or even face cuts. Once you are done with the changes just choose a product you want your face on. You can have custom action figures, 3D portraits and masks, ornamental heads and papercrafts. These products will cost you from $10 to $129 and all of the come in 24-bit true colors.
Avatarizeyourself
Avatarizedyourself is a really cool website that lets you make avatar of yourself. The avatars that we all fell in love with from the movie of James Cameron’s Avatar. The website comes in German language so you should either know German or you can use the Google Translate to understand it. To create an avatar just upload your picture and position it using the guidelines given and create. It’s for FREE.
ClayYourself
ClayYourself is a cool website that lets create an avatar just like an animation out of the clay cartoons. To create your clay avatar just go to the website and click on get started. The websites will take you step by step starting from letting you choose gender, head shape and skin tone. Then you choose a set of eyes, eye brows, a nose, lips, hair style, beard if you have chosen male and earrings & necklace if you have chosen a female. Then you choose a head wear, eye wear, shirt design and color and you are done. It is for FREE.
MPChange
MPChange is a fun website where you can upload a picture of anyone and change them by adding from a range of selection of moustache, beard, female hairstyles and different head wear. The picture has to be frontal, expressionless, can only be in JPEG format and should not be bigger than 1 MB. Once you have uploaded a suitable picture the website will make a 3D image of it and will let you change it the way you want. Once done just take a picture of your customized face and save it to your computer. Using this website won’t cost you anything.
Avatara
If you are looking to create a cartoon clone of yourself from your photo avatara is the right website for you. To use this website you need to log in using your facebook account or just create a new account with your e-mail address. Once signed in you, just upload a front faced picture of you in which you have your nose pointing towards the camera with a mouth closed relaxed expression. Your eyes should be wide open and looking straight ahead. The picture should have your entire face and your glasses should be removed. The picture should also be taken in a way that no hair is covering the forehead. Once uploaded a proper photo you can clone yourself into a cartoon of yourself.
50 (Really FRESH) High Quality and Free Icon Sets
Every designer knows how valuable an icon set can be in the time of need. This is the reason why keeping a good collection of beautiful and high-quality icon sets is on the wish-list of many designers. Freebie icon designs is a must have in every designer’s tool kit. Keeping this in mind, we have prepared this assortment of some high-quality icon sets.
We hope that you will find this collection a great aid to your tool box. Although all the featured icon sets are free to use but be sure to read their terms and condition prior to using them for commercial purpose.
3D Glossy Icon Set: 20 Free Icons
Each icon comes in 5 sizes (PNG format), with Photoshop PSD files in case you would like to tweak the icons.
Simplito: A free social icon set
The awesome folks at DesignDeck has designed a cool set of 24 social icons which we’re calling “Simplito”. The icons are provided as JPGs, PNGs and a master PSD file for easy editing.
Shiny 3D social media icons PSD
The set includes Twitter, RSS, Facebook and Email icons that can easily be re-sizable as they are created with Photoshop shape layers. Also, each icon is isolated on a transparent PNG background in sizes 512×512, 256×256,128×128 and 64×64 pixels for use in your web projects.
Facebook & Twitter Icons ~ Cake style
The set includes some fresh cake style social icons – Facebook & Twitter.
SocialMate: 28 Free Social Media Icons
A free and beautiful set of 28 social media icons for your website and design projects. These icons come in 2 variations for use on dark and light backgrounds. The icons are saved in transparent PNG format in 3 different sizes (128x128px, 64x64px, 32x32px), so there are 168 icons in total.
This set includes 28 icons for various applications, available in both png and ico format, from 128 to 16px.
A free set of stylish Date Icons.
This free icon set has 20 high quality semi-transparent and glossy icons. The package also includes 48 derivative icons of the 20 icons. Each icon comes in 6 different sizes (32×32, 48×48, 64×64, 128×128, 256×256 and 512×512) in PNG format.
A set of briefcase icons available in 512×512, 256×256, and 128×128 pixels.
This set contains some beautiful Minimalistica Red Icon in different sizes PNG: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, ICO, ICNS: 128x128px
A beautiful set of 6 incredible Persons Icons.
This set Includes 226 icons related to websites, design, e-commerce.
Awesome icons of the book. Touch a nice leather cover, open the page. Feel the magic of books.
Movie clapperboard PSD & icons
An elegant set of movie and video clapperboard icons in Photoshop format. These two icons come in separate fully layered PSD files along with their icons on transparent background in sizes 512×512, 256×256, 128×128 pixels useful for your web related projects.
A set of two sweet email icons in Photoshop PSD format. These email icons – open and close – come in fully layered PSD files and you can easily increase and decrease the size of the icons as they are created using vector shape layers. Also, each icon is resized to 512×512 pixels on a transparent PNG background for use in your web projects.
Social Icon Set ~ Eco-friendly
Be environmentally friendly and opt for these eco-style social icons.
A contemporary set of mail icons in 256 x 256 pixels.
A special set of Social Icons using our very own Muffy comic character. Feel free to download and use these icons for free. Available in 256 x 256 pixels.
This set contains some of beautiful Adobe Icons.
This set contains 3 awesome Mushrooms Icons.
This set contains 9 beautiful Browsers Icons.
A fresh set 3 awesome Sushi Icons.
A fresh set 28 iWindows Icons for your next projects.
Beautiful leather purse, filled with large bills. Open it, take it
This set contains 10 cute and coiffed original vector creature icons.
A fresh set 16 Peppers Icons.
A set of beautiful icons inspired by the html5 icon.
Treasure Chest with Golden Coins and Crown
Highly detailed treasure chest full of golden coins. Perfect to add money balance/income/profit feel to your creative websites, business cards, presentations, flyers, posters, etc. Available in high resolution (1200x1200px)
Free collection of creative design related icons presenting pack of brushes laid in a greasy cup. Available in 4 different dimensions (64px; 128px; 256px; 512px)
This set is included 8 different stylish bubbles that can be used as speech,thought or chat bubbles for your creative web designs, business cards, flyers, posters, presentations, etc.
The set is called the ‘Multimedia Icon Set’ and, as the name suggests, contains 14 multimedia icons in PNG format. You will also find included in the download the AI source files.
This set features 5 icons, all in PNG format, ranging from 32×32 px to 512×512 px.
A choice of 16 chic RSS icons to liven up any site.
A cup of tea, anyone? 6 social icons that look simply delicious!
A fesh and beautiful set of 5 Green Stuff Icons.
Shopping Icons ~ Brand new set!
A beautiful set of Shopping Icons.
Glossy medical pills PSD template
The medical pills graphic is a glossy design that comes in vector shaped fully layered PSD file with each graphic organized in named folders. Also, each graphic is isolated on transparent background as icon in PNG format to help you in your graphic and web design works.
The set includes 146 nice done icons.
Easter Bunny icon set which comes in 4 sizes as transparent PNG files available: 64x64px, 128x128px, 256x256px
This set includes 6 beautiful icons of classic cars.
A beautiful set of GPS navigation icons in different colors and each icon comes in a 128×128 pixels with fully layered PSD file.
This set containes 9 beautifully crafted shopping bag icons with psd file.
The most complete credit card icon set ever, 457 payment and credit card icons packed in this fantastic collection, it includes 9 sizes, pixel perfect icons for smaller sizes and vector for larger sizes.
A set of home icons available in 512×512, 256×256 and 128×128 pixels with psd files.
This set include 55 awesome user icons.
A beautiful set of 5 icons in a blue hue.
This set contains Twitter Icons in vector format.
This set includes different world globe icons with fully layered Photoshop files. Icons in various standard sizes such as 512×512, 256×256, 128×128, 64×64 and 32×32 pixels.
This set includes some tasty looking frozen dessert treat icons available in 512×512 and 256×256 pixels.
A unique set of icons that can add a bit of style to your project.
