How to create a clean and design portfolio layout using Photoshop

Tutorial Photoshop - Layout Template and webdesign

Step 1 – Create a new document

To start the creation you need of course to create a new document, go to File> New (Ctrl/Cmd + N) and edit the name (Template in my example), change the canvas width (980px) and height (1000px).

Tutorial Photoshop - Layout Template and webdesign

Step 2 – Create the background

Change the foreground colour to dark brown (#38332f) and go to Edit> Fill or hit Shift + F5. The layer “Background” is insistently filled in brown.

Tutorial Photoshop - Layout Template and webdesign

Step 3 – Create the guides

Go to View> Show> Guides (or use the shortcut Ctrl/Cmd + ;) , and create a new horizontal guide on 80th pixels, to do it go to View> New guide> select horizontal, enter 80px and hit Ok. Do it again to create a horizontal guide on each pixel: 30, 40, 80, 310, 320, 330, 350, 570, 770 and 780. And now do it again with the vertical guides: 50, 330, 350, 630, 650, 660, 920, and to finish 930.

Tutorial Photoshop - Layout Template and webdesign

Step 4 – Create the header

Create a new group and name it “header”. Select with the Rectangular marquee tool (M) the top of the canvas (height 80px). Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “header bg”, now use the white colour to fill in the selection.

Step 5 – Fill in the header

Now you’re going to add a gradient into the header, go to Layer> Layer style> Gradient overlay and configure the colour: grey to light grey.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Step 6 – Add the logotype

To create the logotype you have to start with the creation of a new group (name it “logotype”) then create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “cube” On this layer create a cube (use the Rectangular marquee tool (M) to do it, don’t forget to hit the Shift to keep a good proportion) fill it with a gradient (use the layer styles).

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add a big 2 above the cube, drop it on the bottom right corner. Then, right-click on layer “2” and select Rasterize type. To finish, go to Layer> Layer style> Inner shadow and use the settings from the following image for Inner Shadow.

Tutorial Photoshop - Layout Template and webdesign

And to finish the logotype, use once again the Type tool to add the title (for your information I used the Kabel font in this example).

Tutorial Photoshop - Layout Template and webdesign

Step 7 – Create the menu

Begin the menu to create a new group (go to Layer> New> Group) and name it “Menu” then select the Rounded Rectangle Tool (U), set the radius to 50px and create a rounded rectangle on the top side on the right of the lofotype. Use the guides to help.

Tutorial Photoshop - Layout Template and webdesign

Rename the layer “menu bg” and design it with a gradient and a stroke (use the layer styles to add them). Go to Layer> Layer style> Gradient overlay and use the settings from the following images.

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add the links.

Tutorial Photoshop - Layout Template and webdesign

Right-click on the layer “menu bg” and select duplicate the layer. To create the hover effect on the menu you’re going to change the colour of the first link to red (just change the layer styles on the menu bg copy layer)!

Tutorial Photoshop - Layout Template and webdesign

Now right-click on the layer “menu bg copy” and select Rasterize layer and cut the right side. Then change the colour of the first link to the white.

Tutorial Photoshop - Layout Template and webdesign

And to finish add a drop shadow on the layer “menu bg”, use the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

And to finish the menu you must create a separation between the links. To do it create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “separation”, use the Rectangular marquee tool (M) to create a selection from the top to the bottom. This separation is made with a first grey line (#c2c2c2) and a second white line (#fff). Take a look at the following image for reference.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the layer separation time to time.

Tutorial Photoshop - Layout Template and webdesign

Step 8 – Create the carousel

Create a new group (go to Layer> New> Group) and name it “Carousel”. In this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “Carousel bg”. Then use the Rectangular marquee tool (M) to create a rectangular selection of 280×300px on the right side of your document. Change the foreground colour to the white and go to Edit> Fill.

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “shadow”, now change the foreground colour by the black and hit Ctrl/Cmd + D. Go now to Filter> Blur> Gaussian blur (5px). To finish reduce the opacity to 20%.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “picture”, go to Select> Modify> contract and enter 10 px and hit Ok. Then fill in the selection with a dark grey.

Step 9 – New header

Create a new group and name it “header 2”. Select the Rectangle Tool (U) and create a brown rectangle beneath the top header. Use the Type tool (T) to add a little description.

Tutorial Photoshop - Layout Template and webdesign

Add the button*

Tutorial Photoshop - Layout Template and webdesign

Select the Rectangle Tool (U) and create a lighted brown rectangle beneath the header 2. Add an inner shadow (go to Layer> Layer Style> Inner shadow) into this rectangle, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Add a little text with the type tool (T).

Step 10 – The content

Create a new main group and name it “Content”, create directly three new groups inside and name them “bloc1”, “bloc2” and “bloc3”.

Select the Rectangle Tool (U) and create a white rectangle.

Use the Type tool (T) to add the first title and a description. Drop it in “bloc1”.

Tutorial Photoshop - Layout Template and webdesign

Download this icons pack from here: http://www.tutorial9.net/resources/nixus-icon-pack-60-beautiful-premium-icons-free/ and import an icon in your bloc1.

Tutorial Photoshop - Layout Template and webdesign

And do these last steps two more times to fill in the bloc 2 and 3.

Tutorial Photoshop - Layout Template and webdesign

Step 11 – Testimonial

Create a new group and name it “Testimonial”, in this group create a new layer and name it “testimonial bg”.

Using the Rectangular marquee tool (M) select the bottom side of the white rectangle. Then fill it in with light grey #e5e5e5.

Tutorial Photoshop - Layout Template and webdesign

Create a new layer and name it “stroke”, move to the top the selection of 2px and fill in the selection with the same grey, now move it down to 1px and hit Delete.

Tutorial Photoshop - Layout Template and webdesign

Using the Type tool (T) add a title and a description.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the button* (already created in the header) and drop it to the right of the title.

Tutorial Photoshop - Layout Template and webdesign

And to finish, add the picture** of the customer on the left of the message.

Tutorial Photoshop - Layout Template and webdesign

Step 12 – The footer

The tutorial is soon finished : ) you have to create the footer and it will be done!

So, create a new main group (go to Layer> New> Group) and name it “Footer”, in this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “dark stroke”. Using the Rectangular marquee tool (M) create a selection of 5px beneath the testimonial area. Change the foreground colour to the dark brown (#171513) and fill in the selection.

Tutorial Photoshop - Layout Template and webdesign

Select the three layers of the titles on the content area and right click and select duplicate the layers. Drag and drop them on the footer group and move these titles in the footer. Switch the colour to light grey (#e5e5e5).

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool (T) to add a list beneath the first title on the footer.

Tutorial Photoshop - Layout Template and webdesign

Using the Custom shape tool (U) create a little arrow before the link in the list. Add a drop shadow, go to Layer> Layer style> Drop shadow, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Duplicate the arrow and put one of them before each link.

Bring together all layers of the first bloc in the footer in a new group (bloc1). Create two news groups and name them “bloc2” and “bloc3”. Duplicate the list (text and arrow) and put one of them on the bloc2 and the other in the bloc3.

Facultative step, in the bloc1 you can delete the list to add a little form. To create the form use the Rounded rectangle tool (U) with a radius of 10px. I used the colour: light grey # e5e5e5 and red #e83116. Use the Type tool (T) to add the label and Send in the red button.

Tutorial Photoshop - Layout Template and webdesign

Step 13 – Copyright

And to finish this tutorial create the last group on the group “footer” and name it “copyright”. Use the Rectangular marquee tool (M) to select the bottom of your document, create a new layer (Layer> New> Layer) and fill in this selection with this colour: # 47413c, move down the selection to 1px and fill in it again with this other colour: #171513.

Create a new layer and use the foreground > transparent gradient (Gradient tool) to create a gradient on the top of the copyright area (use the black #000000).

Use the type tool to add a little copyright (on the left) and duplicate the logo and drop the copy to the bottom right side.

Tutorial Photoshop - Layout Template and webdesign

Further information

Watch the following images to know how to create the button:

Tutorial Photoshop - Layout Template and webdesign

Watch the following images to know how to create the picture in the testimonial area:

Tutorial Photoshop - Layout Template and webdesign

If you need some information regarding the process to create the button or the picture, please, let me know it in the comments.

Final result

click here to download the psd file

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

So, thank you very much to you for reading my Photoshop tutorial and if you enjoy this post, this template and this blog, please, follow us up on RSS or Twitter I see you later by another 2expertsdesign.com tutorial!

15 Fresh Quality Adobe Photoshop Tutorials

photoshop tutorials

Visit Tutorial

Frayed Denim Patch With Stitches

photoshop tutorials

Visit Tutorial

Text In Stitches

photoshop tutorials

Visit Tutorial

How to Create a Somber Composition in Photoshop

photoshop tutorials

Visit Tutorial

How to Create a Fun, Red-Haired Boy Character

photoshop tutorials

Visit Tutorial

Create a Professional Web 2.0 Layout

photoshop tutorials

Visit Tutorial

Create a Shiny Earth with Photoshop 3D Layers

photoshop tutorials

Visit Tutorial

Design a Surreal Desert Scene in Photoshop

photoshop tutorials

Visit Tutorial

Dance Photo Manipulation Part 1

photoshop tutorials

Visit Tutorial

Dazzling Dance Photo Manipulation

photoshop tutorials

Visit Tutorial

Making a Grungy Business Card

photoshop tutorials

Visit Tutorial

Create a Cute Cartoon Beast

photoshop tutorials

Visit Tutorial

Create a NFL Style Advertisement in Photoshop

Visit Tutorial

Designing a war movie poster

photoshop tutorials

Visit Tutorial

DepositPhotos – A New Innovative Royalty Free Stock Photography With Extensive Features

Getting relevant images for your content is not only difficult but expensive too. There are lots of portals where you can buy images but not every one of these portals is good enough to cater the needs of content writers. One of the key features that most of the portal doesn’t have is the ease of payment and pricing plan. When a person wants to get certain photo, he/she might not be looking only for the relevant images but also a portal that is easy to interact with. But there is one such portal which is exactly what a content creator would need. DepositPhotos is a great new and innovative royalty free stock photography website. It has over 900,000 photos with over 100,000 new photos added every week. With such vastness, it stands itself as a one stop solution to all your problems.

There are three crucial points in DepositPhotos which makes it the best among others. First one is its Free Trial Offer which allows buyers to test the services by subscribing free for 14 days. In this time period, you can download 10 images per day. This is the greatest offer that any portal can provide. This allows you to gain trust with the portal and be familiar with the services. It gives you the first hand experience with the portal.

The second important feature is its pricing plan and referral programs. Unlike others, it has a concept of credits where it can be used to buy images. Each credit is worth $1, and cost of standard image of 1600X1200 2MP is 3 Credits, which means $3. In comparison to other portals, it is the best price out there. Further, you get one extra credit for each purchase which can be used to buy images in future with Standard or Extended License Agreements.

It also has a great Subscription plans which allows access to the lowest prices and download up to 40 Images per day. When you choose one of our subscription plans, you can download as many images as you want (up to the limits of your plan) every single day. One of the lowest plan includes $19, 10 images per day and valid for 3 days.

Thirdly, beside its pricing plan, it has a great option to choose your payment channel. If you don’t like using credit cards online than you can simply send a text message from your phone and the image credits will be added automatically. The credits can go up to 15. Then you can download your images one at a time or all at once.

It provides facility to find thousands of images to choose from with such great pricing plans and easy payment gateway. There is no doubt that Depositphotos despite being a newbie in the market is a best service available. The extensive plans and schemes clearly mark their seriousness in the business which most of them lack.

So if you are looking for the quality royalty free stock photos, give Depositphotos Free Trail a go. Visit Now.

16 Blogs To Help You Master the Business of Design

Freelance Switch

Freelance Switch

One of the best in the business of freelance advice, Freelance Switch offers articles, resources, and more on a daily basis. Their job boards and forum are also great places to find jobs and talk about strategy, business, and other freelancing tasks.

Freelance Folder

Another great blog that focuses on all things freelance. The Freelance Folder offers an excellent community for knowledge, discussion, and ideas.

Men With Pens

Just ran across this site for the first time while doing research but it has all the makings of a great freelance information site. They also offer many services to aid in the pursuit of freelance success.

Seth Godin’s Blog

Not as much straightforward and practical advice but Seth Godin is one of the most respected authors in the business world. He’s authored numerous bestsellers including Tribes, a book on connecting leaders with a group of dedicated followers. There’s a lot of good information to pick up on his blog and if you haven’t read any of his books, they’re fantastic!

WebWorkerDaily

Focused mainly on the virtual workplace, WebWorkerDaily offers advice on productivity, networking, and even the lifestyle of a web worker. If you’re interested in expanding your web presense, this is a great place to start.

Guerrilla Freelancing

Guerrilla marketing refers to the unconventional methods of marketing on a limited budget. Mike Smith takes this approach as he offers valuable resources to Freelancers who may prefer to do things on the cheap (which is probably everyone).

Wake Up Later

A blog dedicating to help you make more money online. Brush up on your online business skills with this great blog.

Creative Freelancer Conference Blog

The Creative Freelancer Conference is aimed at anyone in the creative arts field trying to make a living freelancing. The CFC Blog is a companion blog that offers loads of great advice on the business of design, specifically freelancing.

Dosh Dosh

Dosh Dosh is an internet marketing blog that offers advice on social marketing and making money online. I’ve found some really great articles over the last few weeks.

Fresh ID Blog

Fresh ID is a web design and marketing firm that offers a wide variety of identity and design services. Their blog offers a transparent work at how they do what they do. There’s some real nuggets of wisdom that they serve up to help you learn from a company actually doing the work.

Biznik

Biznik is a community of entrepreneurs and small business owners that work together to better the good of everyone’s business. An excellent place to learn, network, and grow your business skills.

GTD Times

Getting Things Done by David Allen is one of the most recognized productivity books in the world. The online home of GTD offers advice and recommendations for establishing and perfecting essential productivity habits. The boost in productivity will definitely serve to better your business skill set as well as your design ability.

Six Pixels of Separation

Personal branding, new media and digital marketing are among the topics covered by Mitch Joel on his blog about business.

The Netsetter

Another valuable blog by Envato, the Netsetter offers advice for startups and web businesses.

Work Happy

Work Happy is a collecting tank for resources that aid in the business of freelance designers. Browse through the archives for some excellent tools, tips and advice on freelancing easier and more efficiently.

Fuel Brand Network

Last but not least is an entire network of blogs related to all things creative. Writing, branding, coding and more will help you increase your knowledge of anything that is currently lacking in your freelance arsenal. Fuel Your Venture is especially helpful for anyone in startup or web business industry.

Why As a freelancer you should use twitter

why-should-tweet

This is a great insight to why as a designer you should choose to use one of the most powerful social media tools around for designers twitter.

Every one shares their personal findings from around the web

Twitter is an essential tool which should be used by every designer and even web designers or web developers. I believe twitter is a good tool for designers because everyone shares resources, tutorials and articles related to your niche dependent upon the people you choose to follow on twitter, which keeps you update to date with the latest news related to your niche which may be design or even web design making you alert of current online activates in the design community or in within specific niche.

Using Twitter for marketing

One aspect of twitter which I admire and really enjoy is that twitter can be used as a tool to help market your brand, portfolio or blog. Yes twitter can be used a tool for marketing but don’t be self centred and think I’m only going to use twitter to promote my blog or portfolio because your twitter should’nt just be about marketing yourself or brand its more than that it’s about networking and building friendships.marketing

Personal Branding

Twitter can be used to build an online presence all what you need to do is tweet good interesting tweets which you feel other people may be interested within reading, then over a period of time you will notice an increase within people who would like to follow you. Building good online presentence can seem pointless but can lead to other great opportunities.

twitter

Networking And building friendships

Jacob Cass(Just Creative Design) a designer who built up a good online presence through using twitter, which leaded to him being approached by Carrot Creative an new-media marketing agency and was flown out from Australia where he was currently living in order to start a new job working for Carrot Creative in NYC Brookline. I’m not saying that everyone who uses twitter efficiently will magically be swooped up by large design agency, but what i am saying is that twitter can lead to a window of great opportunitys through just tweeting and networking with designers and web developers which is worth taking advantage of. jacob

Tracking Daily day to day activates

Twitters main enthusiast is tell people what your currently doing, therefore during your day if you just spend a few moments to say what your currently doing you then can look back on your twitter streamline in order to track your what your day to day activates where and if you manage to complete a specific task which you said you was currently doing on twitter.

tracking

Final Thoughts

If you are a freelancer in any niche not just design its essential to have twitter account because their just so many benefits of using twitter. Twitter will help you to grow as a freelancer keep you in the loop and network with other freelancers.

40 Fresh New High Quality Icon Sets Created In 2010

1. Incredibly Detailed 3D Icon Set

media-loot

The free icons are packaged as 128px transparent PNGs, and you have to see them full-size to believe how detailed they are. MediaLoot members will have access to the layered PSD files for all of these icons.

2. Social Sketches: Exclusive Free Hand-Sketched Icon Set

social-sketches

Social Sketches is a free icon set containing several icons of popular social networks exclusively released on Six Revisions. All the icons are done in sketch style, which brings them a new look and makes them especially fit for grunge/hand-drawn themed websites; in fact, the set was created initially for use in Referrer Detector plugin onThe Daily Faces, my new “daily sketch” project, but then I decided to release it for public use.

3. Free Furry Cushions Social Icons Set

cusins

Furry Cushions Social Icons, a set with 6 transparent furry social icons in .png. This set was designed by Andrea Austoni and released especially for Noupe and its readers and its avilble for commercial use.

4. Vector Social Media Icons

vector-soucial-media-icons

Social Sketches is a free icon set containing several icons of popular social networks exclusively released on Six Revisions. All the icons are done in sketch style, which brings them a new look and makes them especially fit for grunge/hand-drawn themed websites; in fact, the set was created initially for use in Referrer Detector plugin onThe Daily Faces, my new “daily sketch” project, but then I decided to release it for public use.

5. NIXUS Icon Pack: 60 Beautiful Premium Icons (Free)

nixus

NIXUS may be one of our top Icon Pack releases to date: 60 Premium Quality Icons—Absolutely Free. This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

6.  Cutielicious! A Free Twitter Bird Icon Set

twitter-birds

Twitter Apps, Twitter Icons! Looks like we cant seem to stop liking them afterall!

6.  Grass Textured Social Icon Set Preview and Download

grass-icons

The Grass Textured Social Icon Set has been created by Richie Thimmaiah, from RichWorks exclusively forSpeckyboy Design Magazine readers and are free to use for both your personal and commercial projects but may not be modified, sold or redistributed.
The icons are packaged with 3 different sizes to suit your needs: 256px, 128px and 64px.

7.  Freebie Release: Social Network Icon Set

water-colour-soicial-icons

These Iconshock icon set comes in 6 different sizes: 12×1216×1624×24128×128256×256 and 512×512covering social various social network logos like BloggerDeliciousFacebookFlickrLinked-inRedditRSS feedStumble UponTechnorati and Twitter. All icons are free and you can download and use them in either personal or commercial project.

8. Social Trucks Icons

soicial-icons

Ten social icons depicting spacious trucks to deliver your tweets, links and status updates across all major social networks. No traffic jam can stop them!

9. Mobile Icon Set

vv-slick-icons

You can use these icons on your mobile applications or mobiles. Mobile Icon Set includes Phone Call, Photos, Messages, Calculator, Wireless, Calendar, Settings, Contacts, Notes, Map.Usage: Free for Personal and Commercial Projects (Size: 128, 64, 48, 32px)

10. Woven Fabric Social Media Icon Set

woven-fabric-icons

This woven fabric set of social media icons was created by Jan Cavan from Dawghouse. Although not suitable for every type of site, these icons will look wonderful on websites that use texture and have an organic approach to their design.

11. FRESH Add-on

fresh-add-on

This free set with 59 fresh and lively icons which we, actually, decided to extract from the FRESH full package to make another free set. So despite being free, this set is as in high quality as the premium package. The Fresh Add-on contains such useful and flexibly applicable icons as application and financial symbols, and the set surely will make your web applications and softwares more atractive and adorable.

12. Free Social Moleskin Icon Set For Bloggers And Designers

icpn-set-blooggers-designrs

Love these RSS, Twitter, Delicious, Stumbleupon and Facebook clad moleskins. They are so awesome! I hope you find good use of these icons, they are free for commercial and personal use. They come in 256×256 resolution in PNG format. Thanks Iconshock!

13. 3D Social Media Icon Pack | 20 Icon Set

3d-icons

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed. Inside this Icon Pack are Twenty 3D Social Media Icons, created exclusively for the viewers of Tutorial9 by Dawghouse Design Studio.

14. T-Shirt Social Icons

t-shirt-soicial-icons

Wear these icons every time you socialize online.

15. Free Set of Office Icons by IconShock

business-icons

IconShock designs high quality icon sets and in recent months they have provided the design community with a lot of great, free icons.This set includes five icons of typical office items. The icons are free for personal or commercial purposes, and they are available below as PNG files or as Adobe Illustrator files.

16. Freebie: Media Icons from IconShock

media-icons

This set includes five media icons, with the usual high quality that we’ve come to expect from IconShock. The icons are available as PNG files and as Adobe Illustrator files. They can be used for personal or commercial projects but cannot be redistributed or sold.

17. Vintage Stamp Social Media Icon Pack

stamp-icons

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.Inside this Icon Pack are 23 Free Vintage Stamp Icons, created exclusively for the viewers of Tutorial9 by Dawghouse Design Studio.

18. Juicy Fruit icon set. psd included.

juicy-fruit

Have you ever seen those web “2.0″ icons sets, that are colorful, fresh and juicy? I bet you have! Mainly inspired by that trend, this is one of my first icon sets ever.
Ok, now let’s get to the point. Baggy Icon Set was designed by Sallee Jeremy and it contains 30 high quality icons. This time, there are 2 different formats (.png and .psd), all in 256×256px.

19. Exclusive Payment Method Icon Set for our readers

payement-methods

The Speckyboy Payment Method icon set is a collection of popular payment icons, that include: MastercardVisa,PaypalGoogle CheckoutCheck Payment and even icons for Wire-Transfers. Not only do these icons look awesome, they are also very useful and versatile (there are eight different sizes that range from 12px all the way up to 512px).

20. Free Exclusive Vector Icon Pack: Web User Interface

web-user-vector-icon-set

The Speckyboy Payment Method icon set is a collection of popular payment icons, that include: MastercardVisa,PaypalGoogle CheckoutCheck Payment and even

21.Twiter joy

twitter-joy

TwitterJoy free icon set of 3 twitter-bird icons. These icons are free to use in any kind of project unlimited times.

22. Latte Art Social Icons

coffie

There’s no best way to invite your readers for a social coffee than to use these beautiful latte art icons on your blog!

23. Free Social Network Icons from IconShock

3d-big

IconShock has designed Social Network icon-set exclusively for Smashing Share readers. The IconShock – icon sets are awesome and free to use for both your personal and commercial projects. Included icons are for following services. Digg, StumbleUpon, Facebook, Twitter and Delicious.

24. micrOS icon pack

micro-os-icon-pack

A great collection of small icons intended specifically for for web design.

25. 27 Free Wooden Badges – Social Icon Pack

wood-pressed-icons

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.Inside this Icon Pack are 27 Free Wooden Social Icons, created exclusively for the viewers of Tutorial9 by Dawghouse Design Studio.

26. Mac 3D icon set

mac-3d-icons

Bored of your 2D mac logo. Wanna give your dock a new touch with a 3D effect? Need a creative mac logo for your webdesign? This a set for you!!!! With a total of 16 icons. 8 in bold colors, 8 customized. Ska cow, vintage and more… The dimention of the icons are 256×256px and the file extention for each icon is .png

27. Free High Quality Premium Apple IPAD IconsIPAD

This is Icon stet of is Apples brand new latest product the Apple Ipad. The Icon set feature four high quality premium icons for you to enjoy for personal use and commercial use.

28. 20 Amazing 3D social icons!

3d-soicial-icons

A brand new set that consists of 20 3D icons in PNG format (64×64 & 128×128pixels). Hope you’ll find them useful

29. Free Mobile Berries Icon Set

miniture-icons

Theses are great icons available in small sizes perfect for the web.

30. Free Social Media – Networking & Bookmarking Icon Set

networking-bookmarking

Introducing the first of many, many free icon packs here at Digital Art Empire. There are a total of 36 icons with 9 different Social Media – Networking  & Bookmarking sites.

31. Free Social Media – Networking & Bookmarking Icon Set

tweet-bird-icons

a Free Twitter Icon Set, a set of 9 beautiful and lovely Twitter icons. Released exclusively for Splashnology.

32.E-Commerce Icon Set

eccomerce-icons

You can use these icons on your E-Commerce Online Store. E-Commerce Icon Set inclides Products on Sale, New Porducts, Checkout, Secure Payment, Credit Cards, Delivery, Shopping Bag, Empty Shopping Bag, Shopping Cart, Empty Shopping Cart.
Usage: Free for Personal and Commercial Projects (Size: 128, 64, 48, 32px)

33.Free Icons: Worn-Out Soda Cans Social Media Icon Pack

worn-out-soda-cans

Worn-Out Soda Cans Social Media Icon Pack. The icon pack once again features icons of our favorite social media sites in 200×200, transparent PNG formats.

34. Free social icons

3d-soicial-media-icons-shiny

An awesome 3D Social media shiny icon set.

35. Pixel Social Media Icons

32pixel-icons

An large collection of social media site icons Free for personal and commercial use!

36. Free and Exclusive Icons: Brown Social Icon Pack

brown-social-icon-pack

In the pack, you will find 12 glossy polished icons in different size variations: 32×32px, 64×64px and 128×128px for maximum flexibility. All files are .PNG format and are mainly brown-colored especially for all you brown fanatic bloggers that like to share posts over the social networks nowadays.

37.  Iconshock icon sets: original film director icons vol 1

film-chracter-icons

The set comes in ICO, ICNS and PNG formats, and includes, George Lucas, Steven Spielberg, Spike Lee, Alfred Hitchcock, Tim Burton, and James Cameron.

38. Shine

shiny-icons

Shine is a set of 31 shiny realistic icons. The combination of prominent 3d shapes and fresh color scheme make Shine really stand out from the crowd. With 31 icons in 5 different size in both vector and pixel formats, Shine is extremely versatile.

39. 5 Free System Replacement Icons From IconShock

icons-sped

The icon pack contains 5 PNG icons at 256×256 pixels and also the Illustrator(AI) source file. In this package, you’ll find the following icons: Media Player, Firefox, HDD, PC and Folder.

40. A Free Sophisticated Premium Peel Over Icon Set

sopihticated-icon

The 5 Golden Rules for Increasing productivity as a Designer

1. Task Management

Task management is essential to any freelancer breaking weekly tasks in to manageable tasks and then compiling them in to a short to do list, this is great method to ensure all projects and deadlines are met and a great way to also assess if the day was productive by checking if you completed to days tasks on your to-do list.TASK-MANAGEMENT

2. An Minimalistic workspace

This is a great tip which I read in an interview with Andrew Houle from My Ink Blog which is perfect for increasing productivity having a minimalistic workspace. A minimalistic workspace will help you to work more productively because the less cluttered your desk the less cluttered your mind.

clean-workspace

3. Staying focused

Staying focused is easier said than done especially if you’re a freelancer working from your home environment, because there are so many distractions which can lead to you neglecting a project. Concentrating on one specific task at a time rather than doing multiple tasks at the same time will minimised your chances of losing focus because all your focus will always be on one specfic task.

4. Close any unrelated programs

During any time I allocate time to work on a specific task i closed anything which is unrelated to that task which I’m currently working on, which means closing tweet deck, signing out of thunder bird and closing Firefox. Closing any program which is unrelated to my current task, so I can work more productively and draw my attention to that specific task.logs

5. Never Delay tasks or deadlines

This is something which I’m guilty of doing myself very often delaying deadlines and tasks, whenever you set yourself a target or goal try your best in order to meet it instead of delaying it to be done another day because you will keep delaying and it will never get done.

books

6. Bonuses From the comments – Learn Something New

Every day learn something new, a tutorial or read an article. Just something in order to refresh our brains as designers.

Follow

Get every new post delivered to your Inbox.