Resources for this tutorial

• Icons from Iconsweets
• Sample images for the center image
• PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document

• Start by creating a 1600px x 1600px document in Photoshop.
• Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
• Rulers: Ctrl + R
• Guides: Ctrl + ; or Ctrl + H
• The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
• Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
• So repeat the step again twice, but now with the value of: 640px and 960px.
• So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
• Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider

We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.

• I used the one above at 20% opacity.
• Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
• Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

• Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
• Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
• Hit OK and there is your pattern.
• Opacity = 3%.
• Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
• To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider

So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal   Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool.  The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow   Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

• Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
• For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
• Add another pattern overlay with the same pattern.
• Opacity is about 15%.

Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow   Inner Shadow Color Overlay

• Just a solid black #000000
• Blending options right arrow.

Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content

• The content starts with a 3 column showcase of text about your website.
• If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
• I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
• Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
• The lorem text also is open sans, but now it´s 12px.
• Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

• Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
• Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow Inner Shadow    Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer

First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4.  That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!

From The Archives - While you are here, don’t forget to check 45 Best Social News Websites To Garner More Traffic that we did on 1WD a long time back. Most of them are still as effective now as they were back then.

What is a Social News Website?

Well, everyone is fully aware of Digg, right? Digg is the perfect example of a Social News Website. Users can either visit their fave news websites directly to read the latest news or they can register for RSS feeds of that website which will keep them updated about the latest news. Social News Websites are another way to keep yourself updated with the best possible news that is recommended by others in the community.

Social News Websites are link generators to be precise. The links are submitted by the community that is part of that social news website. In some cases Social News Websites use automated ways to generate news links instead of depending on user based submissions. After aggregation of links these websites sort the links on the basis of categories and lastly manual votes by the community. These votes decide the importance of some news and increase the reach of that news article.

Read - Pligg: A Social Network Content Management System that can be used to launch your own Social News Website.

Trends that Stick with Social News Website Designs

Quickly, here are few of the trends that have kept social news websites sticking around even when most of the startups have come and gone in the last few years:

• Focus on Content - As I pointed out at the beginning of this article, Reddit is still around due to its focus on content. Reddit has done well to minimize everything other than the stories which helps the readers focus on stories and vote for them if necessary. Some of the social news website designs leave space for a thumbnail which supports the article and explains it better. It is important that the social news platform include a brief descriptions for every story if headings are not being displayed completely. This will make more sense to the reader and keep him looking for more.
• Easy to use Vote Boxes - A voting system is important for any social news website but sometimes these voting buttons don’t do their jobs the way they should and end up ruining the experience. A smooth voting system which doesn’t reload the page every time a new vote is cast must be used by all social news websites. Also, the voting buttons must not interfere with the rest of the design and vice-versa.
• Pagination - The basic purpose of Social News Websites is to collect fresh news from multiple sources and showcase it all on its homepage. These sources are so many in number that the homepage tends to be too small to showcase all the collected news. This is when pagination comes into play. The bottom of the homepage must have links to other pages in order so that older news can be access easily. Also, these pagination buttons must be smoothly blended with design so that they don’t kill the experience.
• Comments and Discussions - These are an integral part of Social News Website Design and a reason why users stick around for longer periods. Designers should be careful while designing the comments section as overdone comments section can be a serious turn off for users.
• Profiles - Social Networking has become trendy and having a community system of your own is really very fancy. This is when a profile system for users on a social news website can really add up to the user base of that website. Users indulge in creating profiles and showing of content which they have been reading on that particular social news website which indirectly benefits the social news website.
• Groups - A social networking platform without groups is almost meaningless. Groups helps users to indulge in discussions and invite more friends to those discussions. Such activities help the website concerned and StumbleUpon is one social news website that has utilized the concept of groups at its best.

Now, let us quickly go through some of the in-business social news websites that we have been appreciated for a long time.

Reddit

Reddit is one of the few social news websites that has survived all competition. Go to the homepage of Reddit and the number of votes or comments that an article on the homepage gets are enough to explain the traffic that this social news website will generate for a link that tops its homepage. Reddit was created to focus particularly on the headlines which is why it is sticking around. The focus on stories was so important for the designers of Reddit that they minimized the size of everything else which helped the stories stand apart on every page of Reddit.

This content based minimal design helps the readers scan through most of the stories and find which is of interest to him. Reddit avoids description fields which is why more number of stories show up on the homepage increasing the chances to webmasters to dream of extra traffics. Reddit features a random Sponsored Section on the top of the homepage which is almost similar to the rest of the homepage except that the background color is different. Such sections helps Reddit pay its bills (and probably pocket away a bit which is perfectly alright).

I have been referring to Reddit for ages and it looks like I will continue to do so for many more years to come.

Slashdot

Slashdot is a technology focused social news website where users initiate discussions and share its stories. Slashdot has been famous for its inspirational discussions on open source software movements. Stories are more or less related to the big guns like Microsoft, Apple etc. Slashdot has also been famous for its Gadget based review and book reviews. Such stories have always found a place on Slahsdot.

Like any other social news website Slashdot gives users the options to categorize the stories and start discussions on the same. Slashdot is one of the few social news website designs that have done well to stick with its user base which are tech lovers or book lovers. It is mainly because of the quality of content that Slashdot continues to garner some of the best possible content on day to day basis on their homepage.

Design Newz

Now, let us discuss something about a design based social news website. Design  Newz is one of the few design based social news website which is famous for the quality of its content. Design Newz is based on hand picked content which is only shared after a lot of research.

Design Newz does not permit users to leave comments and vote for stories which can be a turn off, but the quality of content is enough for you to trust the stories that Design Newz generates. If you are a design lover the Design Newz is for you.

StumbleUpon

StumbleUpon took the world (and the websites featured on it) by storm. It crashed plenty of servers and made plenty of websites super famous. Sometimes the traffic that StumbleUpon generates isn’t completely relevant but the numbers are so pleasing that you will wish for repeated effects.

StumbleUpon has its own community system which helps users interact with each and create groups for relevant discussions. The website will send you notifications if you register for one thus keeping you updated with fresh links. Users can review and vote for various webpages which actually decides the fate of these pages. StumbleUpon’s biggest advantage is its toolbar which when integrated with your browser helps you find new content on the fly.

This is it. I don’t want to discuss Digg because it been discussed time and time again.

Conclusion

Social News Websites are here to stay as they are based on some of the simple trends that we saw above. New website might come and old might die down but the concept will continue to evolve as it is end user friendly. Let us know if you are aware of some more social news websites and your experiences with them.

Final product:

What you’ll need:

• Subtle patterns
• Iconsweet 2
• Music player icons
• Picture of Nadia Ali
• Helvetica neue 55 roman
• Helvetica neue 65 medium

PSD Download

Prepare your tools

Okay so let’s begin! The canvas size depends on the size of your music player, my canvas is
1000 x 500px. Please make sure that you are using 72dpi before you create your new canvas.

You should have a nice canvas size to work with now, but if you’ve looked closely at the end
result, I’ve used a pattern on the background. Here’s where you’ll need the subtle patterns, load
the .pat file and pick a pattern you like and reduce the opacity.

Now that we know what the background looks like, we can make a nice color palette.

Start designing the player!

Let’s start by creating the base of the music player. Grab your rounded rectangle tool (U) and
make sure that the radius is set to 3px. I’ve used a gradient for the stroke because the bottom of the player would’ve ended up looking blurry.

These are the blending options I used:

• #000000 drop shadow

• #FFFFFF inner shadow

• #f7f7f7 to #ebebeb reversed gradient

• #bcbcbc to #d4d4d4 stroke gradient

You should have a pretty nice background for our player now, but there’s something missing. So let’s make it more glossy!

Select the rectangular selection tool (M) and make a selection at the bottom of the music
player’s background. Now that you’ve made a selection we can select the gradient tool (G), grab one color for the gradient and keep the other one transparent to accomplish a nice glossy effect.

You can deselect (cmd + d / ctrl + d) your selection after you made the gradient, since the layer underneath the gradient has a gradient overlay it’s not possible to make a clipping mask. So what we basically do is make a selection of the layer underneath and select inverse, you can
make the selection by ctrl or cmd click the box which I gave a red stroke.

What you should have this far

Lets make the album cover

You will need to use the first two colors of our palette to make the gradient of the background of the
album cover. Duplicate the background layer of our music player and make sure you put the
layer above the player’s background and glow. Rasterize the layer and make a nice square
selection, select inverse and press delete. You should have something like this:

But hey – wasn’t the background of the album cover blue?! Yes it is, so now we have to disable the layer styling and start adding new blending options.

• #ffffff inner shadow

• #2961aa to #45a6fa gradient

• #1c5297 stroke

Now that we have the base ready we can design the picture frame, just grab your rounded
rectangle tool and make a nice square frame. Please make sure that you give the picture frame area to breathe, I gave my cover a 20 pixel margin on all sides. We will have to use the blending options panel again to give the picture frame a nice border.

• #3379c6 drop shadow

• #2961a9 inner glow

• #164c91 stroke

Great! the frame is ready so now we can add a nice picture of Nadia Ali, just open the image with Photoshop and create a clipping mask, resize the image where needed. But we are not ready yet, we still need to add the glare, select your pen tool and make a nice curve, fill the path (#FFFFFF) and reduce the opacity to 20%.

The last thing you have to do is make a group of your album cover section, select the layers that are related to the album cover and press cmd or ctrl + g, rename to group to whatever you want.

What you should have this far:

Making the controls

What is a player without controls, right? So we are going to make a nice play/pause button, previous and next buttons.

Select your Ellipse tool(U) and drag a nice round circle, make sure that you hold shift. This first circle will be the blue stroke around the pause button, the requires some blending options.

• #000000 inner glow

• #2961aa to #45a6fa gradient

• #1c5297 stroke

Okay we have a nice blue circle now, just make a new circle on top of that circle with some
spacing on all sides. this circle will only need a gradient overlay.

• #e8e8e8 to #f6f6f6 gradient

Now you have to add a nice icon to the button to make it look like a play/pause button. Add a nice gradient and inner shadow to the icon.

• #000000 inner shadow

• #e8e8e8 to #f6f6f6 gradient

The play/pause button should be done by now. Now we’re going to make the previous and next buttons, these buttons require the same styling as the play button, so copy the layer style and paste it on those icons.

Also add these layers to a group and call it ‘Controls’.

What you should have this far:

Give the song a name

This step only requires 2 layers. This step can be accomplished with one single layer but I
personally prefer to make two separate layers.

The text color of the artists & song title is #2c69b4, the font size of the artists is 18pt and the font size of the song title is 12pt. Both are Helvetica neue 55 roman, and both layers have a white 1px drop shadow.

What you should have this far:

Making the love and repeat button

Make the love button

Let’s start with the love button, the love button has a nice orange gradient when hovered or
activated. Make a button with a nice size with the rounder rectangle tool, please be aware of the icon that we have to be put in later.

Now that you have a rounded rectangle shape you’re ready to give it some blending options.

• #FFFFFF drop shadow

• #FFFFFF inner shadow

• #db5825 to #ea6733 gradient

• #bd530d stroke

You should have a nice orange button if you’ve done this, but it’s not shiny enough, so we are going to repeat the step that we did to make the glow for the background and it should be fine.

Now it’s time for the icon to take place, take the custom shape tool (U) and find the heart shape, make sure that you hold shift while you make the icon. After you’ve done that, make sure that it’s white so that we can add a nice inner shadow to the icon.

• #bf540f inner shadow

Make the repeat button

Okay so now we have the love button. Add the layers that belong to the love button to a group, rename the group to ‘like button’. Duplicate the group and call the group ‘Repeat button, because the button is almost the same as the love button, we only have to redo some blending options.

Remove the heart icon and add a nice repeat icon to the button, also this icon has to be white (you can always make it white by color overlay).

On the button:

• Replace inner shadow color with #FFFFFF and reduce the opacity to 25%
• Replace the gradient with #d3d3d3 to #e2e2e2
• Replace the stroke color with: #c1c1c1

On the icon:

• Replace the inner shadow color with #c1c1c1

What you should have this far:

Make the track length bar

The track length bar we’re going to make has a stream, buffered stream and a played track. But we are going to start off by writing the track length text.

The track length text is written in 2 different colors the passed time text is #717171 and the
complete track length is #2c69b4. Add a 1px white drop shadow to the text and you’re done.

Total track

Make sure that you give this bar 20px margin from both sides to make it align well. Make a
shape with the rounded rectangle tool.

• #000000 inner shadow

• #000000 inner shadow

• #e0e0e0 to #f1f1f1 gradient

• #f8f8f8 stroke

Buffered track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. Make sure that you change the angle of the gradient to 180 degrees.

• #FFFFFF inner shadow

• #e8e8e8 to #f6f6f6 gradient

• #8faed6 stroke

Played track

Make sure that this bar is 2px smaller then the total track bar because of the border that we’ll add. Make a shape with the rounded rectangle tool. and copy the layer style of the buffered track layer. Make sure that you change the angle of the gradient to 180 degrees.

• Crank up the opacity of the gradient to 100%
• Give the stroke the color #1c5297

What you should have this far:

Design the tracklist

Designing the background of the track list is simple, it’s simple because you can just copy the layer style & glow from the background of the player. Just make a wrapper for the theme songs with the rounded rectangle tool and paste the layer style on the layer and don’t forget to add the glow.

Now we only have to display the songs, make another rounded rectangle and make sure that you have 20 pixels free space from both sides. This one will look a a bit different from the others, so you can’t copy a layer style. Please make sure that the background of the shape is white, otherwise the gradient won’t work.

• #FFFFFF outer glow

• #e1e1e1 inner glow

• #d7d7d7 to #b4b4b4 reversed gradient

• #d4d4d4 stroke

Add the number of the song, and full name of the song in that rectangle and give the text the color #717171 and 1px white drop shadow. This is the same styling that you need to add to the track length indication.

Duplicate the love button and place it in the track’s shape, copy all the layer styles of the repeat button (or you can leave it this way if you want it to stay orange).

Add all the layers that belong to the track to a group.

What you should have this far:

Duplicate this group 3 times and place them underneath each other with a 10 pixel margin. You are almost done now, the only thing that we need to do is design the current song indicator. Pick one song and do the same thing as we did with the background for the album cover and add a Now playing text. This text is written with Helvetica neue 65 medium, has a white color and has a 1px #1c5297 drop shadow.

Yay we’re done! I hope you’ve enjoyed reading this tutorial and I highly recommend you to
make your own suggestions to make sure you’ve understood everything well.

Final result

And we are finished! I hope you love this final outcome and learned a lot throughout this tutorial!

So let’s get started!

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

Resources for this tutorial

• Social Icons
• Wefunction Icons

Step 1: Setting up the Document

Start by creating a 1400px x 1470px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

• Rulers: Ctrl + R
• Guides: Ctrl + ;

Also one important thing when using Ruler Tool is the Info(Information) Panel. Use this when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide and change the value to 1180px, this will make a total of 960px in the center of our canvas.

Step 2: Working on Background

Header and Slider

Starting at the top of the canvas select Rectangle Tool(U) and create a 100% by 470px fill it with #1560d5.

Based on the screenshot, our background will contain grid patterns, so let’s create that. Open up a new window and create a 100px by 100px with a Transparent background. Select Pencil Tool(B) and set the size to 1px then, create an L shape as shown in the screenshot below. Then go to Edit – Define Pattern

Create another pattern using the L shape, but this time make it 20px by 20px.

Now that we have our pattern, create two new layers. For the first layer fill it with the Big Pattern using Paint Bucket Tool(G) and from the drop down list on the options panel set it to Pattern then select the Big Pattern. Then set the Layer Mode – Softlight 50%. On the second layer fill it with the smaller pattern, Softlight 20%.

Result.

Newsletter

Using Rectangle Tool(U) create a 100% by 100px fill it with #111111.

Content & Copyright

Just fill the background layer with #ededed.

Footer

Using Rectangle Tool(U) create a 100% by 260px fill it with #1560d5. Place it 60px upwards starting from the bottom of the canvas.

Step 3: Working on Logo and Navigation

Create a 906px by 60px shape using Rounded Rectangle Tool(U), Radius 3px and fill it with #111111. Place it 50px starting from the top.

Apply This Blending Option

• Drop Shadow:

• Inner Shadow:

• Gradient Overlay:

• Stroke:

Result!

Logo

We will make a temporary logo. Using Text Tool(T) put up the site name. For this example just use Arial 24pt.

• Drop Shadow:

• Bevel and Emboss:

Result!

Add a slogan using the same tool. Font will be Museo 12pt color #777777.

Result!

Navigation

Using Text Tool(T) add your links. Use Arial 14pt color #777777, the active link color will be #ffffff. Each link will have 21px distance on the left and right. Measure it using Ruler Tool(I).

Next we will add a divider to make the links separate. Using Line Tool(U) create a 1px black Line. Place it at the center as shown in the screenshot below.

Merge all the shapes and duplicate it. Apply a #393939 Color Overlay. Move the layer 1px from the right. Now apply a Mask by clicking the mask icon at the layers panel. Now using Gradient Tool(G) black and white. Fill the mask starting from the bottom of the shape towards at the middle.

For the hover effect the font will be white, then it will have a bottom border 2px color #d8d50d.

Step 4: Working on Slider

Create a 10px guide to the right. Using Text Tool(T) put up a dummy heading and text. For the heading I used Oswald 30pt color #ffffff and #efef14. For the paragraph I used Arial 12pt color #e2defd.

Select Rounded Rectangle Tool(U) Create a 180px by 50px rounded rectangle set the Radius to 3px and color to #eae70e.

Apply This Blending Option

• Drop Shadow:

• Inner Shadow:

• Gradient Overlay:

Result!

Next we will add the arrow icon and the text. For the text I used Oswald 18pt color #ffffff and color #9a9603 for the bevel look. For the arrow icon find an arrow from the selection using Shape Tool(U).

For the rounded circle just create a 30px by 30px using Ellipse Tool(U) set the Fill to 0% and apply a 3px stroke inside. For the bevel looking look just duplicate the layers and make the original layer color to #9a9603.

Next adding the controls. Just create a 12px by 12px white circle and set the Opacity to 50%. For the active one just leave it white. For the cpu/servers just grab some stockphotos.

Step 5: Working on News Letter Sign Up

Grab a mail icon from wefunction icon set and place it as shown. For the Heading text I used Museo 500 18pt color #ffffff. For the Paragraph I used Arial 14pt color #777777.

Next we will create the news letter input and button. To start create a 300px by 40px shape using Rounded Rectangle Tool(U) Radius 3px, set the fill color to #f2f2f2.

Apply This Blending Option

• Inner Shadow:

Label it with text Arial 12pt color #555555.

Next using Rounded Rectangle Tool(U) with the same radius create a 90px by 40px shape. Fill color will be #1560d5. Once the shape is in place using Direct Selection Tool(U), Delete Anchor Point and Add Anchor Point create a shape as shown in the screenshot below.

Apply This Blending Option

• Inner Shadow:

• Gradient Overlay:

• Stroke: #0341a2, #1560d5

Label the button with “SIGNUP” using Text Tool(T) color white and for the bevel look color will be #0342a3.

To finish this button using 150px Soft Brush color #ffffff. Click once in a separate layer and transform it as shown in the screenshot below. Then, set the Layer Mode – Softlight.

Result

Step 6: Working on Main Content

The main content will contain Package Table & About Us. Let’s work first on Pricing Table.

Pricing Table

Using Rounded Rectangle Tool(U) with the same Radius, create a 690px by 330px shape and add a 1px stroke color #c3c3c3.

Using the same tool create a 690px by 55px shape with a fill color of #1560d5. Make the bottom part not rounded, and also apply the same blending option as we did in our sign up button.

Let’s divide our table into 3 columns 690 / 3 = 230px each column, so go ahead and measure it using Ruler Tool(I) then add a 1px line using Line Tool(U) color will be #c3c3c3.

Now let’s add data in our table. Each table data will have a 40px of height, white for odd and #f5f5f5 for even. For the text I used Arial 12pt color #555555.

Next let’s create a button for each column. Button size will be 100px by 30px, the same font but font size is 13pt. For the styles just copy what we applied on sign up button and add this blending option.

• Drop Shadow:

Apply also the highlights effect that we did previously.

Now let’s work on the header part. Using Line Tool(U) create a 1px line color will be #0341a3. Next, using Text Tool(T) add the heading text as shown in the screenshot below.

Apply the highlights effect.

About Us

Using Text Tool(T) add the heading text and paragraph. For heading font will be Museo 18pt color #2c2c2c, and for the paragraph Arial 12pt color #555555.

Step 7: Working on Sidebar

The sidebar will contain a blocks. Let’s work first on the first block

Services

Using Rounded Rectangle Tool(U) create a 250px by 225px shape. Apply a 1px inside stroke color #c3c3c3.

Next open up wefunction iconset and grab 3 icons resize it and align it as shown in the screenshot below.

Testimonials

Using the same tool create a 250px by 220px shape with a fill color of #111111. Apply a 1px inside stroke color #000000. Refer to the screenshot below for the text format and colors.

Step 8: Working on Footer

The Footer will be divided into 4 columns Quick Links, From the blog, Quick Contact, and Follow us. Each column will have a 20px distance from the right except for the last one.

Quick Links

The width will be 320px. The will contain two column of links each column will have a width of 150px and a distance of 20px.

From The Blog

The width will be 300px. Using Rectangle Tool(U) create a 49px by 49px shape. Beside it 20px from the right will be the post title and date published.

Quick Contact

Width will be 150px, the same text and spacing.

Follow Us

Width will be 130px and place the social icons as shown in the screenshot below.

And lastly add the copyright text on the bottom left part and links on the bottom right part. Font will be Arial 11pt color #555555.

Finally We’re Done!

I hope you learn something from this tutorial and I hope this helps. If you have questions feel free to drop it below. Happy Holidays everyone. Godbless!

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use it and modify it.

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller demonstrates classified and color-code content is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to make contact with you.

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

12. Diapo

( Demo | Download )

Diapo is a free of charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion; and therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

22. rlightbox

( Demo | Download )

rlightbox is antoher jQuery UI media box that can put on view several kinds of content for instance images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin you can make a fluid thumbnail bar that pages through the images it contains.

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

29. Image Wall with jQuery

( Demo | Download )

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

30. Rotating Image Slider with jQuery

( Demo | Download )

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin you can create a beautiful full-screen slideshow.

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin we can create HTML5 Slideshow auto advance with a few lines of jQuery.

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

41. Slides

( Demo | Download )

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

42. Slidy

( Demo | Download )

jQuery Slidy is a plugin that generates a customizable transitions automatically.

Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration

Silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch

Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan

Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Step 4: Digitally Enhance

Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

b. Fill the outline with the same color.

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

Now, you probably want to spend a lot on your soul mate’s gift, to show her how deep is your love.

Yeah, money can buy cool things, but guess what: almost every year I make my own gifts for my girlfriend (but I always have to buy something else anyway). And I feel that she just loves when I do something by myself instead of just buying it (unless shoes, she wouldn’t like if I made her a shoe). So I’ll show you, dear Padawan, how to make a cool one-page-gift for anybody that you like.

Our goal here is to do a simple “slider”, where a lot of messages and pictures that you like are shown. In the meantime you’ll learn a little bit about design, jQuery and CSS3.

So, let’s rock!

Demo & Download

This is our final effect. You can check out our live demo and download our source files and start playing with it.

Design stuff

First of all we’ll need a cool background. Snow is not an option for me, since in Brazil we barely know what it’s like. So I’d rather pick a cool christmas tree and change it a little. I’ve found a couple of cool images to use in
Salman’s article full of Christmas resources. I’ve chosen one of them, adjusted its colors, sliced its background and cut the Christmas tree itself.

As our effect’s start point (slider and this stuff) we’ll use a rocking tutorial on how to do an Amazing Slideshow (John Lennnon Tribute). We’ll change it a little bit, but the main effect is just amazing :)

Now we need a good looking font for our design. I suggest you to go with Cartoon. Then just generate its webfont and we can include it in our basic HTML (that one downloaded from Rocking Code).

Our basic HTML will be like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Happy Christmas!</title>
<meta name="description" content="Cool DIY Christmas Gift for geek lovers." />
<meta name="author" content="Rochester Oliveira - 1stWebDesigner.com" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="css/style.css?v=2" />
</head>
<body>
<div id="tree">
<div id="container">
<h1>Happy Christmas!</h1>
<div id="masonry">
<div>
<img src="http://placekitten.com/200/300" alt="Cute kitten - http://placekitten.com/200/300" />
<div>Caption text.</div>
</div>
[... more .item divs]
</div>
</div>
<!--! end of #container -->
</div>
<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>

<!-- scripts-->
<script src="js/jquery.images.loaded.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
//[slideshow action scripts]
</script>
<!-- end scripts-->

</body>
</html>

And basic CSS:

body {
	background: #feffef url("../img/bg.jpg") repeat-x center bottom;
 }
 #tree {
	position: relative;
	width: 100%;
	height: 100%;
	background: #feffef url("../img/bg-tree.jpg") repeat-x center bottom;
 }
#container {
	position: relative;
	width: 880px;
	margin: 15px auto;
	padding: 20px 20px 20px 30px;
	background-color: transparent;
	background-color: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff)";
	-moz-box-shadow: 0 0 5px #B8B8B8; /* Firefox */
	-webkit-box-shadow: 0 0 5px #B8B8B8; /* Safari, Chrome */
	box-shadow: 0 0 5px #B8B8B8; /* CSS3 */
}
	#container h1 {
		font-family: 'CartonSlab';
		font-size: 20px;
	}
	.item {
		position: relative;
		padding: 0;
		width: 200px;
		margin-bottom: 20px;
		float: left;
		background: #000;
		overflow: hidden;
	}
		.item img {
			width: 100%;
			cursor: pointer;
		}
	.selected {
		border: 2px solid #fff;
		-moz-box-shadow: 0 0 3px #000; /* Firefox */
		-webkit-box-shadow: 0 0 3px #000; /* Safari, Chrome */
		box-shadow: 0 0 3px #000; /* CSS3 */
	}

As you may have noticed, our tree is done with a different HTML element, so it won’t affect our slideshow effect at all.

Oh, and don’t forget to generate favicons. They are really cool.

Setting up pictures and captions

One thing that will really impress your date is to choose romantic messages and cute stuff. So be ready to search for:

• Cat pictures (demo with a lot of them)
• Hearts
• Landscapes
• Your own pictures

I’ve found a couple of good quotes on QuotationsPage & RomanticloveMessages and have written my own ones (this is really important).

Then, let’s put them inside our HTML with proper markup. We’ll have captions positioned on top, middle and bottom, this way:

<div>
<img src="http://placekitten.com/200/300" alt="Cute kitten - http://placekitten.com/200/300" />
<div>You may not care for me like I care for you But if you ever need me, I will always be around for you.</div>
</div>
<div>
<img src="img/kitten.jpg" alt="Cute kitten - http://www.sxc.hu/photo/1369754" />
<div>It's hard to tell your mind to stop loving someone when your heart still does. </div>
</div>
<div>
<img src="img/kitten1.jpg" alt="Cute kitten - http://www.sxc.hu/photo/555320" />
<div>Meeting you was fate, but falling in love with you was beyond my control. </div>
</div>

And CSS will be:

.item .caption {
	position: absolute;
	top: 0;
	padding: 10px 20px;
	font-family: 'CartonSlab';
	font-size: 15px;
	color: #ffffff;
	background-color: transparent;
	background-color: rgba(0,0,0,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000)";
}
.item .bottom {
	top: auto;
	bottom: 0;
}
.item .middle {
	top: 50%;
}

Coding Slideshow JS

Our basic logic will be:

• It’ll hide all captions and reduce opacity for images on start;
• It’ll automatically expand box and show caption, one at a time;
• When hovering images, it’ll increase its opacity and automatically stop our timer;
• When the person clicks on an image, it’ll expand its box;

First, we’ll make sure that no function will run before all images are loaded (it wouldn’t look good, trust me). This code will do the trick (since we’ve uploaded jquery.images.loaded.js):

//defaults
var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";

$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});

This init() will do our first, third and fourth bullet points. Let’s go through it:

function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}

The coolest thing here is all those chained functions. They improve performance a lot and if you break lines between them (always before “.”) it’ll be much better to understand.

Now we have two important functions, startTimer() and stopTimer(). I’m pretty sure you know what do they do. We’ll use setInterval and clearInterval to control our timer:

function startTimer() {
	timer = window.setInterval( "next()", 6000); // it'll call next function every 6 seconds and will identify this interval as "timer"
}
function stopTimer() {
	clearInterval(timer); //we'll kill timer :(
}

Now we called “next” function every 6 seconds let’s see what it does:

function next() {
	//if we add one item to current we'll still below our total count of numbers?
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}

Now what you’ve been waiting for: expand()

//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}
/*** functions used above **/
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}

Ok, then, let’s group all this stuff inside one script call, and we’re done!

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});
//runs qwiki function for fisrt item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}
function startTimer() {
	timer = window.setInterval( "next()", 6000);
}
function stopTimer() {
	clearInterval(timer);
}
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}
//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}

Personal touch: My horrible voice as background music

I’ve been learning guitar for 1 month. I know how to play two songs (“In spite of all the danger” and “Stand by me”) and I sing really, really bad. But when I showed my girlfriend my first “demo” record, well, I understood why so many guys want to learn guitar.

This is my final personal touch, and you could do so with a cool picture, a recorded mesage (video, maybe), or whatever you can imagine.

What do you think?

So, have you liked it? Are you planning to do something really special to the ones you love most? Let me hear your thoughts!

Without further ado, let us move towards the collection of amazing tutorials. Kindly note that some of these tutorials may also require the use of Photoshop intended for finer details.

If you think we have missed some cool tutorials out there, then let us know or share them with us in the comments. Enjoy!

1. Create a Slick Golden Text Effect with Adobe Illustrator

In the following tutorial you will learn how to create a slick golden text effect. Although it’s a pretty short tutorial, the sixteen steps cover many techniques and effects that can be used for other projects. The Pen Tool steps may be a bit challenging, but with patience and some basic knowledge you will succeed.

2. How to Build Letter Art From Bricks In Illustrator

In this tutorial we’ll use 3D-rendering, Blends, and an Art Brush for creating the final brick art. The skills you will learn here can easily be transferred to creating various brick letters. Enhance your vector skills as a digital brick artist in today’s Illustrator tutorial. So let’s get started!

3. How to Create a Neon Text Effect

In this tutorial we will learn how to create a neon text effect using Gradient Mesh, 3D Modeling, Art Brushes and Transparency palette. Let’s begin!

4. How to Create a Sparkly Text Effect

In the following quick tip you will learn how to create a sparkly text effect in fifteen simple steps. It’s a another tutorial focused on the Appearance panel. Basically, almost the entire text effect is made using only one compound path. A compound path with a simple fill, eight strokes and some basic Illustrator effects.

5. How to create candy cane typography.

In this tutorial we will create a superb candy cane type design using Illustrator and Photoshop. Apply this effect to your own text and create cool and unique Christmas cards!

6. Meltdown Text Effect

Create a super cool meltdown text effect for a typeface in this premium illustrator tutorial. Have fun with your imagination and artistic skills. Learn how to create glows and a liquid drip effect for text in this tutorial. You will learn the techniques which I used to create beautiful text effects.

7. Create a cool water effect

In this tutorial the artist will walk you through the process that he has used in one of the design projects I finished recently. You will learn how to use the mesh tool to create water droplets, use the symbol sprayer tool using symbol of water droplets and dispersing them.

8. Tron Legacy Tutorial

In this tutorial you will learn how to create a beautiful effect like the Tron Legacy Style, for this tutorial the artist used Adobe Illustrator, Adobe Photoshop and Cinema 4D.

9. Create a Jar Illustration and Splashy, Purple Text Effect

In the following tutorial you will learn how to create a jar illustration and splashy, purple text effect. We’ll craft this with numerous, layered shapes and with various opacities. We’ll work with paths and the Pathfinder tools to enhance our text, give it dimension, and style. Let’s get started!

10. How to Create a Delicious Chocolate Text Effect

For all the chocolate lovers out there, here is how to create a delicious chocolate bar text effect in Illustrator. You will use the Blend Tool, effects like Roughen and Chrome, different Blending modes and also the 3D Extrude & Bevel effect to create perfect chocolate squares. Enjoy!

11. Create Colorful, Layered Paper Type

In this tutorial the artist will show you how to brighten your mood by creating vivid illustrations with layered paper text and ribbons. We’ll create custom type and use Illustrator effects extensively to enhance our work.

12. Create a Variety of 3D Lettering Effects for Poster Design

In this tutorial the artist showcases three different approaches for creating simple 3D lettering effects in the context of poster design. Onward and upward we go!

13. Create a Furry Calligram

In this tutorial artist will walk you through creating your own calligram inspired by a dog named Poppy. You’ll learn how to manipulate a typeface through to rendering fur, adding doggy features, and various details.

14. Create a Mummy Text Effect

In this tutorial you will learn how to create this treatment with some gradients and, of course, heavy use of the Appearance panel. There isn’t a lot of steps but the tutorial is slightly more advanced.

15. Golden Text with Diamonds

In this illustrator tutorial, we will learn how to create a golden text style with diamonds using the appearance palette and scatter brushes. You will learn lots of new techniques on applying transform effect, offset path and seamless pattern on appearance palette.

16. How to Make a Flesh Ripping Zombie Type Treatment

In this tutorial you will learn how to make a Flesh Ripping Zombie Type Treatment.

17. Creating an Environmentally Friendly Green Type Treatment

In the following Illustrator tutorial, the artist will teach you how to create a green type treatment. It works great for logos and other design elements.

18. Create a simple blood text

In the following steps the artist will show you how to create a simple blood text effect. You’ll start with a simple text then you will use the Roughen and the Warp effects. Finally, you will need multiple gradients and some simple brushes.

19. How to Create a Zodiac Themed Graphic Style

In this tutorial you will learn how to create a complex graphic style, using only the Appearance palette and commands from the Effect menu. We will be creating a style based on the signs of the zodiac. All the style elements are created from a single character. Is it hard to believe? Let’s get started!

20. How to Create Smoky Brushes and Type In Illustrator CS4

In this tutorial, the artist explain how to create realistic smoke, make it into a brush and use it for type. Let’s light up our vector cigarettes and get smokin’!

21. Old School Type Line Gradients

A detailed tutorial on how to create old school style type.

22. How to Make a Wooden Text Effect

In the following tutorial you can learn how to create “wooden text”. Using the 3D Extrude and Bevel Tool combined with some clever gradients and layer effects you can make this great effect that’s perfect for text and symbols alike.

23. Creating stunning, detailed typography with illustrator

In this tutorial you will learn how to create stunning, detailed typography with illustrator

24. Let’s Make a Playful Yet Robust 3D Letter Design

This tutorial is perfect for the confident beginner who wants to take her skills to the next level. We’ll explore how to create 3D text and use depth-of-field to enhance a design.

25. How to Create a Trendy Retro Type Treatment

In this Illustrator tutorial, the artist will show you how to create a trendy retro type treatment with a free font, gradients, blends, and some scatter brushes. It’s a relative easy tutorial containing techniques that can be quickly applied to many other type treatments and various graphic elements.

26. Bling Bling Text Effect

In this tutorial the artist will be teaching you how to create this eye-catching bling bling effect in illustrator. You will learn how to create the texture and apply it to any text. So let’s get started.

27. Create a glossy, smooth text effect

In this tutorial the artist will show you how to create a glossy, smooth text effect using multiple fills and strokes with different blending modes and varied opacity percentage. For some discrete details, the Star Tool, the Pathfinder options and some other basic effects will come in handy.

28. Create a Stitched Type Effect

In this tutorial you will learn how to create a stitched type effect. You will create simple geometric patterns, a pattern brush and use the appearance panel to create the final look. Let’s get started!

29. Create a Grimy Text Treatment with a Pen Tablet

In this tutorial the artist will show you how to create a grimy text treatment utilizing Illustrator’s Blob brush, Live Paint, and a pen tablet. You can easily apply these techniques to other illustrations, type treatments and logos.

30. Create An Editable Metal Type Treatment

You can easily create this effect without the Appearance panel, but creating this effect like in this tutorial you can easily adjust anything with the text without changing the effect. It is also a good idea to create a Graphic Style for easy implementation to other text and objects within Illustrator.

31. Create a Dream Design with 3D Typography

In this tutorial, we’re going to create a 3D Typography based design. All the elements will revolve around the centerpiece and theme: dreaming. The word will dictate the entire layout and control the space by allowing everything else to emerge from within. The trees will grow out of the letters; the mountains will show themselves behind the word and overshadow the glowing moon.

32. Grungy 3D Text

This tutorial will teach you how to use the 3D tools in Illustrator along with some simple but clever shadow techniques to create some awesome looking grungy 3D text.

33. How to Create a Hand Drawn Style Text Effect

In the following tutorial you will learn how to use different brushes and effects to create a hand drawn text effect. Perfect for illustrative designs, you will create a cute and fun lettering effect.

34. Create a Bending 3D Text Effect

In the following tutorial you will learn how to create a 3D Text Effect in Adobe Illustrator. In addition to using the 3D tools, you’ll layer letter shapes to create color shifts with gradients and highlights. You’ll also work in subtle patterns controlled with Opacity Masks.

35. Create a Green Viscous Text Effect

In the following tutorial expand an existing font, use illustrator’s 3D tools to add dimension, and then add a green viscous text effect. If you want to add a fun, vector text effect to your portfolio, then get started now.

36. Create a Vibrant 3D Pixel Type Treatment

In this tutorial, I will show you how to create a fun 3D pixel font type treatment. Using a free font, gradients, and Illustrator 3D filter, you will easily create a type treatment that you can apply to many other fonts.

37. Illustrator Tackle Twill

This tutorial will show you how to simulate a tackle twill look with Illustrator’s Appearance palette. When we’re done you will be able to apply this style to any text or shape within Illustrator.

38. How To Create Detailed Gothic Linework Typography

Follow this step by step walkthrough of the design process for my recent gothic typography design. We’ll be customizing a blackletter font with various black and white elements and creating a range of tones with detailed line work to create a cool gothic style design that would be right at home as a logo for a heavy metal band or dark apparel brand.

39. Retro 3D Arcade Text Effect

In this tutorial we’ll make clever use of Illustrators built-in 3D capabilities, gradients and opacity masks to design a Retro 3D Type Effect.

40. Create a simple folded paper text effect

In this tutorial you’ll learn how to create a simple folded paper text effect. Also, to improve the look of the final result, you will learn how to create some ink blobs and stains from some simple ellipses and brushes.

41. Create a Silky Ribbon Text Effect

In the following tutorial you will use the Pen and Gradient tools to create a swirling ribbon text effect. Even though we’re applying the ribbon to text, you can use this effect to make shapes and scrolls. Let’s get started!

42. How to Create a Smokin’ Western Type Treatment

In this easy tutorial, you’ll learn how to create a western type treatment primary using Illustrator’s Effects. Using the effects from this tutorial, you can easily apply them to other type treatment and logos. Let’s get started!

43. Stylish text effect tutorial

In this tutorial you’ll learn how to create a beautiful text effect with a subtle vintage look that’s going to be applied to a specific typeface, just to help you get an idea, we will try to generate an old school text that can be implemented on modern web designs.

44. How to Create a Colorful, 3D Text Effect

In the following tutorial you will learn how to create a colorful three-dimensional text effect. We’ll use several Illustrator effects, built-in patterns, a modern font, and more to bring this effect to fruition. Let’s get started!

45. How to Create a Glossy, Colorful Text Effect

In the following tutorial you will learn how to create a glossy, colorful text design in Illustrator CS5. We’ll use an interesting font choice, opacity masks, shape building techniques, and more to create this text effect.

46. Create a Glassy Text Effect Filled with a Green, Acidic Substance

In the following tutorial you will learn how to create a glassy text effect filled with a green, acidic substance. You’ll use shape creation tools, Opacity Masks, and filters. This project could work well to add a mad scientist feel to your next creative design project.

47. Create a Marker Text Effect

This tutorial involves intermediate vector shape building skills in Illustrator to create the markers, along with some layering and script usage to create the text effects. Let’s get started.

48. How to Create a Fun 3D Plastic Text Effect

In this tutorial you will learn how to create colorful 3D plastic letters using the 3D Extrude & Bevel effect and also an all-purpose plastic look that you can save in the Graphic Styles and use it in other projects.

49. Create a Chalkboard Type Treatment

In this tutorial you’ll learn how to create a chalkboard type treatment with some gradients, a bristle brush, and some freebies from Vector Mill! The tutorial is relatively simple and can be applied to many other Illustrator projects. Moreover, you can use the Vector Mill freebies in other projects!

50. Create a Reusable Retro Type Treatment

In this tutorial the artist will show you how to create a simple retro type treatment. Even though its simple, it uses some powerful Illustrator features. If you have read my tutorials before, you know this means the Appearance panel! Along with the Appearance panel, we will be using some texture effects, Warp effects, and some simple layering.

Step 1: Visualize the layout

If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below

Step 2: Sketch

Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Step 3: Scan

Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

Step 4: Digitally enhance

Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

b. Zoom and use the pen tool to copy the finer details on layer 2

c. Use the brush to reconstruct the details on layer 2.

Step 5: Integrate

Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.

Despite cool things like Safari Mobile that makes any (non-flash) website “browsable” it’s easy to see that conversion rates are much higher on interfaces design for mobile viewing.

So be ready to see A LOT of tools to help you create cool things for mobile with just what we know (HTML, CSS, JS).

Frameworks, plugins and development tools

Many of us know how to do things with HTML and JS. Sometimes seriously cool stuff using HTML5 effects and some of the newer coding options. Now you’ll see a lot of tools to help you to bring all your knowledge to create mobile interfaces easily.

App Inventor (beta)

If you like drag & drop, this one is for you. Actually you don’t need to know a single line of code to build your android apps with this great software. I’ve tried it myself and it works great despite a final app sizes being a little large.

DHTMLX Touch

One of the most well-known frameworks. Helps a lot when you know a little JS and HTML5 and want to create powerful apps.

EmbedJS

EmbedJS is a JavaScript framework for embedded devices (mobile phones, TVs, etc.). It takes a different approach than other frameworks by shipping just the code needed for each device. That means, there’s less code going over the wire, less code branching at runtime and less memory usage.

Gury

Gury (pronounced “jury”) is a JavaScript library designed to aid in the creation of HTML5/Canvas applications by providing an easy-to-use chain based interface.

iOSFrameworks.com

For those who knows basic Objective-C, this one is a really useful collection of frameworks to help you in your projects. Really useful!

iWebkit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iUI

Web UI Framework for mobile devices – iOS, Android, Palm, and others.

JoApp

Framework for mobile development with a lot of cool features, like native-like widgets, multiple ways to code, and heavy use of CSS3.

jQuery Mobile

How could I forget this one? Well, this is our well known jQuery with a lot of mobile-optimized features. With its recent 1.0 launch it will be a default script for many sites (just like jQuery “normal” is now).

jQTouch

At first it may look like just another plugin for responsive layouts. Well, it’s actually almost a UI framework with a lot of cool features that will save you a lot of development hours. :)

Kendo UI

Kendo has a lot of cool features for responsive UI. It does a lot of amazing things, like responsive charts being one of the most impressive performances you’ll find.

Lime.JS

Do you like games? Yeah, you, me and Lime.js do. Build games faster than ever with this HTML5 game framework.

MOBL

Feel like learning a new language? Mobl is a new programming language for mobile devices. Sounds cool, huh?

NEXT Interfaces

NEXT is a free, open source Java and HTML5 framework for building Native Looking web applications for smartphones and tablets.

NimbleKit

NimbleKit is the fastest way to create applications for iOS. You don’t need to know Objective-C or the iOS SDK. All you need is to know how to write an HTML page with JavaScript code.

PhoneGap

Using the free open source framework or PhoneGap build you can get access to native APIs.

Sencha Touch

You’ve probably heard about this one, Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

The M-Project

It’s a really good framework, with great documentation, built to allow you to develop easily cross-platform mobile apps.

Titanium

Titanium is different because after your development process it generates a compiled app for iOS or android, so you can get a higher performance with native apps without learning a line of Objective-C or Java.

Touchy

More than just a boilerplate, it has a lot of built-in functions to do all the heavy lifting, so you can focus on getting your app out there. Touchy goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.

WebApp.Net

WebApp.Net is a light weight, powerful JavaScript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

Wink Toolkit

Wink Toolkit is a lightweight JavaScript toolkit, designed and developed to meet the specific constraints of the mobile environment. The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities.

Zepto.Js

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax.

Miscellaneous tools

Here we have everything from validators to image gallery plugins.

320 and up

The ‘tiny screen first’ boilerplate extension. It prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

960 Grid on jQuery-Mobile

jQuery-mobile-960 is a port of 960 grid to jQuery mobile. It merges the flexibility of 960.gs, and the ease of jQuery mobile.

Animatable

It’s not ready to use…yet. But you should bookmark this one. It’ll help us create animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices.

Dynamic carousel

Responsive carousel script. Check it out!

Galleria.Aino.Se

Galleria is a cool image gallery script that works nice from desktop to mobile.

HTML5 Boilerplate / mobile

HTML 5 Boilerplate has a set of cool features for mobile interfaces with a lot of guidelines to get the most from your mobile app.

Initializr 2

Since it uses the HTML5 Boilerplate it has the same cool features.

Masonry

It allows you to use crazy grids that would be just impossible with CSS floats. Plus, with a touch of creativity, you can do cool things, like this Scroll Wall with jQuery Mobile and Masonry.

Mobile Emulators & Simulators: The Ultimate Guide – MobileXWeb

A complete guide of mobile emulators and tools to help you test your apps.

Not Just A Grid

Not Just a Grid is a flexible and modular CSS  framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

MobiReady

The mobiReady testing tool evaluates mobile-readiness using industry best practices & standards.

Treesaver

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.

W3C Mobile Validator

It’s from W3C.  No more description needed, right?

Wijmo

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts.

WP Touch

WPtouch: A simple, powerful and elegant mobile theme for your website. WPtouch automatically transforms your WordPress blog into an iPhone application.

Tutorials and Articles

Mobile Web Design Trends and Best Practices – DesignModo

A long and very well written guide with all the basics you need to know before getting started with this mobile development thing.

Building Mobile Web Apps the Right Way: Tips and Techniques – SixRevisions

Good guide with a comparison of what you’re used to doing for desktop development and what you should be doing for mobile interfaces.

10 handy jQuery mobile tips and snippets to get you started – WebDesignerDepot

jQuery mobile is a great tool, indeed. But you need to know how to use it. This really helpful guide will help you get started with jQuery mobile!

Build a Responsive, Mobile-Friendly Web Page With Skeleton – DesignShack

I didn’t mention skeleton because this guide will help you understand it better. You can use these principles in all other mobile boilerplates out there.

Awesome Mobile Image Gallery Web App – Codrops

Check it with your mobile device and be as amazed as I was at first. Pretty cool :)