Showcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have.

This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results!

1. CSS Layout Generator

Showcase of 40 useful and powerful CSS tools and generators. These tools should really relieve web developers  work. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

2. Simple CSS

Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface.

3. Code Beautifier

Formats and optimizes CSS.

4. Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

5. CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

6. CSS Superscrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

7. CSS Validator

The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server.

8. CSS Sorter

CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.

9. Browser Support of CSS Properties & Selector

This is a list of CSS properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, more will be added as time permits.

10. Layout Generator

Generating multi-column and grid layouts with CSS 2.0 techniques using %, px, or em.

11. Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

12. Blueprint Grid Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css  and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24  columns in your design, this generator now enables you that flexibility with Blueprint.

13. Grid Builder

The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes. Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

14. CSS Menu Builder

Choose from our 300+ horizontal menus, our 700+ vertical menus combinations and our breadcrumb menus  that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

15. CSS Menu Maker

Here you can exploit gallery of professionally designed CSS menus, customize them and then download the HTML and CSS.

16. Jotform

Web-based WYSIWYG form builder

17. Quick Form Builder

Allows you to easily create CSS forms.

18. CSS Button & Text Field Generator

Generates CSS based buttons and text fields.

19. Rounded Corner Generator

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or JavaScript.

20. CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

21. Typetester

The Typetester is an online application for comparison of the fonts for the screen. It’s primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

22. Image Replacement Methods

Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.

23. CSS Frame Generator

This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line.

24. Postable

“I absolutely hate having to switch all the “< ” and “>” signs in my code to “&lt;” and “&gt;”, respectively. I also hate having to write “&amp;” anytime I want to include an ampersand. This makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” Created by Elliot Swan.

25. Slickmap

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

26. Text Wrapper

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

27. Listamatic

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

28. CSS Sprite Generator

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position  CSS property can then be used to shift the visible area to the required component image

29. Colors Pallete Generator

Welcome to CSS Drive’s Image to Colors Palette Generator! Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration. Generates also Photoshop swatches and CSS styles.

30. CSS Table Wizard

Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

31. Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

32. IE6 CSS Fixer

A tool specifically designed to ease the pain of the IE6 CSS debugger. This tool was conceived to decrease the monkey work when starting an IE6 CSS fix file. It applies a series of basic fixes that are known to conquer many problems and cause as little harm as possible.

33. Mappet

CSS image maps generator

34. Sky CSS Tool

Sky CSS allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning.

35. ReCSS

This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.

36. CSS Viewer

A simple CSS property viewer. Firefox addon.

37. The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

38. CSS Evolve

CSSEvolve lets you play with many properties of a web site, including the site’s color scheme, fonts, borders, and more. CSSEvolve works through a process of simulated evolution in which you select site features that you like and refine them through multiple generations.

39. Wordoff

Wordoff applies the following rules to strip the cruft that is pasted into WYSIWYG editors from Word:

• Attributes are removed for all elements except <a>s
• <span>s and <div>s are removed
• Empty elements are removed
• Consecutive line breaks are reduced to two

40. CSS Fly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet  files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the sceneries of your favourite websites.

First, I’d like to thank Joubert Quentin a.k.a hybrid-creation for allowing me to create this tutorial based on his image, Your Skull is Red. You can see his portofolio in DeviantArt or his personal site. Before we start, take at look at the image we are about to create below.

In this tutorial we will learn how to create selection, adjusting color, and adding depth to image.

Source Needed

For this tutorial, we will need these images:

• Water Tower from fairiegoodmother.
• Premade Background from night-fate.
• Brocade Victorian Gustov 3 from falln-stock.
• Top Hat from luna-8.
• Old Top Hat collection from azenor-stock.

Step 1: Selecting The Victorian Man

We’ll start by cutting this man from his background. For this type of selection, I prefer to use the manual way, path. From paths panel create new path then using pen tool draw path around the man. As you can see i don’t care much about his face because we will remove it later.

Step 2

Once we’re done creating path, hit ctrl+Enter to change it to a selection. Press ctrl+J to duplicate the selection to a new layer. You can also do this by selecting menu Layer > New > Layer via Copy. To help focus on the man, hide Background by clicking its eye icon.

Step 3: Removing Face

To remove his face we can just use an eraser.

Step 4: Fixing Floating Hat

Now, we need to create his bottom hat. To do this we must draw manually using clone tool. Activate clone tool and check Sample All Layers. This option allow us to clone on a separate layer and keep the original picture safe. Then create a new layer. With clone tool sample a similar color from his hat by alt+click it.

Step 5

With clone tool, draw his bottom hat. This might take a while, I spend 10-15 minutes for this. To keep it natural I suggest you to use different clone source every time you click.

Step 6

Using lasso tool, create ellipse selection underneath his hat and fill it with black.

Step 7

Add Gaussian Blur (Filter > Blur > Gaussian Blur) to give it a soft realistic shadow.

Step 8: Fixing Collar

We need to manually draw his back collar. The step is a bit similar to what we do when creating bottom part of his hat. Create a selection in collar shape, sample color from his front collar, then draw it directly with brush tool. To avoid flat color we must use many color source from his front collar.

Step 9

Draw shadow inside his collar and add another Gaussian Blur.

Step 10: Import Man Without Face To New Background.

Now we’re done with this man. Select all (ctrl+A), click Edit > Copy Merged (ctrl+shift+C). In our new background paste the man (ctrl+V) and resize it (ctrl+T). See image below for reference.

Step 11: Dodge and Burn

We still need to fix lighting on the man. To do this, we will use non-destructive burning and dodging. First, alt+click New Layer icon. In the dialog box select Use Previous, Mode: Overlay, and Fill with Overlay.

Step 12

See picture below! The light source is behind the man so his back must be lighter than his front. To fix this, paint with burn tool to make it darker and dodge tool to make it lighter.

Here’s what we see if the layer is in Normal blend mode.

Step 13: Add Shadow

Off course this man must have shadow. We know that the light source is behind him, so the shadow must be in front of him. Duplicate the man layer and hit ctrl+T. Hold ctrl and move its corner until it lies on the ground.

Step 14

We don’t want to see his twin lying on the ground right? We want his shadow.

So, here’s the trick. Hit D, this will change foreground color to black. Then hit shift+alt+delete, this will fill layer with foreground color (in our case, black).

Step 15

We still need to focus on the detail. As you can see below, cane’s shadow moves a little and there’s a hole between his feet. I fix this by doing minor transformation and painting with black.

Step 16

Add Gaussian blur to create a soft realistic shadow.

Step 17

Farthest shadow need to be more blurry. So, select those part, soften the selection with Feather (Select > Modify > Feather), and another Gaussian Blur. Here’s a tip: because we’ve just perform a Gaussian Blur we can just hit ctrl+F to repeat it again. If you want to use different radius use ctrl+alt+F.

Step 18

Add layer mask and add black to white linear gradient to make the shadow fades away.

Step 19: Add Water Tower

Selecting the water tower with path is not a good idea. You’ll get frustrated doing it. The easiest and smartest way is using color information in channel. Our image is in RGB, that’s Red, Green, and Blue. The water tower stands in front of a clear blue sky. So, the sky will be very visible in Blue channel. Now, I want you to duplicate Blue Channel by dragging it to the new channel icon.

Step 20

Add Levels (ctrl+L) with this setting.

You can see that the sky has magically disappear. Try that with pen tool!

Step 21

Some part of the water tower is turning white. We can fix it easily by painting it with black.

Step 22

Here’s the basic principle of masking: “White reveals, Black conceals.” We want to select the water tower, not the sky. So, the sky has to be black and the water tower has to be white. Wait! Our image is completely wrong. That’s easy, just hit ctrl+I to invert it.

Step 23

Ctrl+click blue copy channel to convert it to a selection. Copy the image and paste it behind our faceless man.

Step 24

You might notice that the there’s a small part of the sky in the water tower. Here’s one easy way to fix it. Ctrl+click water tank layer. Contract selection by 1 px (Select > Modify > Contract). Click add layer mask icon.

Here’s the result.

Step 25

Fix the lighting with non-destructive dodging and burning. We have done this in step 11.

Step 26: Adding Depth of Field

It’s time add depth to this image. Cut one of the hat collection from old top hat set. Paste it and place it near the edge of the canvas. Hit ctrl+T and rotate it to give a more dynamic movement.

Step 27

Give it a Gaussian Blur. Because this hat is near us, we’ll give it a big radius.

Step 28

Add another hat and give each different radius depends on its position.

Step 29: Add shadow

Dont forget to give shadow to the water tower. The step here is similar to what we did when creating the man’s shadow. Duplicate water tower layer, fill it with black, transformation, add Gaussian blur, and fading it with gradient mask layer.

Step 30

Again, don’t forget to add shadow for those hats.

Step 31: Final Adjustment

I want to add more blue to the sky. For this, I add adjustment layer Channel Mixer on top of all layers with these settings.

Step 32

Paint everything with black except the bright sky in top right. Now, only that part is affected by the Channel Mixer.

Step 33

To add more contrast add adjustment layer Levels with this setting.

Step 34

Paint everything with black except the faceless man.

Step 35

Finally, I want to make this picture warmer. Add an adjustment Layer Photo Filter with Warming Filter (85), Density 25%.

Conclusions

And here’s what we have now. I hope you like the final effect. If you have better tips about the technique used here I’d love to hear it.

Download FREE PSD File!!!

To help you learn this tutorial you can download the psd file here.

Tumblr is set to become the blogging tool of 2010 with its massive growth, yet still many people don’t fully understand what Tumblr does, or how it works. If you’ve ever tried to start a blog, but found yourself struggling to find the time, Tumblr is something you’re definitely going to want to take a look at.

What is tumblr?

Put simply, Tumblr is a service that does exactly what Wordpress does for blogging, but for microblogging, or tumbleblog’s instead. To fully understand what Tumblr does, you first need to understand what these so-called tumbleblog’s actually are.

A tumblelog is a variation of a blog, that favors short-form, mixed-media posts over the longer editorial posts frequently associated with blogging. Common post formats found on tumbleblogs include links, photos, quotes, dialogues, and video. Unlike blogs, this format is frequently used to share the author’s creations, discoveries, or experiences without providing a commentary. – Wikipedia

What does this mean? Well basically, Tumblr fills the gap between Twitter, where people tweet resources, images, and thoughts, and traditional blogging platforms, like Wordpress where each post is a proper article. Instead, Tumblr works with seven types of post; text, photo, quote, link, chat, audio and video, and it handles them all very well.

Why is Tumblr becoming increasingly popular?

According to Tumblr statistic’s, in the last six months, Tumblr has grown from around 300M monthly page views, to over 1 Billion in February 2010; a massive growth for any product, and it speaks for itself really. A product doesn’t grow at such a rapid rate, if people aren’t enjoying using it.

Easy to update

The biggest reason behind Tumblr’s growing support, is it’s vast number of social features, and it’s ease of use. For a start, Tumblr make it extremely offer for you to post to your blog, even if you can’t access your homepage yourself. Here are some of the clever ways Tumblr makes it possible for you to update your tumbleblog:

• Text your blog updates from any mobile phone
• Email your updates via one of the most sophisticated email publishing platform available.
• A Bookmarklet allows you to post anything and everything you come across while browsing the web.
• Post via AIM by messaging TumblrBot.
• Phone your TumblrBlog, and leave voice posts.
• Automatically post from any other site or profile.
• Use the official Tumblr iPhone app to easily update your blog.
• Third Party App’s expand your options even further.

3rd Party Applications

As well as the fantastic free iPhone app that is available officially from Tumblr, you also have access to a multitude of applications for the iPhone, Web, Desktop’s, Mobile’s, Widget’s and Browser’s. They are all filed away tidily in an official Tumblr app directory.

Social Network Integration

Definitely high up on the list of reasons for Tumblr’s acceptance has been its solid two-way integration with other social media, and networking services. Part of its automatic posting from other sites come from major names such as Digg, Youtube, Facebook and Twitter, but it doesn’t stop there. As well as having the ability to automatically pull in your content live from these sites, you can also send information back. Facebook is a prime example with its ability to show your activity on Tumblr on your Facebook wall, keeping all your friends up to date with what your blogging and activity.

Other notable features

Other than those already mentioned, Tumblr also focus’ on those important, but small things that you need.

• Easily add any analytics tracking code you want to your tumbleblog
• Tubmlr is optimised for Google in everything from the site slugs, to the sitemap
• Built in privacy allows you to restrict specific posts, or your whole blog to certain people
• The ability to use your own custom domains on your tumbleblog
• FeedBurner support allows you to see important RSS feed stats
• It’s free, and you don’t need to pay for hosting, or storage!
• You have the ability to create your own custom theme.

What is the backend of Tumblr like?

First off, Tumblr wouldn’t be where it was if it wasn’t for its easy to use backend user interface. The interface is split into two sections; the dashboard, where your’s and other peoples content meet you, and customisation, where you control all sorts of aspects of your tumbleblog.

Dashboard

Posting any of the seven different type’s of content from your dashboard is a breeze, with visual buttons, and a clean design. The backend goes on to keep you up-to-date with all the Tumbleblogs you are following, in a very Twitter like manner, keeping it clean and easy to read. For a look at how the dashboard looks, click on the image below.

Customisation

Customisation though, is a whole different kettle of fish. It is basically a dummy page of your current theme, with one default entry in each of the seven post categories. A menu bar at the top of the page allows you to make many important, and useful changes and decisions that affect your tumbleblog.

The menu provides a multitude of options;

• Info - This allows you to specify the basic information of your blog; things like your blog title, description, and avatar picture. The notable option here though, is the ability to change your tumbleblog url instantly, or even use your own personal domain allowing you to use a domain without the tumblr.com suffix.
• Theme – This menu item is fairly self-explanatory; it allows you to select a theme from Tumblr’s “theme garden” to use for your blog. There are over 300 of them, all for free, some of which are of an impressive quality. As well as using a premade theme though, you are given the option to use “custom html”, another way of saying your own custom-made theme, something we will go through in great detail at a later date.
• Appearance – This allows you to make quick changes to your current theme. Not every theme has appearance options, but the default Tumblr theme certainly does, and allows you to change things such as font’s, colour’s, and background images without touching any code; anther thing that makes Tumblr so popular for those that are not so comfortable delving into code.
• Pages – This allows you to create static pages, much like other blogging platforms such as wordpress. Pages come in three categories; Standard Layout, Custom Layout, and Redirect.
• Services – Already I have mentioned the great amount of social networking integration that Tumblr has, as well as its integration with other web services such as YouTube and Feedburner. Services allows you to pick and choose which of these services you want to use, and lets you connect all your accounts up.
• Community – This allows you to add, as the title dictates, a community element to your blog. There are to ways to do this. One is the creation of a page that allows your readers to ask you questions, and the other allows your users to contribute their own posts to your submission queue for approval by you.
• Advanced – The final menu item features further options for your blog that don’t really fit into the other categories. These are things like your timezone, url slug structure, privacy options, post’s per page, and so on.

As you change these options, especially your theme options, the dummy page below changes to mirror the choices you have made, allowing you to check how your blog will look, as you work.

Conclusion

Tumblr is a fantastic piece of kit, filling in that gap in the market between products such as wordpress that provide full blogs, social networking such as facebook, and status updating from Twitter, and it does it extremely well.  Tumblr is honestly a pleasure to work with. Simplicity makes the user interface effect and easy to use, and you never feel like there isn’t anything important missing, or out of your control. It makes blogging and sharing things you find on the internet a breeze, and most importantly, unlike Twitter, it does so visually. If you find yourself failing to keep a full blog up-to-date, and enjoy sharing the things you find, the there’s no easier way to do so than Tumblr, so give it a go.

Keep an eye here at 1stwebdesigner for more on Tumblr!

For those that do choose to start using Tumblr, or already do, then keep an eye here, because coming up are several articles that will increase your happiness with Tumblr, such as a roundup of fantastic themes, and more importantly learning how to create your own custom theme! For now, check out these 5 impressive tumbleblogs for inspiration to see what Tumblr is truly capable of.

Metalab

It’s the interwebs

Mark Jardine

Tmblg

Name that film

Hope you enjoyed this post – keep coming back for more!

Nowadays, there are so many graphic designers who have their own style of making icons and buttons. I have my own style too. Take your time to read on my Adobe Photoshop tutorial on making cool icons for your social media buttons. Actually, it can be applied on so many things, not only social media buttons, but I believe this effect could be the best one to be applied on your social media buttons.

I have also made 25 social media icons for 1stwebdesigner readers. But take a look at the tutorial first, then you may download those icons for free.

1. Make A Rounded Rectangle

The size and the color of the rounded rectangle is completely up to you. In this tutorial, I am using 10px radius for the rounded rectangle.

2. Give Effects

3. Add Some Text & Logo

In this example, I am using Futura for “SUBSCRIBE” word and Verdana for the rest. Once again, you may choose your own fonts and elements to be added on the rounded rectangle. I used Futura & Verdana simply because they are my favorite fonts.

Please note that I am using RSS logo from Iconspedia, which can be downloaded for free here. Feel free to download it as it is free to be used on personal and commercial project.

4. Add Effect On The Logo (optional)

Do you notice that there is difference on the subscribe logo? This is optional one, you may apply this effect if you want.

5. Important!

Remember to remove background layer before saving your file as .png format. You must save this as .png format if you want to place your button on colored background.

Download PSD file & Fonts

I believe some of you want to apply this effect. I am providing psd file for all of you who wants to apply this effect instantly, without following steps that I’ve explained. I have also provided Futura & Verdana to be downloaded for free.

Some Example That I Already Made

These are some of the buttons that I have made using this cool effect. If you want to see where I used them, just visit my blog. I placed RSS and Twitter button at top sidebar. I have also used Stumble Upon button at the end of every article.

1WD Social Media Icons Pack By Albert Lie

Actually, not all of them are social media icons. I add some icons like friendster, blogger & skype just for fun only.

License: This icons are licensed under GPL v2. You are free to do anything with them. The only requirement is to keep them free for users. There is no attribution link needed and you are allowed to use them in your personal and commercial projects for free.

HTML5, the next major revision of HTML, the language of the internet, is set to revolutionize the way web developers and designers create websites and the way visitors use them. It’s being edited by Ian Hickson of Google and David Hyatt of Apple, two of the web’s greatest creative minds.
Besides enabling web developers/designers to use cleaner, simpler, more consistent code, HTML5 will help them break free from the confines of 3rd party proprietary plugins like Adobe Flash. For the first time, it will be possible to achieve consistency between video player interfaces and overall website design. Users will be able to rotate, move, resize and even detect motion in a video while its playing, using inbuilt video controls.

Through HTML5’s canvas element, users will be able to render graphics and images on the fly, again without the need for plugins. You can try rotating an HTML5 video here and using the canvas element here. Both feel truly amazing!
Besides demos and other online experiments, there are actually a number of working sites using HTML5 today, although few, if any, make the most of this language’s potential capabilities. We explore 25 of the best below, the vast majority of which belong to web developers and web development agencies keen to show off their HTML5 skills to potential clients. Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer.

1. Ella Design

Originally from Hong Kong, but now based in the USA, Ella of Ella Design is an award-winning graphic/web designer with over 8 years experience in the industry. Her website is a “playground” in which she engages with HTML5 and CSS 3.

2. Pelletized

Pelletized is the site of Ed Wheeler, Oregon-based graphic/web designer and HTML/CSS developer extraordinaire. He’s played a major hand in the creation of several high-profile sites, including JobInterviewEdge.com and EssayEdge.com.

3. MiniApps

MiniApps is a mobile phone app microsite from Alex Gibson, currently offering two great, free apps for iPhone, Android, Palm Pre and Firefox Mobile: Card Flip, a classic memory game, and Checklist, a to-do and shopping list tool.

4. Donkey Magic

Donkey Magic is Richard Stephenson’s blog. He uses it to keep the world up-to-date with his web development work and life in general. Recent posts include a CSS 3 & jQuery image gallery experiment.

5. Bonsai

Bonsai is a unique web development tool used to build sites that feature lots of images. Bonsai’s own website has been created using HTML5.

6. letscountthedays

letscountthedays is the online portfolio of Shane Howe, web and user interface designer. His client list includes Pinnacle Security and Urban Shadow, for whom he performed all web design, branding and even online copy writing.

7. Sarsini

Learn more about Martin Sarsini, Glasgow-based web developer, on this HTML5-fortified site. This site, which incorporates a blog, is simple, but very stylish.

8. Nimbupani

Nimbupani is home to web designer, Divya Manian. Obsessed with HTML5, you can learn a lot from her blog as well as her Twitter page.

9. Ousmane Ndiaye

Ousmane Ndiaye is a passionate, French web designer. An SEO and W3C standards specialist, his site makes the most of current HTML5 knowledge.

10. Media Research Institute

Experts in all things web based, the Media Research Institute operates from Tokyo, Japan. Besides building websites, the company has produced many popular mobile apps, such as Mixi.

11. Anino

An interesting bunch, Anino are a shadow puppet collective based in the Philippines. Their site offers listings of upcoming shadow-puppet performances as well as several videos highlighting their work.

12. CatCubed

CatCubed is the site of Colin Fahrion, artist, designer, developer and avid cyclist. The site looks great in Firefox and Safari, but Internet Explorer can’t handle the large amount of CSS 3 used.

13. Impactideas

Impactideas is a small graphic design studio based in Belgium with a lovingly designed website. They specialize in the creation of logos, brochures, catalogues and packaging.

14. Moriconi

Moriconi is a highly fashionable Italian hair studio, based in Camaiore, Lucca, Tuscany. HTML5 has brought this straightforward site to the cutting edge of modern web design.

15. LittleCoogie

LittleCoogie, based in Bangkok, Thailand, sells high-end children’s party clothing through its HTML5 e-commerce site, made by Andrew Brundle. Its color-picker tool is a great feature.

16. OK Cool

German fashion blog, OK Cool, incorporates HTML5 into its search functionality and comment forms.

17. Dn’D

French web development agency and Magento e-commerce expert, Dn’D, has created a really stylish site for itself, even if it is a little too reminiscent of the standard OS X Leopard background. Since its formation in 2004, Dn’D has worked with BP, Warner Bros and many other high-profile clients.

18. Sprachkonstrukt

Sprachkonstrukt is a blog covering all things related to design, photography and digital lifestyles. It’s managed by Ruben Deyhle, a web developer who also runs a photo blog on the site.

19. Stompfrog

Stompfrog, website of web designer/developer Chris Bewick, is a wonder to navigate around. Users can scroll through the website using their mouse wheel- a highly original touch.

20. Shape Shed

Shape Shed, website of freelance, London-based developer George Ornbo, was built using Jekyll, a simple static site generator, as well as CSS 3, jQuery and HTML5. Firefox or Safari is needed to see the site as George intended.

21. Smile Sleepy

Jamie Calabro is a web designer/developer with a great knowledge of everything from HTML to CSS, JavaScript, SEO, brand development and even print and packaging design. He can count Coca-Cola amongst his past clients. Smile Sleepy is Jamie’s place to showcase his work to the world.

22. sw’as

The rather unusually named sw’as is the home of 26-year-old web developer Simon Elvery. Alongside engaging articles on everything and anything internet related, you’ll find musings on politics, books, movies, music and more.

23. Frojd

Frojd is a beautifully designed blog from Swedish digital agency of the same name. Thanks to plenty of white space and a grassy header image, this site feels as fresh and airy as a Swedish fjord.

24. Tim Benniks

Tim Benniks is a Dutch web professional who specializes in the development of simple, intuitive interfaces. Use his site to get in touch with Tim himself or to view his past projects, which include a new CMS called Zotonic.

25. DS3

From Sao Paolo, Brazil, DS3 is a web agency with a fantastic eye for visual communication and style. It recently masterminded a new branding initiative for the largest maker of forklift trucks in Latin America, Paletrans.

We hope you have enjoyed our last collection of web and user interface icons. This time you are going to get a good and quality collection of social media icons. This list will be very useful for bloggers,web designers and graphic designers to promote their articles and their services. The usage license is described for some icon packs here.If you need more information about the icons usage you can get from their source page.

To promote your blog or articles in social media world you need a creative and unique icons and i am sure you will find your most favorite and suitable icons here to include them in your blog or website.

1. WHITE MAGIK – A Free Social Icon Pack

A clean set of icons from chethstudios.Re-distribution not allowed! White Magik is perfect for white minimalistic sites and can be used with image hover for excellent looks!. It includes 45 icons in .PNG format.

2. Elegant social media Icon Pack

Just another contribution from chethstudios. An elegant design icons. Well you’re free to use in your blog. But Please DON’T re-distribute.

3.3D Social media icons

This 3D Social Media Icon Pack comes with 20 icons which include your favorite social media websites such as Digg, StumbleUpon, Twitter and lot more from dawghouse design studio.Get the license details of usage from source.

4.Vintage post stamp icons

The set comes with 23 icons of your favorite social media sites, all in 200 x 200px and in transparent PNG formats. These icons would surely be a perfect fit for your vintage or grunge themed web designs!

5.Glowing social niche icons

Neat icon set.License usage :Creative Common license BY-ND

6.Social icons sticker set

Pretty nice icons. It’s a sticker type social icons.Available in .PNG, EPS and Ai format. Free for any use.

7.Social icons vector set

Consists of 16 popular social media icons, available in both vector and PNG (64×64 pixels) format. Free for any use.

8.Social icons pack by Sylwia Besz

Clear design icons.This work is licensed under a Creative Commons Attribution 3.0 License.

9.Social media icons pack from Blogperfume

Designed as a circular style. Available in 3 sizes (128*128, 64*64, 32*32).Please feel free to use Social Media Icons Pack on both personal and commercial projects. These icons are designed by Eli a south Australia web designer. They provided these icons in two parts.

10.Woven fabric social media icon set

This set contains 26 icons of your most favorite social media sites such as Digg, Delicious, StumbleUpon, Twitter, Facebook and lot more! These icons would be perfect for websites or blogs that uses textures or a grungy theme.

11.Social icons made of wood

Wood theme icons from webtoolkit4.me .The set consists of 11 icons in PNG format (64 x 64). It’s free for both personal and commercial projects.

12.Icon texto web 2.0 inside icon pack

Download this free Windows Vista icon pack for your Website or Application. 32 icons in .PNG format.It’s free! These icons are released under CC License Attribution-Noncommercial 3.0

13.Amazing 3d social icons

A brand new set that consists of 20 3D icons in PNG format (64×64 & 128×128pixels). It’s really an awesome icons.

14.Hand drawn social icons

Very cool and creative set of drawn, sketched social icons! Have fun with this one! Hope you enjoy them.

15.Worn out soda cans-social-icon-pack

The Worn-Out Soda Cans Social Media Icon Pack is free to use for both your personal and commercial projects.The icon pack once again features icons of our favorite social media sites in 200×200, transparent PNG formats.

16.Social media icons by plechi

Free vector social media icons.This work is licensed under a
Creative Commons Attribution-Share Alike 3.0 License. Designed by plechi.

17.Jeans-social-media-icon-pack

Great work and unique idea the designer.Free for personal and commercial use.the credit goes to nishad.

18.vector-social-media-icons

This free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format. Now this icon pack is updated recently.This icon set is released under is licensed under Creative Commons Attribution-Share Alike 3.0 Unported License.

19.Minimum-icon-set

This  minimum social media icon set.includes deviantart, delicious, flickr, Gmail, twitter.This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

20.Grunge peeling stickers social media icons

This Icon Pack is chuck full of 20 Grunge Peeling Social Media Stickers, This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

21.Iconshock’s free social icon pack

Smooth edge icons and a classy look.It’s a freebie from Iconshock.

22.Wooden badges icon pack

The icon pack contains web and social media icons such as StumbleUpon, Digg, Twitter and several others!.This icon pack is free to use for both your personal and commercial projects but may not be sold or redistributed in any way.

22.Icon pack with PSD

A full set of icons ready for use with mac and pc. Attached with PSD.

23.Social grunge icons

Grunge effect in social icons made in a elegant way.available in PNG format.Designed By: tydlinka

24.Networking and Bookmarking icon set

There are a total of 36 icons with 9 different Social Media – Networking  & Bookmarking sites.Of course this pack is going to be regularly updated and reorganized .License/Usage : Free for personal and Commercial work

25.Icons made with the type tool and helvetica

Helvetica social Icons that are 99% made with the type tool in Photoshop.
Everything is made with the type tool in Photoshop and variations of the Helvetica font.There aren’t really any typographical icons around the web like this icons.Free to download and use.

26.Social web button sets

There are 20 social web buttons in two sizes and two colors. Download is free.

27.Old bottle crowns icon set

The icon set consists of 20 very unique and never before created bottle crown icons such as Digg, Stumble Upon, Twitter, Delicious, Technorati and a whole lot more.These icons are free to use for both your personal and commercial projects but may not be redistributed or sold in any way.

28.Gummy-social-icon-set

29.Social trucks icon set

Social Truck Icon set consists of 10 social network icons; These cute icons are designed by Andrea Austoni . Andrea is an Italian freelance designer currently living in Krakow, Poland. He specializes in icon design and illustration.these icons are absolutely free and you are allowed to use them in personal or commercial project. Just don’t redistribute

30.32 Pixel Social Media Icons

Free for personal and commercial use.Cute design.

31.Web 2.0 Gift Icons by IconsPedia

This icon pack contains 14 icons, including popular social bookmarking services and our favourite browser  Firefox etc… The icons are available in PNG, ICO and ICNS format. They are free to use for both personal and commercial projects, including websites, templates & software. You are not allowed to sell or redistribute the icons anywhere else.

A Big treat from webtreat

In this below lists  you are going to view a massive contribution of webtreats.mysitemyway.com in social media icons.They have done a great work in social media icons! and these are high quality designs.

32.Glowing Neon Social Networking Icons

108 free high-resolution Glowing Neon Social Networking Icons. 2,000 more icons of this style will soon be released on ETC format.

33.Crystal clear bubble icons

It’s an updated set of icons including Drupal,Deviant art icons etc… They are free to download and use. 154 icons available.

34.Blue Chrome Rain icons

2000 more icons are available in this style in webtreats.

35.Orange grunge stickers

Wonderful orange social media icons in grunge style with some pop out effect.

36.Black paint splatter icons

No attribution necessary for these icon packs.Splatter effect in social media icons it’s a creative and unique concept from the designers.

37.Red and white pearl icons

38.Glossy black glass icons

20 web icons in .png format made with these styles, and a layered psd of the image below, which has editable text should you want to use this as a text effect.

39.Blue Jelly Social Media Icons

40.In-focus simple white icons

This matching set is designed to be put in the sidebar of your theme so you can link to your social media profiles.There are 10 more color variations for icon set is available.

41.Glossy waxed wood icons

42.Retro Grunge Stripes Social Media Icons

A classy look and these icons meet international standars.Retro Grunge Stripes Social Media Icons.

43.Crumpled paper social icons

A creative look for social media icons by this way.It’s suitable anything like grunge or crumpled themes.

44.Glassy space social icons

Just another beautiful glassy style icons.

45.Grunge-warning-stripes

46.Vibrant pattern icons

This vibrant pattern icons social media logos set includes the most popular social bookmarking and networking icons (Digg, Delicious, StumbleUpon  and Yahoo logos etc…

47.Twitter icons

Free set of unique twitter graphics.There really is no limit to what you can do with this brilliant set, lovingly designed by Pasquale D’Silva.The set includes 40 Files in total, all in transparent .png format.

48.Twitter icons by sibusinho

Really a cute twitter icon for your blogs or websites.Also only noncommercial use is allowed.

49.Twitter icons promo set

This breaks down to roughly 1,800 icons added to each existing set and 20 brand new sets! Here’s a little twitter promo pack with 53 twitter icons, one from each set!.

50.RSS cheese icon style

The set contains 4 high resolution RSS icons that come in four sizes: 512×512, 256×256, 128×128 and 64×64. Icons are completely free and can be used without any restrictions in any type of project including commercial projects.

This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known blog redesigns – showing pros and cons. I think real examples are the best way to show the point and teach something! Let’s start – we will be happy to hear your feedback! It will be exciting!

ReadyPhotoSite is a flash photo CMS created especially for photographers, painters, artists and people of art. The CMS is presented in 3 different packages that vary in functionality and a number of skins, so you can choose the design you like and then choose the website features.

We started working on this ReadyPhotoSite project on May 2009 together with Karen Myers who is presently the CEO of readyphotosite. But Karen is not only a partner, but also a good friend of mine so we were both into it.  By the time we started working on website design, the product (the CMS and the skins) was ready and our task was to launch a simple website as soon as possible, apply the changes and make the updates as we go. And so we did.

Starting with a simple website and the problems we faced

The website we have uploaded online consisted of the following main pages:

• home page
• products page
• why buy
• link to blog
• contact page
• links in the footer to Tutorials, TOS, Privacy, Tutorials and Hosting.

The home page had around 10 lines of text and a cool stylish intro in retro style in the middle – home page didn’t share almost no information about the product and thus was pretty useless. Besides it took around 30 seconds for the intro to load and we were loosing most of the people already in beginning process when they were visiting our home page.

Still the owners of the project insisted we should keep the intro as they spent a good amount of money on it and wanted to see it online no matter what.

As I have mentioned at the very beginning of the post, the ReadyPhotoSite websites are available in 3 packages:

• basic,
• advanced
• ecommerce

Look above, there is the screenshot showing how this concept was presented on the website.

While the products page itself had the basic text info, the buttons in the header lead to almost identical pages of basic, advanced and ecommerce packages that had:

• screenshots of design themes listed on them
• the link to the preview
• the buy button

All the pages had the list of the same theme’s screenshots which was obviously somewhat confusing for the website visitors as without visiting the features page they had no idea of the difference and they just saw that same designs.

The initial purchase process was even more complicated. The buy button next to the skin lead to a static html page with 2 options to choose from- “Host with ReadyPhotoSite” or “I already have hosting” and 2 separate links that took you further to the shopping cart page( the WHMCS shopping system allows creating only static product links). It was only later that we realized that the purchase process was a real nightmare with too many steps and no convenient option to choose other design or other package.

The other thing that we initially paid no special attention to was the skin preview page, that was simply opening the website in the new window and where we were loosing customers as well since there was no calls to action or some kind of info how to move forward.

The website required a serious work. In about 3 month after launch we were getting nice targeted traffic from search engines, photo forums and blogs, photo communities, template and CMS reviews websites, paid ads, social networks and our partners, but the website was not converting the traffic into sales. We had a tremendous bounce rate of about 50% and people were staying on the website for less than 30 seconds, getting lost and not sure what to order and how to order. So we have started on conversion rate optimization, creating a user friendly website step by step.

1) Moving the intro to the inside page.

The first step we made was the optimization of the website home page that was the main landing page and where we were loosing most of our clients because of the intro. We have replaced it with the large graphical collage explaining how to launch the website with ReadyPhotoSite CMS and huge buttons next to it: free trial, link to the admin area demo and the link to the page with the intro (requested by owners). Below we had a new keywords-rich text explaining the advantages of RPS and listing some of the main features.

2) Reworking the product pages.

The products pages and the ordering process was a real pain in the ass. We had 4 tasks to solve:

- reduce the number of steps before the purchase;
- give an easy option to get back to other products and packages;
- make the product structure understandable( the relation of skins and packages);
- inform the potential buyer about package features on the fly (so that they don’t go away from the purchase pages to the features page).

And here’s what we did:

1. Removed the buttons (and the pages) to advanced/creative/ecommerce packages from the menu.
2. Replaced the text on the products page with the list of skins screenshots and added buy and preview buttons.

Now the problem was how and where do we actually link the buy and preview buttons (as there are 3 different previews for every skin (for basic, creative and ecommerce packages) and 6 buy links (as every package can be purchased with hosting or without it)).

The new buy page have solved all the tasks. Before reading this articles further I suggest to open this page online so that you check in real how it works. Click on any buy or preview button on this page http://www.readyphotosite.com/products.php and you’ll be taken to the buy page.

• we combined the preview page with the purchase page and now we keep the visitor focused on the purchase;
• the buy or preview button from the products page automatically loads the preview of the ecommerce package of the chosen theme (since it’s most expensive and we’re interested in more people buying it);

- on the first step you can browse between different themes and the preview will load below (to ensure better theme browsing we have added “hide panel” option at the very top of the page);
- having chosen the theme you can now choose the package on the step 2. Next to every package there’s the price and the list of features included;

- finally on the step 3 you can choose whether to host with ReadyPhotoSite or not. You will also be shown the pricing and the hosting details.

With the options for the 3 steps loaded you can still change the settings on that same page. You can choose the other theme or the other package or change your mind about hosting. Finally the buy button will take you to the purchase page with all the options you have taken.

3) The need in new pages.

Making the analysis of the keywords people were using to find our websites in search engines from Google Analytics we have decided that it makes sense to create the keyword oriented pages giving the same time valuable information about the product. Some of the keywords included:

* Photography Website Design
* Family Website Design
* Personal Website Design
* Wedding Website Design
* Maternity Photo Website Design
* ReadyPhotoSite review

While creating the pages we have faced another problem. The main website navigation allowed 5 buttons only and the footer was already crowded with the sub pages and we simply had no place to add the pages. In the next 2 points below I’ll be explaining how we addressed this problem.

4) Creating new home page.

Having tested the new home page for several months time we were still not satisfied with the results. We needed to push more people to the products pages and use the place on the home page in more efficient manner. Though the picture was good for people, the home page itself could not be called a good landing page.

1) First of all we decided to decrease the size of the header area, as it was nice but not functional so we reduced it by 40% or so.

2) We then decided to decrease the height of the collage on the home by 50% to give more place to content and other stuff.

3) To catch the user attention with the products right on the home page we added the big screen of the featured theme linked to the buy page.
4) We added pretty huge buttons linking to the products page, admin area demo, free trial and the buy button for the featured theme. Having all this main options in the center of the page the website visitor don’t even have to click on the menu to go to the main pages, it’s very intuitive and user-friendly.
5) Following point 3 (the need of the new pages) we added the links to the new pages and the section for
testimonials thus giving the website visitors the information they were looking for directly from the home page.

5) Reworking the blog pages

Writing lots of articles about photography, photo website design and promotion as well as just some fun posts, we were getting really good traffic both from social networks and search engines to our blog. For the first 2 months we were just attracting people by interesting and useful tips trying to get the reputation. In the new few months we have taken the following steps to make this traffic result into the product purchase

1) Added the banner to the left column offering to exchange old photography website to the new one with 20% discount.
2) Added the big buttons linking to the features page and free trial.
3) Finally we have replaced all that we have with the banner rotating the screenshots of our products, big button with the “free 7 day” website trial on it and the full list of product features. It was only this last update that has helped us to drive traffic from blog to the website features and product pages.

6) Reworking the menu structure and adding new pages

Viewing the entrance and the exit points of the website pages we were noticing that our visitors were not finding answers to the questions they were looking for. It was then when we decided to create the product guide section of the website that would contain all the info needed to make a decision.

We have replaced the Why Buy page in the main menu with the product-guide and created the sub pages that now contain most of the website/product info in the structured manner. We have also created the new samples page showing how of our clients customized the default themes and illustrating the changes that can be made from the admin area.

In conclusion

We’ve made a long way studying visitors behavior before the website started looking like this http://www.readyphotosite.com. I have learned that there is always place for improvement and that we are just on the start, not on the finish. We have tried different font sizes, buttons, graphical presentations, motos and texts. We still want to try Google Website Optimizer, add Google Translate, feedback form and some other cool features to make the website even more user-friendly and intuitive. You have to act to be on board. Below are some figures from the stats showing how successful the changes we performed has been so far:
- After second home page update and restructuring of the purchase process the views of the products and buy pages has increased by 50%;
- Thanks to rotating product screens about 10% of the blog visitors now visit the product pages;
- Adding new information and keyword-rich pages increase traffic from the search engines by 30%;
- Adding product guide increased the number of free trials by 30% and the number of general product inquiries by 25%.
Unfortunately I can’t share all the details with you, but overall it was worth the efforts and we’ll keep on working!

Nowadays the need for an easy way to add interactive charts becomes essential because we are shifting from pc applications to web application. jQuery and other libraries allows to make accessible data visualization in (x)HTML, giving us this needed functionality.

In this article we are going to present 5 chart libraries that suit different needs from simple charts to high complex charts. Most of them are free for personal and commercial use.

1. jQuery Visualize Plugin

jQuery Visualize Plugin is the perfect plugin if you have a table and want to generate a chart out of it. It offers different types of charts such as Bar, Area, Pie & Line charts.
Examples

Type of Charts: Bar, Area, Pie & Line.
Requirements: jQuery, excanvas (included)
Browser Support: IE6*, IE7*, IE8*, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9.
* HTML 5 canvas element is not supported by IE but Google maintains a library that translates canvas scripting into VML, allowing it to work in all versions of internet explorer.
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT and GPL licenses

2. Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Examples

Line and column example

Columns with rotated labels

Type of Charts: Bar, Area, Areaspline , Pie, Line, Spline, Column & Scatter.
Requirements: jQuery or MooTools
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and iPhone!
Demo: http://www.highcharts.com/demo/
License: Creative Commons Attribution  Non-Commercial 3.0 License. Free for personal website, a school site or a non-profit organization. For a single commercial Website the license costs $80.

3. Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Examples

Tracking curves with crosshair plugin

Type of Charts: Bar, Area, Point & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Konqueror 4+.
Demo: http://people.iola.dk/olau/flot/examples/
License: MIT License

4. jQuery Sparklines

Sparklines generates small inline charts either inline in the HTML or via JavaScript. It is really good for displaying mini graphs notably because most of them just take 1 line of HTML or JavaScript code. Another great feature is it self-refreshing capabilities. You can see it in their Mouse-Speed demo which shows you the power of live charting.
Example

Type of Charts: Bar, Tristate, Bullet, Box Plot & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://omnipotent.net/jquery.sparkline/
License: New BSD License

5. jqPlot

jqPlot did not catch my eye at first glance but after further research I found it to be one of the best and free jQuery chart library. Numerous graphical options are available you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Examples

Type of Charts: Bar, Pie & Line.
Requirements: jQuery
Browser Support: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9 and Google Chrome.
Demo: http://www.jqplot.com/tests/
License: MIT and GPL version 2 licenses

Conclusion

As you may have seen from this 5 jQuery chart libraries they suit different needs. First Sparklines generates a small inline chart which is perfect for charts where the precision is not important. You look at the small chart and you should directly know what happened.

Highcharts, Flot and jqPlot are very powerful jQuery chart libraries. My personal favourites is Highcharts and jqPlot. The visual quality of Highcharts charts are better than jqPlot but the last one is free. I recommend you to test at least one of them and you will see that they are really powerful.

Finally jQuery Visualize is really easy to use and specially adapted if you want to create a chart out of a table, just like you would do it in excel. This can be convenient when you need a table and a chart to visualize your thoughts. Feel free to give your feedback via comments section.:)

In this Photoshop tutorial we’ll learn how to create a stylish and sleek-looking play station portable. This is very detailed, but advanced tutorial, so if you have basic knowledge and understanding about Photoshop you should be able to easily keep up and let me guide you through this PSP creation process. Each step is followed by screenshots to give you a better understanding. Note that you can always improve and add more details to such designs – it’s hard to understand at first when to stop and when less is more, but I am sure you will get those skills automatically after you’ve done several tutorials and some tweaking by yourself!

This is what we’ll be creating today! Looks good? Great – let’s get started:

Step 1

So at first, let’s create a New Document with sizes – 900×600 px. We will starting by creating the background.

Create a new layer (press Ctrl + Shift + N)  fill it (with any color).

Open the Layer Style window and apply this Gradient Overlay.

This kind of gradient you should get:

Step 2

I’m going to use guide lines to create the PSP shape, so let’s place all the lines that we’re going to need. (To activate the guidelines, you have to activate the rulers at first (CTRL + R) then what you do is click on the ruler, then hold and drag it into position).

For the Horizontal guidelines set: 250px, 280px, 510px, and  540px and for the Vertical guidelines: 120px, 200px, 660px and 740px.

TIPS:

• CTRL +  ; will hide or show the guidelines.
• Use the move tool to move the guidelines around.
• Slide the guidelines back to rulers to remove them.

Pick the Rounded Rectangle Tool (U), set radius to 10px and do the same like I did on the picture below:

Now do the same as I did in the next picture. I used another color so you could see better difference:

Step 3

Now create a new layer, set the Brush Tool to 411px and draw two rounded circles as seen in screenshot below:

Now set circled brush layer behind the other layer and erase the parts you don’t need:

Step 4

Create a new layer, make selection with Lasso tool(press L to get it) similar like in the screenshot below and fill it:

Duplicate it 3 times more and set the others to each corner of the shape. You can go to Edit, Transform, Flip Vertical and/or Edit, Transform, Flip Horizontal to help you rotate the shapes.

Now select all the (parts) layers (Hold Ctrl and click the layers), right click and select  ”merge layers” and add these Blending options:

Step 5

Now with your psp shape still selected let’s create a new layer, select the brush tool and choose white.

Set 35px for the brush tool and then select the Pen tool (P) and create a line like I did. then right-click and select “stroke path”, choose brush and hit OK.

After that click right click and click “delete path” and set the Opacity (of the layer) to 20%.

Create a new layer, set the brush tool to 16 px then select your Pen Tool and create something like this then right click and select “Stroke Path” – choose brush and click Ok. Right click again and click “Delete Path”.

Select the Eraser and erase the unnecessary parts:

Create a new layer, set the brush tool to 170 px and draw the left side to give it shining effect:

Then set the Opacity to 62% and erase the parts you don’t need.

Now select your Marque Tool (M) and move your selection using your arrow keys a bit to the right and inverse your selection (Ctrl + Shift + I) and press Delete. Finally press Ctrl + D to De-select your selection.

Step 6

Let’s create a new layer and create a circle using the Elliptical Marquee Tool (M) (hold down shift to draw a precise symmetrical  circle) and fill it.

Open the Blending Options menu and adjust the settings like in image:

Create a new layer and create a smaller circle to fill it:

..and add these Blending Options:

Step 7

Create a new layer and add a create a small circle like this,fill it:

Add these Blending Options:

Step 8 – Adding text and details

Now select the Text Tool (T) and type SONY with a dark color. I used the font Engravers MT, type UMD with the color code: (#a8a8ad)

..then create something like this using your pen tool (P) to achieve little perspective:

Set your Brush Tool to 2 px, then select your Pen Tool again and stroke it with a gray color (mine is #404041).

(you can duplicate it and set a darker one in its side like i did) ..then duplicate it (Ctrl + J) and go to Edit, Transform, Horizontal Flip and set the duplicated layer on the other side of the circle.

Step 9 – PSP Text

Now create a new layer and using your Pen Tool (P) let’s create the PSP.

Lets begin with the “P” – make sure your Brush Tool is set to 2px, select your Pen Tool again and create something like in the screenshot below:

Stroke it with a white color (right click on selection), delete the path.

Follow the same steps to do letter “S” as well.

..create selection, stroke it… and do the same with the third letter “P”.

Now add these Blending Options to letters:

Step 10

Create a new layer and now we will add a little bit more details in design. Create selection like in the screenshot below with your Polygonal Lasso Tool (L):

Fill it with white and set it below the psp shape layer. DONT DESELECT THE SELECTION.

Select your Brush Tool, set it to 42px, and brush something like I did from the corners to get some shadowing and 3D effect.

Okay, we are done with bottom side, now let’s get to the top.

Create selection like in the screenshot and set it below the PSP shape:

..like this:

Now set these blending Options:

We need the same effect on the other top side of ou gadget right?

Just duplicate the layer and go to Edit, Transform, Flip Horizontal and set it on the other side of the PSP shape. Let’s compare our outcome which is petty much finished, but we will add some more details to make it look really good:

Step 11 – Final Tweaking

You can brush with a black color at the bottom of the PSP like i did in the next picture to achieve more 3D like effect:

Select all the layers EXCEPT THE BACKGROUND (Hold down Ctrl), right click and select merge layers. Hold down Ctrl and click the PSP layer to make a selection, you should get selection like this using your Pen Tool (P):

Right..now set your Foreground Color to white, right click, go to Fill path… and hit OK then set the Opacity to ~ 36%, set your brush tool to a soft brush of 200px, set the Opacity of the brush tool to 50% and erase the parts you don’t need anymore like screenshot below:

Now Duplicate the PSP layer (Ctrl + J) and go to Edit/Transform and select Rotate 180 degrees, set it below the other layer.

Now lets add some reflection, shall we?

With the Duplicated layer selected go to Filter, Blur, Gaussian blur and set the radius to 3.8px:

Now set the Duplicated layer’s Opacity to 60%. Select your eraser and set it to a soft brush of ~185% set the eraser’s Opacity to 50% and erase like i did to achieve natural reflection:

Congatulations – you’re done!

If you have any questions about any of the steps, don’t hesitate to ask!

The role and purpose of icons is user interaction is very important these days.  Icons can enhance the user experience and user friendly icons are really appreciative but they should be unique and easy to understand. There are so many icon websites available on the web but what we are presenting here is only high quality and web2.0 free icon packs collected from various websites ,designers galleries and blogs.

In this icons series we have divided the icon packs in to three main categories. Web and user interface icon-packs, Social-media packs and other icon packs.You might have seen these icons somewhere, But we narrated here some of them you might have not seen. Not all icon packs are for commercial projects, you can use some of them for your private projects and for your personal use. Please see the usage license and derivation rules carefully before using any icons.I’m 100% sure you will love this Huge and Extensive collection of icons.

Web and User interface icons:

In this category you can download the vector,dock and some illustrator icons for your web design and development system and your CMS too.

1.Scalable icons

This set contains 25 scalable Illustrator format icons.
Disclaimer & Conditions: The set is licensed under Creative Commons License.Redistribution, Release for Download, use for commercial purpose or selling of these icons on an another site without permission is completely prohibited.

2.Free vector icons

Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.These icons can also be used as iPhone menu bar icons.

3. Diagona-icons

400 (200+200) icons are included in PNG format (10×10 and 16×16 pixel).To remove the attribution, please purchase the license.

4. Free web development icons

Free web development icons icon set is done in web 2.0.

License: These icons are free to use in any kind of project unlimited times.
Amount of icons: 80 , Icon Sizes: 24×24

Amount of icons: 60 Icon Sizes: 24×24

Amount of icons: 26 Icon Sizes: 16×16

Amount of icons: 32 , Icon Sizes: 16×16

Amount of icons: 26 , Icon Sizes: 16×16

5. Blogging icon set

Specially designed for bloggers. There are totally 12 shiny and modern icons for your blog. Sizes 24×24, 36×36 and 48×48 in png format. Blogging Icons Set is released under Creative Commons License, please feel free to use it on your personal and commercial projects.Designed by Blog perfume.

6. Go-green-minimalistic-icons

In this icon pack, there are 108 different icons. You can use for your websites, blogs or applications. These icons comes with e Commerce icons, social media, computer accessories, multimedia icons.These icons are available in 64 x 64 px and in transparent PNG formats.It’s a freebie from Dawghouse design studio.

7. Tango icons

It’s a revision pack of the previous release in Tango style.licensed CC BY-SA.

8. Function-icon-set

A consistent style with a glossy look with a set of 128 Free Icons for you to use in any projects,These icons are absolutely free! You can use them anywhere.

9. One bit icons

Icon set of 50 icons.
License: These icons are free to use in any kind of commercial or non-commercial project unlimited times.

10. Vaga icon sets

Set of 60 icons, semi-transparent .png icons (16 x 16) ready to use and available for free download.

11. Woofunction-web design icons

The Woo Function icon set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available at 32×32 pixel PNG files.This is a classy icon set from woo themes.It’s a collaboration of wefunction and woothemes.This icon set is released on the GNU general public license.

12. WIP-Web-Iconset

A beautiful icon set for web designer’s personal use.
License: For non-profit use ONLY. Commercial(e.g. for company website, application interface etc.) use is strictly forbidden.

13. Iconic project

Iconic is a minimal set of icons consisting of 103 marks in raster and vector formats — free for public use.This set is currently licensed under the Creative Commons Attribution-Share Alike 3.0 license.

14. Glossy Buttons

This set have clean and crispy look with consistency.The Glossy Buttons is a collection of 33 high-quality stylish icons ranging from 16×16 to 48 x 48 pixels.This icon collection is created for multiple uses.The icons can be used royalty-free by the license for any personal or commercial project including web application, web design, software application, mobile application, documentation, presentation, computer game, advertising, film, video.

15. Icons from iconblock

Snow pack

102 royalty free website & GUI icons in various formats that can be used for both personal and commercial purposes.

Blue Coral

More collection of 77 blue and grey rounded button icons designed for website use. These icons are perfect if your looking for simplicity and style as well as uniformity. A freeware release

Lingo

74 xp themed icons that will surely breath new life into your blog or website application.

16.ORB icons

Free to use,for more information contact the designer.

17.Mini icon collection

Here are 113 10×10 greyscale icons in .gif format. Creative Commons Attribution-ShareAlike 2.5 licence.

Just another mini icon set

Pretty small icons.Some rights reserved.This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.

18.ColorCons icon set

ColorCons are 49 different icons available in 4 different colors.
Formats and sizes included in the package are.Terms of usage are in the  pack.

19.Sweetie–BasePack

The Sweetie family is cute and clean.And free! This set has been around for five years, but it’s still going strong.Creative Commons Attribution-ShareAlike 3.0

20.Milky icon set-All in one package

This is another lovely set of simple but nice icons happily created by IconEden.com. The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds.

21.Adobe-creative-icons

A special icons of adobe’s master collection.For license please verify in icon page.

22.Bright free icon set

This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.So you can use Bright! for free for your personal and commercial projects.

23.Hand pointer icons

Free icon set that includes 36 hand pointer icons of 6 different types with 6 color variants. Icon set also includes .psd source file.

24.Once from Delacro

You can use them on your personal blog. Just send me a mail and let.Non commercial use.

25.Webmaster icons-Dellipack 2.0

The DelliPack 2.0 icons are a high quality pack of developer icons and webmasters icons.

26.Designer icons

This set includes Adobe Graphic Icons, Designers Icon.For more information see in source page.

27.Icon pack by Psferox designs

Specifically these icons designed for designer’s use.

28.Free-Mobile-Berries

These icon sets are specifically made for mobile applications,websites and GUI designs.For license details please get more information from the source.

29.Free-iphone-icons

Specifically for i-Phone developers,Free for anyone to use under the Creative Commons Attribution 2.5 Canada license. You may use or modify these icons in any way as long as you credit www.pixelpressicons.com.

30.Web standard icons

28 icons for web designers and blogger.

31.Vector arrow icons

Freshly made, tasty vector icon with 64 icons.They’re entirely free.

32.Glossy Vector icons

This particular icon set falls into the “window” category. Nothing to do with “Windows” the operating system, but the adjustment of windows, panes, and closure icons.85 shining icons ready for your next design.

33.Icons for your photo editing app

Image related icons.-Some smiling lips, a camera lens, some vortex colour, a crop tool, a TV icon, and plenty more.they’re free to download and use as you wish!

FYI : Social media icons will be coming in the next part of the icon packs after that other icon packs too.