Ever since the web industry got more crowded by people who saw all the money that could possibly be made, and at what a low start-up cost to them in the mid or late 2000s, there has grown some fascination with everybody feeling that the pinnacle of their career would be for them to reach this Rockstar status. This status, created by the community, is reserved for typically highly talented individuals who have done amazing work and/or moved the culture of the community in a positive direction at least one point. Now can you name anyone in the community who could be classified as a Rockstar that actually describe themselves as such? *crickets* *crickets* *crickets* *gerbils*

Having a hard time thinking of any? Well that is because the people who actually could be noted as Rockstars of the web community shun the title. Instead focusing on the roles they view as being the best use of their talents to positively push them, and the community. It is that kind of thinking, and its results, that make them deserve such a prestigious title. What about everyone else? Which factors decide which role is best for those not a Rockstar? Well, lets take a look at the breakdown of the rolls shall we.

Rockstar

*Image Credit: Miaowmatthew

Starting from the presumed highest position, lets begin by looking over the Rockstar role. Now we’ve briefly mentioned what qualifies a member of the community to be considered part of this role group, so unless you have skipped ahead to this part then you have an idea already. The Rockstar type is a community member with an immense amount of talent in one, or possibly two, areas typically and has the ability to use the results of said talents to positively move the web community’s culture. This can also be used for someone who you feel really had an influence on your career and approach. The latter mentioned way of defining a Rockstar showcases the one thing all this boils down to, individual opinion. However, this opinion must also be matched with a general consensus of enough people as well.

A good example here would be anyone that designed or developed something that has sparked many different interpretations or consistent use of said product. People that might be considered here are:

• The creator of the 960 Grid System Nathan Smith
• The developer behind WordPress Matt Mullenweg
• The original creator and project lead of Drupal Dries Buytaert
• Bloggers who always provide content that alters how their readers view things(personally I’m always keeping up with and reading the articles and/or books of Nick La, Ethan Marcotte, or Francisco Inchauste as my top-tier)
• Or anyone else who has, or continues to, moved the culture forward positively

The Starting Line Up

*Image Credit: Fixiewrek

When you first hear the phrase starting line up, the common conclusion is to look for the star, or in this instance, Rockstar, and then grade the rest of the starters off how skilled and popular in proportion to that. Well the good thing about the web community is that being highly talented in your work doesn’t mean that you have to get hundreds of emails a day asking for help in their work, it becomes quite the annoyance. Those that fit into the Starting Line Up role are those that are just as skilled and naturally talented as those assuming the Rockstar role, if not more so, but they put very little focus on pushing the community forward. Instead, they’d rather use what is already in place and work from there. Actually thinking about, maybe those in this role are actually the ones who like fewer headaches and annoyances in their day than the ones they already get from clients? Just a thought.

Those that fall into this role category are highly talented, have a good amount of experience, and know how to use whatever new advancement that is made to their full advantage. Some examples of those that fit this description are:

• Senior Level Designers and Developers
• Art Directors and Creative Directors
• The freelancer you wish you were as good as
• Talented creatives who not only keep up with the trends and see them coming in advance, they blog about them too

Reserve Players

*Image Credit: Seth W.

In sports, these are the players that come off the bench into the game and it’s their job to keep the momentum in their teams favor or make it in their favor. Well for the web community, this isn’t so much the case. Here, reserve players a more devious bunch. Those that fall into this role are actually quite easy to spot, and actually called out often enough. Do you know someone who honestly does horrible work, yet still receives clients consistently and makes out like a bandit? How about someone who waits until after someone redesigns their site to work on their own, and end up ripping off that person’s entire design? Everyone has read an article somewhere and has been blown away, and then are surprised to see basically the same thing somewhere else. Of course this doesn’t apply to list articles, unless someone takes the author word for word. That’s just down right criminal on the lowest level.

Well that is the Reserve Player of the community. These members who only duplicate what they see, have no real pursuit in pushing their skill and only want the money to be found in the profession.

Development/Minor League

*Image Credit: Ed Yourdon

The name says it all, these are the up and coming designers that are looking to develop their skills and gain experience. Everyone starts here, no matter how naturally talented a creative may be. This group can be divided into two categories, the ones that are willing to push through the awkwardness of their start in the industry and those intimidated to take that chance.

The Hobbyist

*Image Credit: Don Fulano

Have you ever just driven by a park and seen a sporting event where it is a group of people just giving their all, as if it were their actual profession? Most began to wonder why would anyone put so much into a game, especially considering they’re not being paid to play. Well speaking as a person who actually will get like this in any sporting event, it’s all about a passion and a love for the game. This is the same reason anyone who spends the few hours they have to themselves when they get home from their full-time job, or school depending on their age, reading blog posts and books on the latest advancements in the web industry. These are also the same people who spend many hours just playing and trying to learn as much as they can about web technologies, just for fun. They may never have the same level of skill or expertise as a professional, but the passion is all that really counts.

How Knowing Your Role Improves Your Career

*Image Credit: Klearchos Kapoutsis

What is the point of trying to make pushes for advancement in the community like a Rockstar type does, when you are actually a Hobbyist? It is a waste of time, energy, and a good way to raise your stress level through the roof. Is there any value in trying to make the next great open source CMS or any framework when you are better suited for maximizing what is already available? Maybe even show what is possible beyond what was initially intended, WordPress wasn’t always viewed as an awesome CMS option.

It goes back to what many of us learned in school. It takes so much more energy trying to be something you’re not, why not redirect all that energy into being the best YOU you can be. By doing this you can properly grow, and then gradually let your talent take you into different roles in the community. There is no rush, or any actually role that defines the pinnacle of your career. It all depends

In Conclusion

The assumed size and public acclaim that one sees with a role, doesn’t make it more important than any of the others. There has been a lot of talk about being a Rockstar in the community. Topics like why someone should want to be one, how being able to call yourself one will boost your career, the skill level it takes to reach this role, and much more nonsense. Why has everyone done this? There is no way any industry full of professionals who focus on how they can be viewed as Rockstars could possibly prosper.

Take the time and talk to some of the most successful people in the web industry, they will tell you the same thing. The people who are successful, and aren’t stressing every two seconds, know their place in the community and maximize their potential in their position. There is more to being successful and enjoying what you do then being known as a Rockstar. For those of you that see the final frontier of your career is to reach Rockstar status, then honestly you might be in the wrong field.

What’s in store for developers and users? Users would wonder if they’re affected by this change. Depending on what they use their devices for, it might make or break a lot of things. Take for example gamers. There are major gaming websites that focus on Flash like Kongregate and Newgrounds, I guess Apple users won’t be able to play games anymore. For developers, this might be a problem (or a business) as they will have to rewrite their products.

Apple is a behemoth that does not support Flash. Two Steve’s are actually moving away from Flash, the other Steve is Steve Ballmer, Microsoft’s CEO. Imagine that? Two huge industry giants versus Adobe Flash!

Is the future of Adobe Flash grim? Before addressing the real issue here, let’s first look at why Flash is a target and not others.

Why is Flash Widely Used?

Source: Adobe.com

To begin, Flash has been used for a very long time and has widely revolutionized multimedia both online and on handheld devices. Why is it so? Because Flash has solved several problems that people experienced. From handling videos to fonts, to animation and cross browser compatibility, and adding to that the set standards on the web that are always changing. Cross browser and cross-platform compatibility with Adobe Flash is not an issue, unlike many web technologies like HTML5, CSS3, and JavaScript.

Another reason for its success is that Flash is mostly used for gaming and entertainment. The majority of internet users use the internet for entertainment.

Is it the End of Flash?

No. To say that it will die off because a new challenger appears is too sensationalist. Since the majority of PCs use it, websites with animations including those pesky advertisements, and thousands of Flash games, it won’t go away easily. It has served thousands of devices and websites; taught in multimedia classes and has produced a lot of creative content without even knowing scripting. Adobe Flash is still evolving, trying to keep up with the fast paced technology.

During college I took a multimedia class. There we used Adobe Flash and created several 2D animations and Flash games. I can say that even if I’m not that good with graphics and design, I can sure as hell create a Flash game and animate your stick man. Is it a useful skill? Maybe it can get you a few ladies to drink with, still it is a very useful skill especially for designers.

So, what can turn the tables? I, for one, loathe the bulky Flash websites (especially those Hollywood film promotional websites), but when it comes to interactivity I’m the first one to worship it. A lightweight competitor like HTML5 will do the trick; CSS3, HTML, PHP5, JavaScript and others would win when it comes to creating dynamic websites.

The problem with these technologies is that the standards aren’t really that standard for everyone. You think you know everything about CSS and HTML and now you can create a super website? Think again. In a few months or years you’ll have to read another manual telling you that there’s another standard. Even if they’re called standards, developers from all over the planet are having difficulties with cross browser and cross platform compatibility.

Websites including YouTube have began using HTML5. There has been a spur of HTML5 games and they are really lightweight.

The question now is, is HTML5 (and others) easy to learn? I can teach a 13-year-old to animate using Flash, but not HTML5 just yet. It still has a long way to go but I’m pretty sure that someday people will come up with drag and drop applications to create rich and dynamic content.

As said, Flash is well-established and can be used by almost anyone.

What about the people saying that Flash is already dead? Are they too optimistic about HTML5? Maybe, since HTML5 still has a long way to go and still has to establish credibility. Something which Flash has. But HTML5 has the ace up its sleeve, and that is the potential to grow further.

What Apple says vs. What Adobe says

When it comes to Touch

Apple claims that Adobe Flash wasn’t made to support touch screen devices. Any other Flash applications and websites will then be rewritten.

Adobe says that the Adobe Flash Player is actually made for the purpose of supporting tablets with multi-touch. And that Flash developers need not worry because mouse events are automatically converted to touch events for touch devices.

When it comes to Battery Life

Apple says that Flash uses too much battery life to be used on mobile devices when playing high-definition videos or games.

Adobe says it will not be an issue since Flash Player 10.1 supports hardware acceleration across mobile and desktop devices.

When it comes to Security

Apple takes a hold of Symantec’s word about Flash being one of worst in security.

Adobe says it is also important to note that Flash is one of the most widely used systems. Comparing it to a discussion I had during college, Microsoft OS is mostly targeted by computer viruses and crackers because the market is in there, many people use it as compared to Linux and Mac OS X.

(see links at article’s end for an in-depth explanation from Adobe and Apple)

Should You Learn Flash?

HTML5 is the next big thing after Flash but do not expect a wide support group for it just yet. If you want to do complex animations, Flash is your way for now. By all means learn how to use Flash, it is widely supported and has lots of features that anyone can use.

But if you are thinking of creating a website with animations and things, you might want to wait just yet. Flash websites were superstars of the past, now they’re just divas that want attention and many people loathe them.

Flash is compatible with almost any browser. You don’t have to worry about cross browser and cross platforms. Of course, we’re not talking about iPhone and iPads. Kidding, Adobe Flash Player 10.1 supports them now.

Now, if you are thinking of creating an HTML5 game, you might not find a very good marketplace for it. Flash still has the biggest audience and established marketplaces for games like Y8, Newgrounds, and Kongregate.

Should you learn HTML5? Well, you can start now. It has a bright future, but don’t expect it to come in a sweep anytime soon. People, like an immune system, are resistive to change. HTML5 is still far from achieving what Flash can do: games, videos, applications, flexibility, and audience.

Weighing Things Up

Photo by darktaco

Adobe Flash wins at:

• Used by almost every PC user.
• Creation of simple to complex animation.
• Bundled up; learning curve is easier because it’s not as diverse as learning HTML5, CSS, and JavaScript and other things.
• Several thousand Flash games that can’t be played on Apple products.
• Devices that allows Flash usage, in my experience, are more fun to deal with. My team and I once created a “hack and slash” game using Flash and we were stunned to learn that our professor saved it on his Nokia and played it there. Fully running. My point is, Flash is great with cross-platform compatibility.
• Cross-browser compatibility too.

HTML5, CSS, and JavaScript wins at:

• All of these are open standards, no more relying on third-party products like Flash does.
• Can be used by most browsers without updating anything.
• When YouTube was still a baby, I usually would see a page asking me to upgrade my Flash player. I haven’t seen it in a year now.
• Adobe Flash wasn’t really built to support touch screen devices. With today’s technology, almost every surface is a touch screen. It doesn’t stop there; the juice of this all is on the web. Little by little desktop applications are leaving the mainstream and are replaced by web-based applications. Lightweight and accessible almost anywhere. This includes games, videos, and other applications.

Conclusion

It is not certain if Flash will be replaced, but it is certain that in the years to come there will be other technologies that will be on par with it. Flash was, and is still, hot because of PCs. In an era where PCs are common household items, Flash sure has found its place. But with today’s rise in mobile devices, lightweight devices, the hassles of using Flash applications will be its own funeral. Even though its future is gravely marked, it doesn’t mean it will fall overnight. There’s still hope for Flash developers out there.

Sources and for Further Reading:

Adobe - The truth about Flash

Apple - Thoughts on Flash

Tell us what you think!

I remember those times when I had to dig through my browser’s history to find an image I wanted to show my friend. Then I started to wonder – is there a tool with which I could save all my bookmarks, organize pictures, write my notes and access it all immediately from multiple devices? After some time and research I came across Zootool. Ever since then I’ve been a die-hard Zootool fan. I use Zootol mainly for collecting images, however when writing this article I found some other outstanding tools with which you can quickly save, and organize, your notes and thoughts. In this article I’ve collected 15 of  the very best tools on the web to collect, capture, organize and brainstorm your bookmarks, images, notes and thoughts.

1. Zootool

Zootool is about collecting, organizing and sharing your favorite images, videos, documents and links from all over the internet. They are a small, bootstrapped startup, located in Mannheim, Germany. Driven by a passion for design, web, code and all kind of nerdery, they are working hard to built the most awesome tool for geeks like us.

Get the Lasso

Add the Lasso button to your browser to save your favorite images, videos, documents and webpages in Zootool.

Collect

Build your own little library of interesting things you find on the web. Use the Lasso in your bookmark bar to store new images, videos, documents and webpages in seconds.

Organize

With its intuitive interface your Zoo is simply the best place to keep your stuff organized. Beautiful thumbnails make it super easy to browse your entries and with our tag and pack system you can be sure that your Zoo stays tidy forever.

Share

Sharing web content has never been easier. Setup your Twitter, Friendfeed, Delicous or Tumblr account and share all the stuff in your Zoo with your friends out there.

Tools

Besides lasso Zootool also offers other types of tools like ultra-fast page saving and an even more comfortable way to share images on Twitter. There’s also a mobile version of the site and a WordPress plugin to include your recent Zootool entries in your blog’s sidebar.

2. Evernote

Evernote’s goal is to give everyone the ability to easily capture any moment, idea, inspiration, or experience whenever they want using whichever device or platform they find most convenient, and then to make all of that information easy to find. From creating text and ink notes, to snapshots of whiteboards and wine labels, to clips of webpages, Evernote users can capture anything from their real and digital lives and find it all anytime.

Capture Everything

Chances are, if you can see it or think of it, Evernote can help you remember it. Type a text note. Clip a web page. Snap a photo. Grab a screenshot. Evernote will keep it all safe.

Organize

Everything you capture is automatically processed, indexed, and made searchable. If you like, you can add tags or organize notes into different notebooks.

Find Anything Fast

Search for notes by keywords, titles, and tags. Evernote magically makes printed and handwritten text inside your images searchable, too.

Web Clipper

The Evernote Web Clipper let you save interesting stuff you see on the web. No more bookmarks, tabs, or open windows. See something you like, clip it and you’ll have it forever.

3. Trunk.ly

Trunk.ly keeps track of the things you like. By connecting with your social networks, Trunk.ly monitors and collects the links that you find interesting across the social web. More importantly, it indexes the web pages these links point to and builds a personal search engine, so you never have to tag or describe a link again, you just search and Trunk.ly will find it again for you.

Trunk.ly has connected to my Twitter account and imported all my shared links. It works like a library where I can return if I want to find something I’ve shared in the past. You can also add tags and notes. Trunk.ly has it’s own bookmarklet, sharing button and a blog widget.

4. Instapaper

A light simple tool to save web pages for reading later. We discover web content throughout the day, and sometimes, we don’t have time to read long articles right when we find them. Instapaper allows you to easily save them for later, when you do have time, so you don’t just forget about them or skim through them.

Instapaper has it’s own iPhone app so you can read your unread articles while you’re on the train, bus or just standing in a row.

5. 280daily

280daily is quite possibly the future of consistent journaling and the easiest way to create a searchable archive of your life. It’s like a private Twitter where you have to sum up your daily activities in 280 characters or less. You can use it to write a journal, makes business notes or simply keep track of what you’ve been doing. Some features:

• Set up an email notifications so you wouldn’t forget to write an entry each day
• 280daily is also optimized for mobile devices so you can easily write your entries while driving in bus, for example
• Export your entries to PDF file to keep a local version of your notes
• Graphical statistics. Keep track of your entries visually
• Search. Quickly locate a day from your past

6. Thoughtboxes

Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen. Thoughtboxes has a very simple system to keep everything organized. You have a train of thought, which is a main topic, and then you have a bunch of boxes, which are your lists of thoughts within that topic.

Keep track of To-do’s

See everything you need to do, all on one screen. Check things off as you complete them, or delete them from the list all together.

Remember details

Sometimes you need to organize complicated things like going on a trip. Thoughtboxes gives you the flexibility to separate different thoughts and keep everything neat and tidy. You can minimize boxes that you aren’t currently working on to tidy up your page.

Brainstorm a new idea

Thoughtboxes is great for laying out all of your ideas in one place. You can also put links in your boxes for quick references. When you have many streams of thought, you can hide them on the top of the screen to clean up your page.

7. Shelfster

Shelfster is an app that helps bloggers and journalists to collect and organize notes. It aims to match journalism organizations with passionate contributors, creating collaborative environments for targeted content. With Shelfster you can:

• Collect, upload and collaborate with journalism organizations
• Build your profile and portfolio
• Publish, promote and monetize your content

The Shelfster Desktop Tool is a research and writing tool that allows you to quickly gather your ideas and information from the web or from documents on your computer and write articles. All information can be organized using specific tags and is stored in your online account. Shelfster also has an iPhone application and bookmarklet.

8. Historious

Historious saves you time by helping you find webpages you saw before. Bookmark sites with a single click, then find them again by searching for any word in the content of the page. Some features:

• Bookmark your favorite sites with just a single click
• Search your historified sites using a simple search box
• Historious always keeps a cached version of the page you historified
• Historious creates your personalized search engine containing the sites you specify

9. Diigo

Diigo is a cloud-based personal information management system. Diigo provides you a tools on all major web browsers, Android, iPad and iPhone to help you to access a variety of information. Diigo is research and collaborative research tool on the one hand, and a knowledge-sharing community and social content site on the other.

• Highlight and add sticky notes on webpages
• Archive pages forever and make them searchable
• Organize your items by tags or lists
• Search and access from anywhere, anytime

10. Blinklist

BlinkList is a powerful productivity tool that makes is much easier for anyone to share and save their links for later. They give you a browser button to save web pages you like in one click.

Never lose a page again

With BlinkList you can save a local copy of any web page on your computer. That way, even if the web page disappears, you will always have a local copy that you can get back to later.

Discover web

Once you start saving more web pages, BlinkList will automatically start recommend you web pages that you are likely interested in but have not yet discovered on your own.

Find links instantly

BlinkList has a lightening fast search engine that will help you find the links that you are looking for in the fraction of a second. You can search through your links faster than you can search through Google.

Read articles offline

With BlinkList, you can save your favorite articles and web pages and get back to them later even while you are offline

11. Licorize

Licorize is a minimalistic and fast to-do manager that you can feed with your bookmarks and web updates. Licorize begins as a bookmarking tool, providing a non-intrusive “add bookmark with one click” functionality. It is integrated in browsers, with plugins, extensions and bookmarklets, provides readability features, multi-tagging, site thumbnails and more as evolution of bookmarking.

Transform and curate

Beyond bookmarks, Licorize provides built-in types to classify information, which have specific behavior and are hence more refined than simple tags.

Your web life timeline

Licorize can also be a complete timeline of your web worker lifestream: it synchs with Twitter, Evernote, DropBox, RSS, LinkedIn, Instapaper, ReadItLater, E-mail… And you can access it all from your mobile.

Collaborate and share

Anybody can join your projects – it’s easy. The limits of “just tagging” bookmarks become clear once you want to share work and ideas on the “bookmark” collection: you need to define to-do’s, distribute things to be done, discuss ideas.

Manage real work

Licorize goes beyond simple tagging in a variety of ways. Licorize supports sharing certain collection with certain users, supports to-do lists, priorities, Kanban boards, weekly reviews, weekly work view, even recording work and monitoring costs.

12. Skloog

Skloog is a tool where you can easily create shortcuts to all of your favorite sites, bookmark pages that you’d like to refer back to at a later time and organize and arrange all of this information so that you can access it instantaneously.

13. Favilous

Favilous provides you with two bookmarklets which you add to your browser favourites bar to save webpages or mark them for reading later. You can then navigate to all your favourite web pages through Favilous using a number of different views, like the one on the left. All your bookmarks are in the cloud, backed up and available anywhere. Forget about synchronising across multiple browsers.

14. Springpad

Springpad gives you a place to quickly and easily save anything you want to remember. Take a note, create a task, scan a product barcode and look up the book your friend mentioned. The best part is that no matter where you are, Springpad is there with you to make sure you don’t forget something worth remembering. Just think it and Spring it, and it’ll be there for you when you need it.

Smarter way to save

Not only is everything you save automatically synced across your mobile devices and any browser, but Springpad also automatically uses the power of the internet to add useful information and relevant offers. From reviews and price drops to showtimes and reservations, Springpad keeps on working for you even when you’re not thinking about it. Isn’t that how it should work?

Organize

Springpad automatically categorizes everything you save and gives you powerful organizational features. Tag anything. Create notebooks to separate your home life from your work life or plan trips and special projects. Use the board to visually plan your next steps. It’s as flexible as you’d like it to be.

Place in the cloud

Think of Springpad as your own place in the cloud – a high-powered internet-connected personal database of everything that’s of interest to you, even if you’re not ready to do something about it right away. Everything is automatically synced between your mobile devices and the web for instant and universal access.

15. Netvibes

Netvibes is a free web site that lets you personalize your web experience. Take everything that matters to you while online — newspapers, blogs, weather, email, search, videos, photos, social networks, podcasts, widgets, games and funny applications — then bring them together in one single page, your personalized Dashboard. Make this Dashboard automatically update every time you open it. That’s what netvibes does. And it does so much more.

In my previous tutorial we learned how to create a Dark WordPress style layout.  Today you will be learning to create a clean light WordPress style layout and I hope all of you can follow this step by step tutorial. Let’s get started.

Resources you will need to complete this tutorial:

• Sidebar Icons
• Post Icons
• 960 Grid

Here is what we will making, click on image for full preview:

Before we get started download first 960grid system for easy guideline creation.

• Open 960_download\templates\photoshop\960_grid_12_col.psd
• Ctrl + Shift + C to change the canvas size

Step 1: Working with Header

Lets make this tutorial organized. Rename the Layer1 folder to top_header and also rename the layer1 to top

To start will make some guidelines for our header.
Click View > New Guide set the value to 40px, orientation to Horizontal.

Select Rectangular Marquee tool(M) make a selection from the guide we have just created.
Fill it with any color.

Add this Blending Option:

Drop Shadow

• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 3px

Inner Glow

• Color: white
• Opacity: 50%
• Size: 1px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2f2f2f #404040

To finish the top_header select Text Tool(T), put some links at the right side.

Step 2: Working with Site Name and Search Bar

Create a new layer below the top layer, name it header_bg

Create a new guide 225px horizontally, make a selection and fill it with any color.

Apply this Blending Option

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2c8797 #3da2b4

Using Text Tool(T) Add the Site Name and Slogan follow the image bellow

1st

• Font: Lucida Bright Regular
• Size: 48pt

webdesigner

• Font: Arial Regular
• Size: 30pt

Tutorials, Inspirations & Freebies

• Font: Lucida Bright Italic
• Size: 12pt

Apply this Blending Option:

Drop Shadow

Inner Glow

Gradient Overlay

Now lets create the search bar.

Create another folder inside the Header name it Search, put all your search related layers there.

Select Rounded Rectangle Tool(U) and set the radius to 10px. Place it as shown below and name it nav_bg.

Add this Blending Option

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 75%
• Angle: 90
• Distance: 0px
• Size: 1px

Inner Shadow

• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 5px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2d899a #2d8899

Result:

• Duplicate the nav_bg layer.
• Right click the layer and Click Clear Layer Style.
• Right click the layer again and Click Rasterize Layer.
• CTRL + Click the layer to make a selection. While it its being selected
• Select Rectangular Marquee Tool(M) Hold SHIFT + ALT. Follow the selection below.

This means that whatever you selected will not be included to the selection.

Hit Delete then Name the layer search_btn:

• CTRL + Click the layer to make selection
• Go to Select > Modify > Contract. Contract it by 2px.
• CTRL + SHIT + I to inverse the selection and hit delete.

Add this Blending Option:

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 5%
• Size: 3px

Gradient Overlay

• Style: Linear
• Angle: 90
• Gradient: #2c8797 #3da2b4

Stroke

• Size: 1px
• Position: Inside
• Color: #1f606b

To add the search icon select Custom Shape Tool(U) and find the search icon.

Place the icon in the button of the button we have created.

Add this Blending Option:

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 0px
• Size: 1px

Use Text Tool(T) to add text:

• color: white
• italic

Step 3: Working with Navigation

At the layers panel make a new folder above the top_header folder name it Navigation, put all your search related layers there.

Make a new guideline 265px orientation to Horizontal.

Create a new layer and name it nav. Make a selection to our new guideline and fill it with a color.

Apply this Blending Option

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 5px

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 1px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Create new layer above the nav layer and name it shine.
Us the same process as we did before on how we make a selection from search_btn. See the image shown below.

Fill it with white and change the blend mode to Softlight, Opacity to 75%

Using Text Tool(T) Add links to our navigation as shown.

Duplicate the text layer. Move the original text 1 below by hitting the arrow down once. Then change the color to White and you get nice embedded text.

Result:

Now lets create a divider for our Navigation.
Make a new layer name it divider. Zoom in 800% and make a selection show in the image.

Set the foreground color to white.

• Select Gradient Tool(G)
• Choose Foreground to Transparent
• Choose Reflected Gradient

Duplicate the divider and move 1 from right by pressing the right arrow key.

Apply this Blending Option:

Color Overlay

• Color: #b2b2b2

Merge the two layers and duplicate it 4 times. Don’t forget to group the layer and name it dividers.

Step 4: Working with Body Background

Create a new folder below the top_header name it body_bg. Inside it create a new layer name it noise and fill the layer with Black.

Go to Filter > Noise > Add Noise.

Set the blend mode to screen

Create a new layer below the noise layer and name it gradient.

Select the Gradient Tool(G) Set the Foreground color to #d6d5d6 background to #e1e0e0

While holding the Shift key drag it from top to center of the page.

Step 5: Working with Featured Content

At the layers panel make a new folder name it featured_content, put all your featured content related layers and folders there.

Show the guideline by pressing CTRL + :

Follow the image below to make guidelines:

Select Rectangular Marquee Tool(U) and make a big rectangle as show below and fill it with black color.

Apply this Blending Option:

Drop Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 70%
• Angle: 90
• Distance: 2px
• Size: 3px

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 3px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Grab a sample screenshot make it 630 x 225.

Apply this Blending Option

Stroke

• Color: #ffffff
• Size: 1px

Select Rectangular Marquee Tool(M) make a selection as shown below and fill it with black color, set the fill to 50%.

Using Text Tool (T) add some text:

• Size:18px
• Lucida Sans Regular
• Color: white.

Now we will create Next and Prev Buttons. Select Rounded Rectangle Tool(U) Set the radius to 10px.

Set the fill to 10%.

Apply this Blending Option:

Stroke

• Color: #b2b2b2
• Size: 1px

Adding arrow -  select Rounded Rectangle Tool(U) do the following step.

Apply Color Overlay make it white.

Duplicate the whole layer and make another button in the opposite side. Don’t forget  to name every button.

What we do next is adding sliding option, so people could switch screens:

Create a new folder and name it circles. Select Eliptical Marqueee Tool(M). Make four circles.

The first circle will serve as active/hover state, so apply this Blending Option to it:

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 70%
• Angle: 90
• Distance: 0px
• Size: 1px

Gradient Overlay

For the unhover circles add this option:

Drop Shadow

• Blend Mode: Overlay
• Color: White
• Opacity: 70%
• Angle: 90
• Distance: 0px
• Size: 1px

Inner Shadow

• Blend Mode: Multiply
• Color: Black
• Opacity: 50%
• Angle: 90
• Distance: 2px
• Size: 3px

Color Overlay

• Color: #cdcccc

Step 6: Working with Posts

Create a new folder and name it posts. Create a new layer there and name it posts_holder.

Select Rectangle Tool(U) and draw a big holder for our post.

Apply this Blending Option to it:

Inner Glow

• Opacity: 50%
• Color: White
• Choke: 0px
• Size: 2px

Gradient Overlay

Stroke

• Color: #b2b2b2
• Size: 1px

Create another box as shown in the image below. This will serve  as the background of every post.

Apply this Blending Option:

Gradient Overlay

Stroke

• Color: b2b2b2
• Size: 1px

This is how our posting will look like:

Follow the image shown below and add all the options to your own design:

For the read more button you’ll need to add this:

• Select Rectangle Tool(U) position it as shown above.
• Apply the same layer style as we do to our bg of the post,
  but this time make the gradient reverse.

Open up social network icons and place it as shown in screenshot below.

Add a divider at the top of the icons

Select Rectangular Marquee Tool(M) make a selection as shown. Fill it with color #efeeee.

Group all the layers and name it posts and duplicate it 3 times.

Below our last post we will make a pagination buttons.

Select Rectangle Tool(U)  and make a box as shown in the screenshot below.

Apply the same layer style as we did to our read more button, for the gradient uncheck Reverse.

Duplicate a couple of times and place it beside with each other.  Use distance 5px and for the gradient check Reverse.

Using Text Tool(T) put up numbers. I used the same font color #676666

Step 7: Working With Right Sidebar(RSS, Twitter, Advertisement, Newest Posts, Popular Posts).

At the layers panel make a new folder name it right_sidebar, put all your sidebar related layers and folders there.

Rss

Lucida Sans Regular 25pt color #e67a18 (Drop shadow 1px white blend mode to overlay)
Lucida Sans Regular 14pt color #676666 (Drop shadow 1px white blend mode to overlay)

Twitter

Lucida Sans Regular 25pt color #2c8797 (Drop shadow 1px white)
Lucida Sans Regular 14pt color #676666 (Drops hadow 1px white)

Notice I’ve add some divider about 20px below. The same step and color as we do previously in our posts. Or simply just duplicate some divider.

For the advertisement

Grab 125×125 advertisement images, use 20px distance with each other.

For the Latest Posts

Select Rectangle Tool(U) and draw as shown below in the screenshot. Apply the same style we used in post_bg but this time change the stroke color to #b2b2b2 position inside.

Draw another rectangle that will serve as our header for the box as shown below in the screenshot.

Apply following blending options to it:

Add text for the header also for the post, follow the image below for details.

Draw a little square which will serve as a bullet.

Apply the same layer style as we used to our header.

Group all the layers name it latest_posts. Duplicate new group and name it popular post. Hold SHIFT and drag it below. Name it popular_posts,

Step 8: Working with Footer

At the layers panel make a new folder and name it footer, put all your footer related layers and folders there.

Select Rectangular Marquee Tool(M) and make a selection as shown in the screenshot, fill it with black color.

Apply the same layer style as we did in our top_header.

Using Text Tool(T) add some text 12px color to white.

Apply this Blending Option to it:

Drop Shadow

Now we’re done for now – congratulations!!!

I really hope you enjoyed this tutorial and will keep coming back for more. If you have any tutorial request related to web design feel free to comment it below – I would be happy to fulfill your needs.

Any question or suggestions? Please do leave your comment to let me help you too. Thanks!

PSD File: Click to download.

This time you will be learning how to create a simple dark WordPress style layout with really detailed step by step instructions and a lot easy to follow and understand screenshots, so I hope even for beginners it shouldn’t be hard to follow-up.

Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

• Icons
• 960 grid system

Here is the final outcome with what we will creating, click on image for full size preview:

Before we get started let’s download 960grid system at first for easy Guideline creation.

• Open 960_download\templates\photoshop\960_grid_12_col.psd
• CTRL + SHIFT + C to change the canvas size.

Step 1:  Working with Background and Header

• Fill the background color with #181818.
• Create a guideline for our header area. Add it to be 158px from the top. (if you don’t see rulers press CTRL+R).

Rename the layer1  to Header (put everything in separate folder like Header,Content, Navigation, Footer to help to be organized better).

It’s up to you how will you rename the layers just make it sure that you are staying organized since we will have a lot of layers at the end of tutorials and it’s will be really hard to navigate through them if you leave the default naming and structure.

• Make a selection using Rectangular Marquee Tool(M).
• Fill it with #141414 this will serve as our header_bg.

Add this Blending Option to current layer:

Stroke:

• Size: 1px
• Color: #272727

Above our stroke created 1px solid line which is making header to look a little bit embedded.

Such effect has been used a lot in web designs lately, adding to design subtle, but noticeable separation between contents.

Step 2: Working with Logo

Inside the Header folder create another folder name it Logo.

Create a guideline 47px from the top, the step is the same as we created our guideline for our header.

Select the Text Tool(T) and put up your Site name.

• FIRSTWEB – 36pt
• DESIGNER – 18pt

Add this Blending Option there:

Gradient Overlay

Step 3: Working With Search Section

Create another folder inside the Header name it Search, put all your search related layers there.

• Select Rounded Rectangle Tool(U)
• Set the Radius to 10px.
• Fill it with #1d1d1d

Add these Blending Options:

Drop Shadow

Inner Shadow

Select Custom Shape Tool(U) then find the search icon. Fill it with #999999. For the search text use

• Verdana
• Italic
• Color – white (#FFFFFF).

Step 4:  Working with Navigation

Create another folder in the Header folder name it Navigation.

• Create a new layer and name it nav_bg.
• Select Rounded Rectangle Tool(U)
• Put radius to 10px

Add these Blending Options

Drop Shadow

Inner Glow

Gradient Overlay

For the navigation links I used the links found in 1stwd, you can do the same.

Duplicate the text layer and change the color to black. Using the up arrow key on keyboard press it twice and you get nice embedded effect.

Duplicated layer need to be under White text layer.

Make a selection to our nav_bg by holding CTRL + Click to the layer.

While it is selected:

• Select Rectangular Marquee Tool(M)
• Hold Alt so you can see that there is a minus sign beside the plus pointer.

This means that whatever you selected will not be included to the selection. Make a selection from middle across to the top of nav_bg.

Go to Select > Modify > Contract to 1px

Fill it with #141414

Now we will create a divider for each link. Select Rectangular Marquee Tool(M) and create a 1px line.

Step 5: Working with Welcome Message

Create a new folder name it : Welcome

Select Rounded Rectangle Tool(U) radius to 10px.

Add these Blending Options:

Drop Shadow

Inner Shadow

Select Text Tool(T) and put up your welcome message.

Create another folder inside the welcome folder and name it button.
Select Rounded Rectangle Tool(U).

Add these Blending Options to layer:

Drop Shadow

Bevel and Emboss

Gradient Overlay

Select Text Tool(T):

Drop Shadow

Step 6: Working with Slideshow

Create another folder and name it Slideshow.

Create a new layer and name it slideshow_holder.

Select  your Rectangle Tool(U) and do put it the same way as I did:

Apply the same style as we did to our navigation before. You can do this by pointing at the fx on the layer hold ALT and drag it to the layer you wanted to apply. (or just right click on layer > Copy Layer Style and paste it on whatever layer you want),

Try to achieve this selection by using the same step as we made to our navigation. Instead of Rectangular Marquee Tool(M), I used Polygonal Lasso Tool(L).

• Create a new layer
• Name it shine
• Fill it with white color
• Change the blend mode to Overlay and opacity to 30%.

Make a selection to slideshow_holder.

Go to Select > Modify > Contract to 10px and fill it with black color (#000)

Place the image at the top of the contracted layer. Now CTRL + CLICK on slideshow_holder layer as shown above in the screenshot.

Step 7: Working with Slideshow Links

Here is the preview of what we will be working on:

Select Rounded Rectangle Tool(U) and put radius 10px. Place it as shown in the screenshot below and duplicate layer like 4 more times.

Notice the second rectangle is different. We will use this arrow to serve as an identifier and active section.

Do this by Rasterizing the shape and use Pen Tool(P) to create an arrow headed shape.

The margin between each slideshow link is 5px.

Apply the same style as we had to our navigation. For the identifier apply this gradient overlay:

Again the same way as we did our navigation we’ll do it here too – simply repeat the steps I taught you previously. For our active identifier use color #156f99.

To add more styling to our identifier and make it look even cooler, create another layer and repeat the same step we did to our slideshow_holder layer to achieve shining effect.

But for this time instead of just filling it with white color let’s use white gradient to make it fade from left to right.

For the text here I used Verdana 14px.

Make sure that the identifier is placed on the top of our slideshow_holder layer.

Step 8: Working with Posts

Create another folder and name it Posts. Here is preview of what we will making here:

• Select Rounded Rectangle Tool(U).
• Apply the same style as we did to our welcome message.
• Fill it with #141414.

• Select Text Tool(T).
• Put up some text there.
• Bring up the icons and resize them 16px. (CTRL+T to resize)

Next we will create a date icon besides our title.

Create a rectangle and apply the same styles to it as we did to our identifier in slideshow section.

Add 1px line color #115b7e in blending options Stroke:inside.

Next is our post_thumbnail and text. Select Rounded Rectangle Tool(U).

Grab any sample image you like and link it with this layer.

Select Text Tool and put up there some dummy text, You can use http://www.lipsum.com/.

Change text color to #999999. Also right after the text paragraph let’s add two 1px lines and move one on the top so it gets that embedded effect, same as we did to our navigation separators. Color could be #000000 and #2a2a2a.

Duplicate the post folder 3 times, align distance from each post to be 20px.

Step 9: Working with Pagination

Now when we have got actual blog posts,  it’s time for us to create pagination. Create another folder and name it pagination.

Below you can see the preview of what we are going to create.

• Select Rounded Rectangle Tool(U)
• Set radius to 5px.

For this example we will make 7 boxes with 5px distance between each other. I labeled it with 1-7 Verdana text, with size: 14px.

For 2-7 numbers let’s apply the same style as we did to our navigation. Only number 1 would be different because it will serve as active or hover state on our pagination.

For the number 1 background rectangle apply the same style as we did to our identifier.

Step 9: Working with Advertisement Section

Create another folder and name it Advertisement. Select Rounded Rectangle Tool(U). Apply the same style as we did to our welcome message previously.

Grab some advertisement default images from any blog you wish. Center them up with 10px distance from each other .

Step 10: Working with Latest Posts

• Create another folder and name it Latest_posts.
• Select Text Tool(T).
• Copy all the styling  from screenshot below, everything is described and visible there.
• I added the same divider we used to divide our posts previously, just duplicate these layers and resize them to fit for this section.

Step 11: Working with Footer

Create another folder name it footer.

Select Rectangular Marquee Tool(M) and create a big Rectangle 40px under the pagination, fill it with #141414 color.

Add the same divider as we used previously several times already..just duplicate layers and adjust them to correct width.

Select Text Tool(T) and put here some dummy text. I used the same font size we had for header an the paragraph text before. Also I grabbed RSS icon from icon set and resized it down to
24px and put it right under our dummy text.

For the next step we’ll add categories using the same font, size and colors as for the left footer section. Again I used the same divider for each category.

Now let’s add to Popular Posts section the same styling as we had to our Latest Post Entry before, just copy previous styles.

Here’s what we will creating next – Back to top button.

Select Rounded Rectangle Tool(U) and place it as shown in the screenshot below.

Apply the same style as we had to our navigation section. Now use the same trick we learned previously to achieve the selection shown below
and fill it with color #141414..

Add a divider.

Select Text Tool(T) and write “back to top” using Verdana font with size 12px and  white color (#FFF). Duplicate the text layer.

Change original text to color black(#000) and by using the arrow up tool move it twice to make the text inset.

Now select Custom Shape Tool(U) and find the arrow shape, flip it 90 degrees. (ctrl+t to get transform controls).

Add these Blending Options to arrow layer:

Gradient Overlay

Duplicate the arrow shape and use the same trick as we did to our text inset.

The last thing for us to do is to add copyright info. Place it wherever you want in the footer, but I placed it at the bottom left section of the page.

Ok,We’re done now.  I really hope you enjoyed this tutorial and will keep coming back for more.

If you have any question or suggestions please do leave your comment to let me help you too. Thanks!

Show off your outcomes as well – super excited to see them by the way!

PSD File: Click here to download.

Surprisingly – there are just that type of tools available. Check them out together with some other useful tools and see if your design is easy accessible and practical. In this list less is more, you don’t need to much tools to analyze your web design, just few you really trust.

1. Google Website Optimizer

Google’s free website testing and optimization tool, allows you to increase the value of your existing websites and traffic without spending a cent. Using Website Optimizer to test and optimize site content and design, you can quickly and easily increase revenue and ROI whether you’re new to marketing or an expert.

2. Firefox Accessibility Extension

The Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.

3. YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it and JSLint.

4. Click Density

Find out where your visitors are clicking more than usual. And the clickdensity heat map will show at a glance the relative popularity of components on your pages.

5. Pagealizer

Pagealizer helps increase landing page conversion by showing relevant usage data and suggesting page design and landing page optimization. It shows in great detail how long people visit a page, bounce rate, how far visitors scroll down a page, and where visitors clicked.

6. Clixpy

Clixpy helps you find out which features are difficult to use and which are easy, where your users spend more time and why they leave your website. Clixpy can help you optimize landing pages and convert more visitors to clients.

7. Access Color

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments.

8. Check My Colours

Checkmycolours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.
All the tests are based on the algorithms suggested by the World Wide Web Consortium (W3C).

9.  Browsershots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place.

10. Five Second Test

Five second tests are simple usability tests that help you measure the effectiveness of your designs.Conducting a five second test allows you to find out which parts of your designs are the most prominent. You can do this in two ways:

• Memory Test
  You give users five seconds to look at your design and then ask them to remember specific elements
• Click Test
  You give users five seconds to locate and click on specific elements of your design

All you need to do is upload a design you want to test and choose the type of test you want to run. You will be given a unique link that you can share with friends and colleagues and have them do your test. Of course, you can always just let our random users do your test for really fast feedback!

11. Usabilla

Usabilla offers a fast and simple way to collect feedback in any stage of the design process.
Ask your users simple questions to collect valuable feedback and discover usability issues. Use our One-Click-Tasks to measure task performance. Users simply share their feedback by clicking anywhere on your website, mockup, sketch, or image. Measure time, collect points, and get valuable feedback with notes.

12. User Testing

UserTesting provides quick and cheap website usability testing. Website owners can access a network of pre-screened testers who are articulate and observant and who meet specified demographics. Give UserTesting your website’s demographic, and the service will select the right users to browse your site. All of this cost only $39 per test.

I will do my best to make this tutorial easy for you to follow, just follow screenshots as we move forward step by step and try to understand how to use these techniques in your own designs! Let’s start?

Before we get started download first 960grid system for easy Guideline creation..

Open 960_download\templates\photoshop\960_grid_12_col.psd

Here is what we will making, click on image for full preview:

1st Step- Creating Document & Guidelines

Follow this guidelines Go to view > new guide make sure that the orientation is Horizontal

Repeat until you complete all the guidelines: (20px,50px,70px,450px,480px,608px,638px,766px,796px,924px,974px)

Maybe you’re wondering why I provide that guidelines? Let me answer then –   I measure them in order to make this tutorial easier for you so you don’t have to wonder at the end of tutorial why item placement is different and you couldn’t get the same outcome as I did.

Step 2 – Creating The Header

Create a new layer and name it Top_header Click on Rectangular Marquee Tool(m) Make a selection from the left to right 70px height.

To make this tutorial easier I will not mention height anymore. I will just say 3rd horizontal Guide(3HG). This is based on what we’ve done on first step. OK?

Set the foreground to 2d2d2d, backround 121212.

Click on Gradient Toll (g) drag it from top to center

Step 3 – Creating SiteName and Highlights

Click on Horizontal Text Tool(t) Assuming that we have two-word Site Name. The 1st word is 1st and the second word is webdesigner.

1st word:

• Size: 36px

2nd word:

• Size: 24px

Put the SiteName at the Top left side.

1st Word:

Add this blending Option:

Drop Shadow:

• Blend Mode: Normal
• Opacity: 75%
• Angle: 120
• Distance: 1px
• Spread: 0%
• Size: 5px

Gradient Overlay:

• Style: Linear
• Color: a2a2a2 – ffffff

2nd Word:

Drop Shadow:

• The same as 1st Word layer

Gradient Overlay:

• Style: Linear
• Color: 9ea5fe – 646cd8

Now for the Highlights create a new layer at the top of top_header and name it Highlights, (Ctrl + Click) the line between the two layer.

Select Highlights layer and set the blend mode to Overlay and Opacity to 0%.

Click on Brush Tool(B). Set the Diameter to 250 px and Hardness 0%

Start clicking at the top of our logo. Select 1st and Webdesigner hit (CTRL + G) to group and name it site_logo.

Now You should get something like in the screenshot below:

Step 4- Creating Navigation Menu

Click on Rounded Rectangle Tool(U), Radius: 20px. Color will not matter because we will applying Blending Options after that anyway.

For the alignment of our navigation it should be placed 320 px from the left side, between the 1st horizontal line and 2nd draw your Shape.

Add this Blending Option:

Inner Shadow:

• Blend Mode: Overlay
• Color(#ffffff)
• Opacity: 75%
• Angle: 120
• Distance: 1px
• Choke: 0%
• Size: 0px

Gradient Overlay:

• Blend Mode: Normal
• Style: Linear
• Angle: 90
• Gradient: 121212 – 363636

Stroke:

• Size: 3px
• Position: Outside
• Fill Type: Gradient
• Gradient: 000000 – 363636
• Style: Linear
• Angle: 90

Make sure to check Reverse now and duplicate the shape.

Add these Blending Options on duplicated:

Inner Shadow:

• The same

Gradient Overlay:

• Check Reverse

Stroke:

• Size: 2px
• Fill Type: Color
• Color: 000000

You should achieve the same result as in the screenshot below:

To make things organize and easy to remember name the first shape nav_frame and the duplicated shape to nav_btn.

Click on Text Tool(T) and type: Home. I used Futura Condensed font, 14 px Crisp.

Place it in the center of button we made. After doing that, group 3 layers and name group –  Home_btn.

Now for the other navigation button duplicate the Home_btn, move it 15px from the Home_btn, now select nav_btn

Add this blending Option:

Inner Shadow:

• The same

Gradient OVerlay:

• UnCheck Reverse

Stroke:

• The Same

After doing this change HOME to BLOG. For the two remaining buttons just apply the same step. Name it ABOUT & CONTACT.

Don’t forget to rename each folder, then group all btn and name it Navigation_btn.

Done? For now you should have something looks like this:

Step 5- Creating Search Bar

Select Rounded Rectangle Tool (U), 15px from Contact button

Add this Blending Option:

Inner Shadow:

• Blend Mode: Overlay
• Color(ffffff)
• Distance: 1px
• Chock: 0
• Size: 0px

Color Overlay:

• Blend Mode: Normal
• Color: 191919

Stroke:

• Size: 1px
• Position: Outside
• Fill type: Gradient 000000 – 363636
• Check Reverse

To make the search button duplicate the Shape go to Layer > Rasterize > Shape and clear all the layer styles. To do this select the layer Right Click > Clear Layer Style.

Select Rectangle Marquee Tool(M) follow the selection done as shown in screenshot below:

Name the 1st shape to search_frame and the duplicated shape to search_btn.

Select search_btn and

Add this Blending Option:

Inner Shadow:

• The same

Gradient Overlay:

• Gradient: 353399 – 646cd8

For the search icon Custom Shape Tool(U) select search icon and place the shape at the center of search_btn, name the shape search_ico and group the 3 layers and name it Search.

Step 6- Creating Slideshow

Create a new layer below the Top_header and name it Slideshow_bg.

Select Rectangular Marque Tool(M), make a selection from left to right 3rd Horizontal Guide to 4 th Guide, then fill it with #0a0a0a color.

Add this Blending Option:

Stroke:

• Size: 1px
• Position: Inside
• Color: 202020

Select the Top_header Layer Add this Blending Option:

Stroke:

• Size: 1px
• Position: Inside
• Color: 000000

Result:

Now we will download some free useful stuff Nexus One icon gadget - Here

Create a new layer above Slideshow_bg, name it slide_display. Open it, hide everything so just The Gray Nexus One remain –   (CTRL + SHIRT + E) to merge. Select all (CTRL + A) Copy (CTRL + C), go back to the document (CTRL + V) to paste. (CTRL + T) to transform and place it as shown below.

Click on text tool, choose Helvetica font, size 24px, Crisp and type on “Google Nexus One“.  Now copy some dummy text from Lipsum.com. Copy the Character Setting as shown below:

Now we will be making 2 buttons for ‘discover more‘ & ‘watch video‘. To do this create a new layer above Slideshow_bg. Select Rounded Rectangle Tool(U), draw a shape as shown below.

We will be applying the same style just like our navigation. Copy the layer style of nav_frame. To copy simply Right click > Copy Layer Style. To paste Right Click Shape 1 > Paste Layer Style. Duplicate Shape 1, Copy and Past the Style of nav_btn. Do the same step to shape 2. Name the shape as shown below.

We will change the Gradient color of Slide_btn

Change this Gradient Overlay Gradient to 353399 – 646cd8, grab Text Tool(T), Helvetica Bold, set the size to 12px, Crisp and type some text. Mine is DISCOVER MORE & WATCH VIDEO. Group the layers, name group Slide_btn.

Now we will make Slideshow Thumbnails. 86 x 86 px big. To do that select Rectangle Tool(U), make a shape as show below. Name it thumbnail.

Add this Blending Option:

Stroke:

• Size: 1px
• Position: Inside
• Color: 272626

Create a new layer below the shape and name it thumb_frame, CTRL + Click on the shape mask to make a selection, then go to Select > Modify > Expand 5px. Fill it with #000000, black color.

Add this Blending Option

Drop Shadow:

• Blend Mode: Overlay color(ffffff)
• Distance: 1px
• Spread: 0%
• Size: 0px

For now we can really see that the effect popping up. Just stick with me and later on we will add the highlights for the Slideshow_bg. To make our thumbnail image, duplicate the slide_display and place the duplicated layer at the top of the thumbnail and link it by pressing CTRL + CLICK the line as shown below.

Group the 3 layers and name it thumbnail. Duplicate 2 times 20 px apart. And reduce the opacity of the group to 50 %.

Now we will create Prev and Next Buttons.

Select Rounded Rectangle Tool(U). Set the Radius to 20px. Follow the image shown below.

Add this Blending Option

Inner Shadow:

• Distance: 1px
• Choke: 0%
• Size: 5px

Gradient Overlay:

• Gradient: 313131 – a7a7a7

Apply to both arrows and don’t forget to name it next and prev.

Now lets work on our Slideshow_bg. Create a new layer above and name it noise link it to Slideshow_bg. Add another layer above and name it Highlights.

Select the noise layer, set the foreground color to #0a0a0a and fill it using Paint Bucket Tool(G) or by hitting (ALT + Backspace).

Go to Filter Noise > Add Noise > Amount 1% and set the opacity to 30%

Select Highlights Layer, set the layer mode to Soft Light, Opacity to 40%.

Select Brush Tool(B). Master Diameter to 600 px, Hardness 0% and you are ready to start.

Click in the middle of the slide show and at the top of Nexus One. We’re done with slideshow area. Before moving to the body area don’t forget to Group, what we have made and name it Slideshow_Section.

Step 7: Creating Body Background

Create a new layer above the Background and name it body_bg.

Grab the Rectangle Marquee Tool (M), make a selection in the remaining white areas. Grab Gradient Tool(G), set it to be Radial Gradient, change the foreground to #292929 background #121212. Start to drag from the top to the bottom.

Create a layer above body_bg, link it to body_bg and name it noise. Do the same step as we did on our Slideshow_bg.

Step 8- Dividing the body into two section

Now will divide the body into two parts: Left Side bar and the Content. Grab the Line Tool(U) 1px with white black color.

Set the layer mode to Soft Light. Make another line besides the black line by hitting ALT + ARROW RIGHT. Set the layer to Soft Light and Opacity to 50%. Group both shape and name it Divider.

Step 9- Creating Left Side Bar Recent Posts

To our Leftside Bar for this tutorial we will be making Recent Post and Flickr images.

Grab Text Tool (T),  Font Helvetica, 18 pt, Smooth. This is for our Header. For our posting titles change the size to 12 pt, None. Refer to image below for the positioning.

Create a new layer below the text and name it post_bg.

Grab Rectangular Marquee Tool (M), make a selection as show in the image.

Fill it with #0a0a0a color. Set the layer to Overlay, Opacity to 15%. Do the same in every Post Title. Group all the layers we made and name it Recent_posts.

Step 10- Creating Left Side Bar Flickr

The same font and size to Step 9, let’s make the thumbnail of flickr photos. Duplicate the Thumbnails on what we’ve done on our slide show and resize it about 65 x 65.

Duplicate the divider. Transform it horizontally, place and resize as shown in the screenshot.

Step 11- Creating The Content

For this step we will be making a common post on a blog that will have its Post title a little info and an image thumbnail.

For the image thumbnail just the same on Flickr thumbnails Grab a copy on it and Resize 120 x 120. For the Post title Set the font size to 14pt,  Smooth Color(#bebebe). For the info, set the font size to 12pt None.

Additional to our post, download a free social icons as you like.

Here what I’ve done.

Group all layers and name group as Post. Duplicate 2 times and place it 20 px below.

Step 12- Creating the Footer

Below the last post create a layer and name it footer. Grab Rectangle Marquee Tool(M), Set the foreground color to #0a0a0a.

Make a selection from the bottom left to top right of the last horizontal guide and fill it with the foreground color.

Add this Blending Options

Stroke:

• Size: 1px
• Position: Inside
• Color: 202020

Grab Text Tool(T), set it’s size 12pt, None. Type in your Copyright.

Finally were done.

I hope you enjoyed this tutorial and you could understand my explanations, I am not native English-speaking but I tried my best to teach you some great tips. Maybe you have some comments what should be improved?

Maybe some steps were not enough good explained? Let us know –  we are here to help!

We are designers and we need to think how to create more usable sites for such needs and today we showcased 45 great mobile webdesigns to get you inspired!

If you do not know you can check other website designs here – this is iPhone simulator, but there are plenty of other ones to check on Android,Windows Mobile etc. –   just input there website you want to check and hit enter. Also thing to remember, if site has mobile design version and you don’t get it automatically, you can access it by putting “m” before website address –  “m.example.com” –  from smartphones and iPhones you need to use this mobile address as well to access it.

1. Victoria’s Secret Pink

2. Alex Buga

3. Vondi

4. University of Alabama

5. Virgin Blue

6. Toy Soldier

7. Wegmans

8. Design Quest

9. iWeathr

10. Marina Yachting

11. Dolce & Gabbana

12. Vimeo

13. WVU Today

14. Burger King

15. Sony

16. YellowPages

17. Singlehop

18. McDonald’s

19. AOL Money & Finance

20. Nclud

21. Procab Studio

22. Marcel Muller

23. Pixanimal Studio

24. Android and Me

25. Erskine

26. Mashable

27. Productive Dreams

28. Far From Fearless

29. Twitter

30. Just Creative Design

31. Nike Lab

32. Print Fancy

33. Ammy Stoddard

34. Plaveb

35. Coosh

36. HTC

37. Lexus IS F

38. CWTV

39. Deviant Art

40. MySpace

41. Smashing Magazine

42. Wacom Bamboo

43. Flickr

44. Digg

45. Mobilize Media

Most of my friends, as do most people, are of the opinion that freelancing is the common, easiest choice of the lazy. “Call me when you have some money and then say you have a job…” is the most common expression I’ve heard in my career as a freelancer.
As a freelancer, you need one or more clients, the work should be perfect to impress future clients, you work on your schedule but the task you have has a deadline, which in most cases is yesterday. In conclusion freelancing is a job, a serious way of making money, but you are the boss and you work according to your own schedule.
Let’s take a look at the pros and cons of being a freelancer.

Pros:

• Work at Home
• Organizing your own schedule
• A lot of opportunities on the web
• You can’t be fired or laid off anymore

Cons:

• You will become “tired and bored” of your home
• Your schedule is never the same with the clients deadline
• Clients can always choose another freelancer
• No tasks is equivalent to no money

Want to Become a Freelancer? Necessary Steps:

1. Portfolio

From where I stand, freelancing implies 99% ambition + work (or maybe work + ambition) and 1% talent (I’ve learned it from Thomas Edison). Working as a freelancer involves being a professional in a particular domain (no matter which one) and the ability to work hard. To my shame, I do not have a whole lot of experience, but in my short career I’ve worked really long hours daily. One way to learn is using tutorials, but nothing is possible without conscientious work and a lot of time spent in front of your computer as to become competitive.
All your work (which will be called “portfolio” from now on) should be good and eye-catching to entice possible customers. Taking all these things into consideration, what’s required: a personal site, blog or any promo & ads and an impressive portfolio. This is such an important aspect because it represents you, it shows all your real abilities. Many freelancers can say that they make a new YouTube like project faster and better, but their portfolio can let potential customers know if this it is true or not (if he/she has worked on similar or more difficult projects than the one the clients wants, that should mean that the freelancer is able to do the job). In my personal opinion a portfolio is like a TV commercial: it can either be a launching ramp or just your ordinary unappealing add.

Below are some awesome portfolios to inspire you.

1- Branded07 Portfolio

2- Clear Media Portfolio

3- Jamison Banham’s Portfolio

4- Bain Bridge Studios Portfolio

5- Ploc Media Portfolio

What should I do, until reaching the highest level? (Suppose hard work…)

2. How to be the best!

I am afraid to say that the answer is still work, but not unproductive one. Each time you give the best in your work, try to forward it or ask people what do they think about your work, and if they like it, post it on a website in the field you work. Anyway a pro in domain has a different eye as your friends which in most cases are uninterested in what you have done. To know where you are and to know your true abilities try showing your work on the www. There are a lot of ways to publish your work. In the majority of these places somebody (who is a pro or maybe master) will leave you a comment probably like these:”Nicely done”, “Good work”, “You should try again”, “What is that?”. In case you are a logo designer, then Logopond is the best place (my opinion) where you can post your logos. Here are some other sites where you are advised by the best logo designers in the world:

1- Brand Bucket

2- Logospire

3- Logofury

4- Logofaves

5- Creattica

6- Logomoose

I have also found a few which offer important suggestions for developers on the web:

1- Codebetter

2- Codemonkeyism

3- Scott Hanselman

4- Web-development-blog

5- Leigeber

Great sources for web designers:

1- Smashingmagazine

2- Vandelaydesign

3- Idesignstudios

4- Webdesign-tutorials

3.How to make money?
As I said previously, you “don’t work in vain”. Even if you are a beginner, try to compete with the best to achieve hard standards because World Wide Web (WWW) is a market for freelancers, an important and an exponentially growing one. Below are some places where you can find jobs as a freelancer:

1- Rent-a-coder

On this website, prices are low even though www.rent-a-coder.com is a sounding name. “RAC” is the best opportunity to gain experience because there are many projects from various domains such as logo design, web design, content writing, development, translating, but also MATLAB and Excel algorithms. What you have to know is that getting the first project, may be difficult as you have no feed-back, which is a really important criteria for any customer. Another advantage here is that you can bid as much as you want.

2- 99designs

www.99designs.com is intended only for designers, but this is where the crème of logo & web design. Prices start from 150 $ (the cheapest product ever met here) to 350 $(a web page design is 300-350$ or more and the average logo 200-300$) which means a perfect income for beginners because there is no need to have a portfolio or previous work. You simply submit a “.jpeg” picture of your design and the contest arbiter gives you ratings staring from 1 to 5. After many failed projects on what will be a very important day of your life you will win a project; then you send the *.psd/*.ai format to the client and your account will be “full” of money.

3- Elance

In order to work on this website, it is required to pass an easy exam which consists in few questions about how to pay a freelancer, to receive money or any other frequent problems. You can also post your portfolio, without forgetting that experience and feed-back are as important as I said before.
Surely you can find on the Internet other very good places where to find jobs as a freelancer, I selected only three which I tried personally. I am working on a list of all the online marketplaces for freelancers, and I hope to post it soon.
In conclusion, nothing is possible if you don’t put all your will behind your work and that’s why I have a precious piece of advice: go to work and do your best!

In this article we will explain the various techniques, tutorials, examples relating to the modern trends in building web forms to enhance the user experience.

Form Validation Techniques

when users enter values into the form, as the owner of the site must ensure that the value in accordance with the insert is expected, provide information on visitors to the validation before they are sent to the owner of the site

1. Live Validation

Live Validation is a small open source JavaScript library built for giving users real-time validation information as they fill out forms.

2. fValidator

fValidator is an open source (free) unobtrusive JavaScript tool for easy handling form validation.

3. Validation With Prototype

The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

4. Ajax form validation

This is Ajax form Validation, you can learning how to use AJAX to process and validate your forms.

5. jQuery inline form validation

6. sForm – Ajax Form Validation

This validation form is a real-time feedback to users, when they fill out the form, they will know what happened to see the color will appear. Fields that have not been properly will appear red and after validation is going to be green. This will facilitate the user when filling out the form

AJAX/CSS Forms Tutorials

7. How to make a password strength meter for your registration form

This tutorial will teach you how to make a password strength meter

8. AJAX Form POST/GET

With AJAX the browser page is not reloading, but the data is just sent to the server for processing. The server saves the data or calculates something and sends back the answer. The AJAX JavaScript either displays the answer (page) or does some action depending on the answer

9. Style Web Forms Using CSS

In this article you will look at step by step how you can use CSS to create attractive and usable forms.

10. Styling File Inputs With CSS And The Dom

This tutorial will explain stylish file upload inputs via clever use of js and css. This is great tutorial form Shaun Inman.

11. Degradable Ajax Form Validation

If you’ve ever confronted the task of validating data in a form, you know about choice. Whether it’s choosing between client side or server-side scripts, or the amount of information a user should see on the screen, the results should always give the user quick and meaningful feedback, while providing a solution for when things go wrong.

12. Fancy Contact Form

In this tutorial you will learn to make an AJAX contact form which leverages modern web development techniques. You will using PHP, CSS and jQuery with the help of the formValidator plugin for form validation and the JQTransform plugin, which will style all the input fields and buttons of the form.

AJAX CSS Form Online Builder

13. Form Assembly

This is A CSS Stylesheet Collection for Web Forms

14. Web Form Factory

Web Form Factory is an open source web form generator . They will automatically generates the necessary backend code to tie your form to a database.

15. JotForm

JotForm is the First Web Based WYSIWYG Form Builder. Create and publish web forms using your browser. Its drag and drop user interface makes form building doable for anybody that wants to do it

16. Wufoo

Wufoo is HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

17. FormLogix

FormLogix is an online form builder tool for creating web databases and web forms. FormLogix is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as: Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM

18. Phpform

Phpform  is free form builder . You can create online forms quickly and there are many color options available form

19. Formspring

FormSpring’s is easy form builder that make companies and organizations an easy to create some form online to begin the integration with the web site and data collection

20. Icebrrg

Icebrrg can easily create any kind of online forms for websites and blogs – no programming skills or special skills needed.

AJAX CSS Form Best Examples

21. Masked Input Plugin

22. prettyForms

23. Ajax Contact Form with YUI

24. Ajax Chained Select – demo

25. Instant Edit

26. Anchor Layout with Forms

27. Uploadform

28. Textarea

29. CSS-based Form Template

30. Uniform

Feel free to share your tips and techniques using comments section.