<p>Enough is enough, guys!</p><p>Let me set this straight once and for all.</p><p>So you have decided to become a web designer, right?<br /> That is just AMAZING<strong>!</strong></p><p>But did someone recommend you to go to college to do that?<br /> That is just HORRIBLE<strong>!</strong></p><p>Whoever said it deserves a slap on the wrist!</p><p>Because college is where you get taught stuff, right?<br /> RIGHT<strong>!</strong></p><p>So, this is where it all gets horribly wrong.</p><p>And now let me explain to you why…</p><p><strong>+VIDEO At The End</strong></p><p><span id="more-78262"></span></p><h2>Sucking Blood Today,<br /> Makes You a Web Designer Tomorrow</h2><p><img alt="" class="alignnone size-full wp-image-78264" height="300" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/12/vampire.jpg" title="vampire" width="570" /></p><p><em><a href=" <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=IqDVjl76hgA:Hf0QE8bkeZ4:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=IqDVjl76hgA:Hf0QE8bkeZ4:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=IqDVjl76hgA:Hf0QE8bkeZ4:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=IqDVjl76hgA:Hf0QE8bkeZ4:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/IqDVjl76hgA" width="1" />

<p>Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices.</p><p>It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial we are going to focus on fluid grids and their importance in responsive design.</p><p><span id="more-77663"></span></p><h2>What is a Fluid Grid?</h2><p>It’s important to know the meaning of fluid grids before we start thinking about the designs. There is no better explanation than the definition given by Wikipedia on fluid.</p><blockquote><p>A fluid is a substance that continually deforms (flows) under an applied shear stress - Wikipedia</p></blockquote><p>So I’ll make things clear by explaining the above definition in simple practical terms. In web design, fluid will be our design or layout and shear stress will be the screen size or user device. Regardless of what the device or screen size is, components in fluid designs are going to flow and adapt to the user environment.</p><h2>Importance of Fluid Grids</h2><p>In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.</p><p>Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.</p><h2>How Fluid Grids Work</h2><p>We used to design inside fixed grids with the 960px system. Then the layout became adaptive by using different pixel sizes at different screen sizes. It was all about pixel based layout design. Now the time has come to create percentage based designs which are known as fluid designs.</p><p>In fluid grids we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.</p><p>Before we dig deeper into fluid grids, let’s take a look at some cool fluid designs to get an idea about how fluid layouts work.</p><p><strong><a href="http://dustycartridge.com/" target="_blank">Dusty Cartridge</a></strong></p><p><img alt="" height="175" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/fluid_grid_sample1.png" title="fluid_grid_sample1" width="570" /></p><p><strong><a href="http://www.palantir.net/" target="_blank">Palantir.net</a></strong></p><p><img alt="" height="176" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/fluid_grids_sample2.png" title="fluid_grids_sample2" width="570" /></p><p><strong><a href="http://dressresponsively.com/" target="_blank">Dress Responsively</a></strong><br /> <img alt="" height="175" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/Fluid_Grid_sample3.png" title="Fluid_Grid_sample3" width="570" /></p><h2>Fluid Grid Systems and Generators</h2><p>Creating a fluid grid from scratch is not an easy task and will require time and effort. Hence it’s wise to choose an existing CSS Grid Framework or Grid Generator as the base for your layout design. The following are some free CSS grid systems and generators.</p><ul><li><a href="http://www.tinyfluidgrid.com/" target="_blank">tiny fluid grid</a></li><li><a href="http://grids.heroku.com/" target="_blank">Variable Grid System</a></li><li><a href="http://csswizardry.com/fluid-grids/" target="_blank">Fluid Grids Calculator</a></li><li><a href="http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem" target="_blank">Fluid Grid by Bootstrap</a></li></ul><p>Most of the CSS grid frameworks will come with advanced built in features and have been tested across many browsers. The purpose of this tutorial is to understand fluid grids from top to bottom. Hence it’s wise to generate a fluid grid which will enable you to learn the basics of fluid grids.</p><p>I will be using the  <a href="http://grids.heroku.com/">Variable Grid System</a> to generate a fluid grid according to our preference. Follow this link and adjust the variable values. I’ll be using the following values.</p><p><strong>Column width</strong> - 60<br /> <strong>Number of columns</strong> - 12<br /> <strong>Gutter width</strong> - 20</p><h3 style="text-align: center;"><a href="http://1stwebdesigner.com/demos/fluid-grids/default.html" target="_blank">Demo</a></h3><p>Then download the fluid version of the CSS file. Now open it in your favorite text editor and search for <strong>Grid >> 12 Columns</strong>. The code below shows the content of <strong>Grid >> 12 Columns</strong> section.</p><pre class="brush: css; title: ; notranslate"> .container_12 .grid_1 { width:6.333%; } .container_12 .grid_2 { width:14.667%; } .container_12 .grid_3 { width:23.0%; } .container_12 .grid_4 { width:31.333%; } .container_12 .grid_5 { width:39.667%; } .container_12 .grid_6 { width:48.0%; } .container_12 .grid_7 { width:56.333%; } .container_12 .grid_8 { width:64.667%; } .container_12 .grid_9 { width:73.0%; } .container_12 .grid_10 { width:81.333%; } .container_12 .grid_11 { width:89.667%; } .container_12 .grid_12 { width:98.0%; } </pre><p>As you can see <strong>container_12</strong> is the main container. Each and every element in our design should be inside a container with the class <strong>container_12</strong> . Then percentage based widths are assigned to classes with <strong>.grid_1 , .grid_2 … .grid_n. </strong>Fluid grids are built using columns that are considered fluid columns. When the screen size is changed, the widths of these columns will adjust proportionally to its parent container.</p><p>We have 12 fluid columns in our grid. So let’s take a look at how the columns are stacked up in our layout.</p><p><img alt="" height="465" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/11/Fluid_Grid_Default.png" title="Fluid_Grid_Default" width="570" /></p><p>The code for the above section is given below. You can check the downloaded files for more information.</p><pre class="brush: xml; title: ; notranslate"> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Fluid Grid with Fluid Columns</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div id="single-columns" class="container_12"> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> <div class="grid_1"><span>1</span></div> </div> <div id="double-columns" class="container_12"> <div class="grid_2"><span>2</span></div> <div class="grid_2"><span>2</span></div> <div class="grid_2"><span>2</span></div> <div class="grid_2"><span>2</span></div> <div class="grid_2"><span>2</span></div> <div class="grid_2"><span>2</span></div> </div> </body> </html> </pre><p>Each set of components is contained within an element with the <strong>class container_12</strong>. Inside the container we can use the <strong>grid_n</strong> class to create fluid columns with specific widths. Using <strong>grid_1</strong> will give 1/12 width of the original grid and <strong>grid_2</strong> will give you 2/12.</p><p>You can load the demo and resize your browser to view the fluid nature of grid columns.</p><h2>Nested Fluid Columns</h2><p>When you have a CSS framework, creating a grid with fluid columns is straightforward. But not all designs are going to be straightforward like the layout shown previously. We might need to create columns and rows inside other columns and rows. Columns contained within a parent column are called nested columns. Let’s see how we can create nested fluid columns using the CSS file we generated earlier.</p><h3 style="text-align: center;"><a href="http://1stwebdesigner.com/demos/fluid-grids/nested.html" target="_blank">Demo</a></h3><p><img alt="" height="407" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/Fluid_Grid_Nested_Columns.png" title="Fluid_Grid_Nested_Columns" width="570" /></p><p>The layout given above contains 2 rows. The first row is divided into 2 sections of 6 columns and each of the 2 sections are divided again into 4 sections of 3 columns.</p><p>Likewise the second row is divided into 3 sections of 4 columns and each of the 3 sections is divided again into 3 sections of 4 columns. This is how you create nested columns in grids. Let’s see how to code the above layout.</p><pre class="brush: xml; title: ; notranslate"> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Nested Fluid Columns</title> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div class="container_12"> <div class="grid_6"> <div class="container_12"> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> </div> </div> <div class="grid_6"> <div class="container_12"> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> <div class="grid_3"><span>3</span></div> </div> </div> </div> <div class="container_12"> <div class="grid_4"> <div class="container_12"> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> </div> </div> <div class="grid_4"> <div class="container_12"> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> </div> </div> <div class="grid_4"> <div class="container_12"> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> <div class="grid_4"><span>4</span></div> </div> </div> </div> </body> </html> </pre><p>First we create the main containers and columns as we did in the previous section. Inside the column we need to create another container with container_12 class for nested columns. Now we get another 12 columns inside the main 6 columns. Then 12 sub columns can be divided as necessary. Now you should have a clear knowledge of creating fluid grids and working with nested columns. Let’s move further in fluid grids.</p><h2>Design Beyond Fluid Grid</h2><p>Most designers that are just starting out think that using a responsive CSS framework will make your design responsive. Unfortunately responsive design is not that simple. Fluid grids will adapt to the change in browser window or device. Unless you plan the design carefully , users will have problems browsing your content on smaller devices when you use fluid grids.</p><p>Consider the screen below.</p><p><img alt="" height="514" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/Fluid_Grid_Small_Screen.png" title="Fluid_Grid_Small_Screen" width="306" /></p><p>This is how the fluid grid layout discussed in earlier sections will display on small screens. These are just grid columns without proper data. Even in this case the number 1 is not displayed properly. When it comes to real content it’s going to be a total mess. In this scenario we need to adjust the widths of the columns in order to provide better user experience.</p><p>You can use CSS media queries to adjust the widths of columns for different screen sizes. In the above scenario you can double the column width and keep 6 columns instead of 12 to provide better readability of your content. So make sure not to depend only on fluid grids in responsive designs.</p><h2>Testing Fluid Grids</h2><p>Now that we have completed the basics of fluid grids, we can move onto creating a simple demo with jQuery to test the fluid grid for different screen sizes. First we are going to create the page layout and navigation as shown below.</p><h3 style="text-align: center;"><a href="http://1stwebdesigner.com/demos/fluid-grids/index.html" target="_blank">Demo<br /> </a></h3><pre class="brush: xml; title: ; notranslate"> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Fluid Grid Tester</title> <script type="text/javascript" src="jquery.min.js" ></script> </head> <body> <div id="device_navigation"> <div id='device_panel'> <a href="javascript:void(0);" onclick="changeGrid('desktop');">Desktop</a> <a href="javascript:void(0);" onclick="changeGrid('tab_lan');">Tablet Landscape</a> <a href="javascript:void(0);" onclick="changeGrid('tab_pot');">Tablet Portrait</a> <a href="javascript:void(0);" onclick="changeGrid('mob_lan');">Mobile Landscape</a> <a href="javascript:void(0);" onclick="changeGrid('mob_pot');">Mobile Portrait</a> </div> <div style="clear:both"></div> </div> <div class='main_wrapper'> <iframe class="wrapper" src="media_query.html"></iframe> </div> </body> </html> </pre><p>Our testing page has basic HTML layout with jQuery. Element with the ID <strong>device_panel</strong> will contain the navigation for standard devices like desktops,mobiles and tablets. Once the link is clicked <strong>changeGrid</strong> function will be called with the type device as parameter.</p><p>On the bottom section we have an IFRAME which will be used to load our fluid grid. Fluid grid is contained in the <strong>media_query.html</strong> file. Now let’s take a look at the <strong>changeGrid</strong> function.</p><pre class="brush: jscript; title: ; notranslate"> function changeGrid(device){ if(device == "desktop"){ $(".wrapper").css("width","960px"); } if(device == "tab_lan"){ $(".wrapper").css("width","768px"); } if(device == "tab_pot"){ $(".wrapper").css("width","600px"); } if(device == "mob_lan"){ $(".wrapper").css("width","480px"); } if(device == "mob_pot"){ $(".wrapper").css("width","320px"); } } </pre><p>Once the function is called, it will check for the device using the passed parameter. Then it will change the width of the .wrapper (IFRAME) to the standard width for the device. Then we will be able to see how a fluid grid works on smaller screens.</p><p>Fluid grid used inside <strong>media_query.html</strong> file will be similar to the examples we discussed in earlier section. You can use the demo files to customize the codes. You should have something like the following screen as the testing screen.</p><p><img alt="" height="355" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/Fluid_Grid_Tester.png" title="Fluid_Grid_Tester" width="570" /></p><h3 style="text-align: center;"><a href="http://1stwebdesigner.com/demos/fluid-grids.zip" target="_blank">Download</a></h3><h2>Wrap Up</h2><p>Fluid grids allow you to create responsive designs which suit dynamic screen sizes. The complexity of developing a fluid grid can be minimized by using an existing CSS framework. You cannot depend only on fluid grids to provide the perfect responsive design for you. Adjust the fluid grid when necessary according to your design and try to provide the best browsing experience for the user. Hope you learned something from this tutorial and I’d like to hear your suggestions.</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=RJ_UuUxR08g:e0iAqr2Im7E:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=RJ_UuUxR08g:e0iAqr2Im7E:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=RJ_UuUxR08g:e0iAqr2Im7E:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=RJ_UuUxR08g:e0iAqr2Im7E:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/RJ_UuUxR08g" width="1" />

<p>Howdy! Maybe you’re one of those who haven’t updated their Twitter headers yet, or maybe you’ve heard it already but you’re not just into creating your own design due to a lack of inspiration? Well, that’s not a problem at all now, this tutorial is for you. I’m going to show you how to create your own, and showcase some Twitter headers for your inspiration.</p><p></p><p>Before we get started creating our own design, let’s take a look at this list of inspiration to boost up your creativity level.</p><p><span id="more-77845"></span></p><h2>Use of Self Portrait</h2><p>Select your best photo and align it properly to with the avatar.</p><h4><a href="https://twitter.com/Rosen" target="_blank">@Rosen</a></h4><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-15.jpg" /></p><h4><a href="https://twitter.com/RyanSeacrest" target="_blank">@RyanSeacrest</a></h4><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-16.jpg" /></p><h4><a href="https://twitter.com/db" target="_blank">@db</a></h4><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-17.jpg" /></p><h2>Branding</h2><p>Select the best product you own and showcase it.</p><h4><a href="https://twitter.com/Starbucks" target="_blank">@Starbucks</a></h4><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-18.jpg" /></p><h4><a href="https://twitter.com/krispykreme" target="_blank">@krispykreme</a></h4><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-19.jpg" /></p><h4><a href="https://twitter.com/PlayStation" target="_blank">@PlayStation</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-20.jpg" /></p><h2>Vector Illustration</h2><p>Using Vector art is always good to look at.</p><h4><a href="https://twitter.com/OrganikSEO" target="_blank">OrganikSEO</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-21.jpg" /></p><h4><a href="https://twitter.com/Vimeo" target="_blank">@Vimeo</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-22.jpg" /></p><h4><a href="https://twitter.com/Adobe" target="_blank">@Adobe</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-23.jpg" /></p><h2>Dark Backgrounds</h2><p>Dark background makes the avatar picture and text pop ups more.</p><h4><a href="https://twitter.com/VandelayDesign" target="_blank">@VandelayDesign</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-24.jpg" /></p><h4><a href="https://twitter.com/wpbeginner" target="_blank">@wpbeginner</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-25.jpg" /></p><h4><a href="https://twitter.com/Behance" target="_blank">@Behance</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-26.jpg" /></p><h2>Creative</h2><p>Very creative how they present their interest by the use of illustration.</p><h4><a href="https://twitter.com/laurenonizzle" target="_blank">@laurenonizzle</a></h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-27.jpg" /><a href="https://twitter.com/laurenonizzle" target="_blank"><br /> </a></p><h4><a href="https://twitter.com/MKBHD" target="_blank">@MKBHD</a></h4><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-28.jpg" /></p><h4><a href="https://twitter.com/imjustcreative" target="_blank">@imjustcreative</a></h4><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-29.jpg" /></p><h4>Make it Simple</h4><h4>@twitter</h4><p><a href="https://twitter.com/twitter" target="_blank"> <img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-30.jpg" /><br /> </a></p><h4>@SocialNorth</h4><p><a href="https://twitter.com/SocialNorth" target="_blank"> <img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-31.jpg" /><br /> </a></p><p>Now that you’ve seen some inspiring Twitter Headers, let’s create your very own Twitter header. See below how I created my own Twitter header.</p><h2>Creating The Custom Design</h2><h3>Step 1</h3><p>Open Photoshop and create a new document 520px by 260px.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-1.jpg" /></p><h3>Step 2</h3><p>Let’s setup a guideline where our block will end. To do this go to <em>View</em> - <em>New Guide</em>. Set the value to <strong>180px</strong> and make sure you select <strong>Horizontal</strong>.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-2.jpg" /></p><h2>Step 3</h2><p>Now let’s create the blocks. Using the <strong>Rectangle Tool(U)</strong> create a <strong>11px</strong> by <strong>11px</strong> shape, place it from the top and downwards for the guideline and make sure each block has a distance of <strong>5px</strong>. Also adjust the positioning as shown in the screenshot below.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-3.jpg" /></p><h3>Step 4</h3><p>Duplicate all the blocks until you reach far right.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-4.jpg" /></p><h3>Step 5</h3><p>Now that we have all the blocks in place, time to change the colour of each block. The goal is to suit your current twitter background. What if we choose three colours from the existing background? I took two colours from 1WD’s logo and a one colour a little lighter than dark grey.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-5.jpg" /></p><ul><li>#f58220</li><li>#6d6f71</li><li>#8a8c8f</li></ul><p>The orange squares will be aligned to the avatar image, then the remaining blocks will be filled by the other colours.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-6.jpg" /></p><h2>Step 6</h2><p>Continue filling the boxes with colours until you fill them all. Once you’re done, you should have something that looks like in the screenshot below.</p><p><img alt="" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-7.jpg" /></p><h2>Step 7</h2><p>It feels like it’s a bit boring that it has the same number of blocks in each columns. What if we remove some blocks on the top and bottom? Let’s try it.</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-8.jpg" /></p><p>It looks more appealing to me. What do you think?</p><h2>Step 8</h2><p>Twitter will automatically darken up bottom part of the image about 50% - 60%. In this case, 60% of our design will not be enough to make the text pop up more.</p><p>How it looks when we upload it on Twitter.</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-9.jpg" /></p><p>Now what we are going to do is add a gradient to the bottom part of our design. Select the <strong>Gradient Tool(G)</strong>, change the Foreground colour to <strong>#8a8c8f</strong>, set the gradient to Foreground to Transparent. Start filling from the bottom towards the centre of the canvas.</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-10.jpg" /></p><p>Now that we have finished our design, save it as JPEG, <strong>Ctrl + Alt + Shift + S</strong> to save for web.</p><p>How it looks when I uploaded it to Twitter.</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-11.jpg" /></p><h2>How To Set Your Twitter Header</h2><p>Click the settings icon and choose <em>settings</em> from the drop down menu.</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-12.jpg" /></p><p>Select Design</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-13.jpg" /></p><p>When you scroll down to the bottom you will see <strong>Customize your own</strong>. Click change header botton and upload the JPEG file we just created.</p><p>When you look at your profile you will see how great it is :P</p><p><img alt="" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/11/twitter-header-img-14.jpg" /></p><h3 style="text-align: center;"><a href="https://twitter.com/_burnstudio">Demo</a> | <a href="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/Twitter-Header.zip">Download</a></h3><h2>Conclusion</h2><p>There you have it, we just created our new custom Twitter header design in eight simple steps. Just make sure that your Twitter header is a part of the overall design and describes your personality or brand. Make it as simple as possible.</p><p>Well, that’s it! I hope you found this tutorial helpful. Make sure to share this to your friends if you like it and don’t forget to follow me on Twitter <a href="https://twitter.com/_burnstudio" target="_blank" title="_burnstudio">@_burnstudio</a>. Thanks!</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=7qepoLom_gk:nsD7sw6uGrI:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=7qepoLom_gk:nsD7sw6uGrI:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=7qepoLom_gk:nsD7sw6uGrI:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=7qepoLom_gk:nsD7sw6uGrI:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/7qepoLom_gk" width="1" />

<p>Today we have really exciting news for you!</p><p>How would you like to see yourself become a better web designer with our help? Do you feel like you are left alone on this journey to become a web designer?</p><p>Do you want to <strong>see</strong> and <strong>hear</strong> how I flunked on camera and do you want to see <strong>1WD’s new branded microphone?</strong></p><p>Yes, you heard it right - see and hear!</p><p>We aren’t seeing you yet, but you can see us and it really feels like we are talking directly to you!</p><p>You are alone NO MORE! Oh, wait! There is much more, watch video now! <span id="more-78081"></span></p><h2>Introducing 1WD TV</h2><p>Just to be sure you know it’s me, founder of 1stWebDesigner and James Richman talking in this video, you can check his articles <a href="http://www.1stwebdesigner.com/author/james-richman/">here</a>!</p><h2>On The Journey To Becoming Web Designer</h2><p>Everything started some time ago when you found out how exciting and full of opportunities the Internet is. You saw all the huge opportunities the Internet is providing, you read all those different stories of young people succeeding online and thought, “what  about me?” You sat down on your couch, your whole life ahead of you and dreamed of your very own project, of how it could conquer the world. But there was one little problem - you wanted to change, but you didn’t know how you can start out. There was no one there for you to ask for advice, nobody to care for you during your first step!</p><h3>What should I learn first?</h3><p>Should I start with Adobe Photoshop so I can create beautiful looking web designs? Designs which will attract other people, other designers and make them share their feedback and help me improve my web design even more?</p><p>Or maybe I should learn HTML5 and CSS3 - languages that everybody is talking and raving about? I could create my first responsive web design portfolio to show I am ahead of the competition. New clients would reach out to me, interested to utilise my skills. That would be nice start!</p><p>Oh but then there are more graphic programs, there are more programming languages, then there are many more CMS you could learn using!</p><p>One question remains - <strong>what should I learn first?</strong> How can I get started?</p><p>And when you finally make a decision, it doesn’t really get any easier. You may create your first web design, but is there anyone who is willing to give you a creative feedback?</p><p>Well, we have good news for you! You are <strong>Alone No More</strong> and we will work hard to keep our promise to you! We are willing to change, but are you ready to change with us? Are you ready to connect, socialise and help us with your feedback on what we are trying to do here? Are you ready to take this journey with us?</p><p>Are you asking why?</p><blockquote><p> I have a better question for you - why not? And why not start now?</p></blockquote><h2>Want to know more about what you will get out from upcoming 1WD TV videos?</h2><p><img alt="" class="alignnone size-full wp-image-78124" height="400" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/11/graphic1.jpg" title="graphic" width="570" /></p><p>I, Dainis, and James Richman tried to explain what is happening here, but we were a bit stressed so we made quite a few mistakes on the video (I was very stressed, first public video ever for me). Let me follow up here and explain one more time what we are going to cover in upcoming 1WD TV videos!</p><p>You will be able to join us on Google+ Hangout! We are using Google+ Hangout to record our videos for now in order to use the most social way possible with videos. The quality isn’t what we love, but it works! What do you think about hangouts?</p><h3>What you will hear us talking about on these videos</h3><p><img alt="" class="alignnone size-full wp-image-78125" height="512" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/11/1WDTV1.jpg" title="1WDTV" width="512" /></p><p>The first thing I wanted to explain is when James mentioned we won’t be covering web design tips in the video. We will not be covering COMPLICATED web design or coding tips - a few people got confused about that part! Instead you will get easy to implement, simple, yet effective, web designing tips you can use when creating design. Creating design which accomplishes your or your client goals - professional visual design, better usability, better conversions, more sales, more contracts from new clients, if that’s what you want!</p><blockquote><p>How can you know if you can trust our advice?</p></blockquote><p>That’s a great question!</p><p>Well, we will be doing our homework, doing crazy research and we will base our advice on facts and things we have tested ourselves.</p><p>Actually, with the upcoming 1stWebDesigner redesign, we will do crazy A/B split testing, heat mapping, watch how people interact with 1stWebDesigner to see what works and what doesn’t. And with 80,000 to 90,000 daily unique visitors I think we can get great results that you will be eager to read about! And the best thing for you is that we will showcase each test in a manner that you can use to improve your own web design to reach your goals faster! We will be working hard and sharing with you our research and results and then it will be up to you if you want to improve your web design!</p><h3>Are You Excited About These Upcoming Changes?</h3><p>If you don’t want to  miss the next video, subscribe to our mailing list or simply circle us on G+ - <a href="https://plus.google.com/112855603138580222073/posts" target="_blank">Dainis Graveris</a> and <a href="https://plus.google.com/107906336334505040606/posts" target="_blank">James Richman</a>! Please respond to the question we got for you on the video! And join us on this journey!</p><p>I hope you are as excited as we are! See you in the next video!</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=WhEnwbmeHos:AIRr9a7wtK4:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=WhEnwbmeHos:AIRr9a7wtK4:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=WhEnwbmeHos:AIRr9a7wtK4:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=WhEnwbmeHos:AIRr9a7wtK4:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/WhEnwbmeHos" width="1" />

<p>Howdy Folks! In this tutorial you will learn how to convert Artthatworks (if you want to know how to create this design in Photoshop check <a href="http://www.1stwebdesigner.com/tutorials/photoshop-tutorial-beautiful-portfolio-artthatworks/" target="_blank">here</a>!)  from PSD to HTML using Skeleton Boilerplate and make it responsive with media queries. As I mentioned in my last tutorial, I hadn’t tried using a framework until recently. I found the Skeleton Boilerplate Framework which makes it very easy to convert PSD files into HTML, by calling the right classes you can create a quick responsive layout. Sounds great right? Well then get ready and let’s get started.</p><p><span id="more-76876"></span></p><p><a href="http://feeds.feedburner.com/1stwebdesigner"><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-16.jpg" /></a></p><h3 style="text-align: center;"><a href="http://www.1stwebdesigner.com/demos/Artthatworks/">Demo</a> | <a href="http://www.1stwebdesigner.com/demos/artthatworks.rar">Download</a></h3><h2>Resources for this tutorial</h2><ul><li><a href="http://1stwebdesigner.com/demos/artthatworks.psd" target="_blank" title="PSD Download">PSD Download</a></li><li><a href="http://www.getskeleton.com/" target="_blank">Skeleton Boilerplate</a></li><li><a href="http://slidesjs.com/" target="_blank">SlidesJS</a></li><li><a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" target="_blank">Elastislide by Codrops</a></li><li>Time and Patience :)</li></ul><h2>What is Skeleton Boilerplate</h2><p>Skeleton Boilerplate is basically like <strong>960 grid</strong> system. In which by calling the right <strong>classes</strong> you can magically create any columns you want that suites your layout.</p><p>What I like in Skeleton Boilerplate</p><ul><li><strong>It’s Responsive</strong>: We know that websites now a days is aiming for a fluid/responsive layout. So that viewers can view it nicely from a bigger screensize down to mobile.</li><li><strong>Fast to Start</strong>: Skeleton Boilerplate provide us the files that we need for faster developing. We will not be woried about starter layout because it’s already there and well-structured and also it provide basic styling for form elements, typography, and more.</li><li><strong>Ready set Grid</strong>: What I like the most is the <a href="http://www.getskeleton.com/#grid" target="_blank" title="Grid">Grid</a> by just calling the right class it will do the magic for you.</li></ul><h2>Step 1: Preparation</h2><p></p><ul><li>Open up the PSD File in Photoshop.</li><li>Your favorite code editor. If you ask me, what’s mine? I’m using <a href="http://inotai.com/intype/download/" target="_blank">Intype</a>.</li><li>Lastly, open up a web browser to test our layout.</li></ul><h2>Step 2: Getting Files Ready</h2><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-9.jpg" /></p><p>Since we are using Skeleton Boilerplate, the images directory is already prepared at <strong>/images</strong> <strong>/stylesheets</strong> for the CSS stylesheets. All you need to create is a <strong>/js</strong> directory for our JavaScript and <strong>/fonts</strong> directory for our fonts to be used.</p><p>I will leave it up to you to import the images to be used, like the social icons and background patterns. Or if you are really excited to start, just download the provided files in the resource folder.</p><h2>Step 3: Simple Starter Layout</h2><p>To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.</p><p>Pay attention to the naming of <em>id</em> or <em>class</em> in every screenshot, these will be the names we will use when we markup the HTML.</p><h4>Header Section</h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-2.jpg" /></p><ul><li>The header is divided into 2 sections: the first section is for the <strong>logo</strong> and <strong>navigation</strong>, the other section is for the <strong>slideshow</strong>. These two sections are wrapped with a full width because of the repeating pattern that starts from the very top to way down to the slider section.</li><li>For the grayish background with the pattern we will be applying that to our body tag.</li></ul><h4>Welcome Section</h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-3.jpg" /></p><ul><li>Nothing too fancy here, we can see a big <strong>h1</strong> text with a graphic.</li></ul><h4>Service Section</h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-4.jpg" /></p><ul><li>In this section we can see a <em>3 column</em> layout that contains <em>heading title</em>, <em>content text</em>, and a <em>read more</em> button.</li></ul><h4>Recent Projects Section</h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-5.jpg" /></p><ul><li>In this section there are <em>3 images</em> showcasing what we have done. But it’s kinda boring if we leave it that way right? How about we turn it into a carousel where we can navigate left and right? Sound great doesn’t it? I’m going show you how later on using a great jQuery plugin by Codrops.</li></ul><h4>Testimonial Section</h4><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-6.jpg" /></p><ul><li>In this section we can see a <em>thumbnail</em> photo, a <em>blockquote</em> that contain the <em>testimonial text</em>, <em>name</em> and a <em>link</em> to a website.</li></ul><h4>Footer Section</h4><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-7-update.jpg" /></p><ul><li>In this section there are 2 rows, first is for the <strong>widgets</strong> that contains a <em>3 column</em> layout which is for <strong>about</strong>, <strong>blog</strong> and <strong>twitter feed</strong>. The second row will be for the <strong>copyright</strong> text and <strong>logo</strong>.</li></ul><p>Here is the image of the overall markup that we have done.</p><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-1-update.jpg" /></p><p>Now, based on these notes we create the following HTML layout.</p><pre class="brush: xml; title: ; notranslate"> <div class="wrap-header"> <div class="container">Logo & Navigation content goes here</div> <div class="container slides">Slideshow content goes here</div> </div><!-- end wrap-header --> <div class="container welcome"> Welcome content goes here </div><!-- end welcome --> <div class="container service"> Services content goes here </div><!-- end service --> <div class="container recent-projects"> Recent Project content goes here </div><!-- end recent-projects --> <div class="container testimonial"> Testimonial content goes here </div><!-- end testimonial --> <footer> <div class="container widgets"> Widgets content goes here </div><!-- end widgets --> </footer> <footer class="sub-footer"> Copyright content goes here </footer> </pre><p>Open up <strong>index.html</strong>, scroll down and you will find “Delete everything in this .container and get started on your own site!”, delete everything and copy and paste the code above.</p><p>By calling the <strong>container</strong> class in Skeleton Boilerplate this will center the <strong>div</strong> and have a width of <strong>960px</strong>. So in our markup you’ll notice we added a class of <strong>container</strong> in every section, except to the <strong>wrapping div</strong> that contains the full width.</p><p>Before we proceed let’s just style the font in the layout.</p><pre class="brush: css; title: ; notranslate"> @font-face{ font-family: 'Rokkitt'; src: url('/fonts/Rokkitt/Rokkitt-Regular.ttf') format('truetype'); } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }body{ font-family: Helvetica, Arial, Sans-serif; background: #e3e3e3 url(/images/body-bg.jpg); } a, a:visited { color: #67b256; text-decoration: none; outline: 0; } a:hover, a:focus { text-decoration: underline; } p{ font-size: 14px; color: #3b464b; } h1{ font-size: 30px; font-family: 'Rokkitt', serif; color: #23353e; } h2{ font-size: 22px; font-family: 'Rokkitt', serif; color: #23353e; } </pre><ul><li>In the above CSS, we just declared our own font which is placed in <strong>/fonts</strong>, <strong>/Rokkit</strong> directory. If you check the PSD file it has a different font, so we just replaced it with a font that is available in Google fonts.</li></ul><ul><li>Next, we target <strong>*</strong> all elements and styled using new CSS3 <strong>box-sizing</strong> to <strong>border-box</strong>, what this allows you to add a border to a 20px by 20px <strong>div</strong> and the size will remain 20px by 20px.</li></ul><ul><li>For our body we added a repeated background and set our font.</li></ul><ul><li>Then we styled <strong>a</strong>, <strong>p</strong>, <strong>h1 h2</strong> according to its styles.</li></ul><h2>Step 4: Working on Header Section</h2><p><img alt="" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-8.jpg" /></p><p>Now let’s add the content inside the first <strong>container</strong> div, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <h1 class="logo"><a title="Artthatworks" href="#">Artthatworks</a></h1> <nav class="primary"> <ul> <li><a class="active" href="#">home</a> /</li> <li><a href="#">portfolio</a> /</li> <li><a href="#">blog</a> /</li> <li><a href="#">contact</a></li> </ul> </nav> </pre><ul><li>In the above HTML, we just added the logo by wrapping it in a <strong>h1</strong> tag with an <strong>a</strong> tag inside it, we also give the <strong>h1</strong> tag a class of <strong>logo</strong>.</li></ul><ul><li>Next we used an HTML 5 tag <strong>nav</strong> and give it a class of <strong>primary</strong>. Inside the <strong>nav</strong> we create an unordered list <strong>ul</strong> which contains our navigation links.</li></ul><p>Open up the <strong>/stylesheets</strong> directory and open up <strong>layout.css</strong>, this is where we will place our CSS styles. Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> h1.logo a{ display: block; width: 183px; height: 32px; background: url(/images/logo.png) no-repeat; float: left; /* Nicolas Gallagher Image replacement technique */ font: 0/0 a; text-shadow: none; color: transparent; } /* NAVIGATION */ nav.primary{ float: right; } nav.primary ul{ float: right; margin-top: 5px; } nav.primary ul li{ float: left; margin-left: 20px; color: #67b256; } nav.primary ul li a{ display: inline-block; padding-right: 20px; text-decoration: none; font-family: 'Rokkitt', serif; font-size: 19px; font-weight: 600; color: #67b256; text-shadow: 0 1px 0 #090d0f; } nav.primary ul li:last-child a{ padding: 0; } nav.primary ul li a.active{ color: #fff; } nav.primary ul li a:hover{ color: #fff; } </pre><ul><li>In the above CSS, we styled the logo by displaying it to block, giving it a fixed width and height, adding a background image, floating it right and lastly a new way of hiding a text by Nicolas Gallagher.</li></ul><ul><li>Next we styled the navigation by floating it left. Then, we floated the <strong>ul</strong> element to the right and gave it a top margin to align it properly with the logo. All <strong>li</strong> elements are floated to the left, with a 20px left margin and we changed the colour to green. The <strong>a</strong> inside <strong>li</strong> tags is displayed as inline-block, this will help not to push down the <strong>/</strong> we added after the <strong>a</strong> tag, then we included a 20px padding to the right to equally centre the links from each dividers, then lastly we styled the font. For the last child <strong>li</strong> elements we zero out the padding, then we gave the same color for active and hover.</li></ul><p>Now let’s add the content inside the <strong>slides</strong> element, here’s the HTML Markup base on ResponsiveSlides documentation.</p><pre class="brush: xml; title: ; notranslate"> <ul class="rslides clearfix"> <li> <img src="images/slide-1.jpg" alt="" /> <p class="desc">Description goes here 1</p> </li> <li> <img src="images/slide-1.jpg" alt="" /> <p class="desc">Another Description goes here 2</p> </li> <li> <img src="images/slide-1.jpg" alt="" /> <p class="desc">Last Description goes here 3</p> </li> </ul> <h2>Featured Project</h2> </pre><ul><li>In the above HTML, basically we just followed the HTML Markup and added another tag for our description which is <strong><p></strong> with a class of <strong>desc</strong> and added a <strong>clearfix</strong> class to <strong>ul</strong>. What clearfix does is deal with the floated elements. Without it, parent containers of the elements might have a broken height.</li></ul><p>Now let’s add first the required <strong>CSS ResponsiveSlides</strong></p><pre class="brush: css; title: ; notranslate"> /* rslides styles */ .rslides { position: relative; list-style: none; width: 100%; padding: 0; margin: 0 0 20px 0; } .rslides li { position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } </pre><p>Now let’s add our own CSS styles as follows:</p><pre class="brush: css; title: ; notranslate"> .slides{ position: relative; margin-top: 30px; } .slides h2{ display: inline-block; padding-right: 30px; border-right: 1px solid #9b9b9b; } .desc{ display: inline-block; margin: 0; position: absolute; bottom: -62px; left: 210px; } .rslides li img{ border: 5px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } a.prev{ position: absolute; right: 130px; display: block; width: 13px; height: 22px; background: url(/images/prev-next.png) no-repeat; background-position: top left; /* Nicolas Gallagher Image replacement technique */ font: 0/0 a; text-shadow: none; color: transparent; } a.prev:hover{ background-position: bottom left; } a.next{ position: absolute; right: 0; display: block; width: 13px; height: 22px; background: url(/images/prev-next.png) no-repeat; background-position: top right; /* Nicolas Gallagher Image replacement technique */ font: 0/0 a; text-shadow: none; color: transparent; } a.next:hover{ background-position: bottom right; } ul.rslides_tabs{ position: absolute; right: 20px; } ul.rslides_tabs li{ float: left; margin-right: 10px; } ul.rslides_tabs li a{ display: block; background: url(/images/pagination.png) no-repeat; background-position: top; width: 20px; height: 21px; /* Nicolas Gallagher Image replacement technique */ font: 0/0 a; text-shadow: none; color: transparent; } ul.rslides_tabs li.rslides_here a, ul.rslides_tabs li a:hover{ background-position: bottom; } </pre><ul><li>In the above CSS, first we made the parent element’s position <strong>relative.</strong> By doing this we set it to <strong>absolute</strong> along with the child elements based on the parent element width and height. Also we give it a top margin to align it base on the PSD layout.</li><li>Style the <strong>h2</strong> by displaying it to <strong>inline-block</strong>, add padding-right and a 1px right-border.</li><li>Next is the description we displayed as inline-block, zero out its margin, position it absolutely the same on the PSD.</li><li>Next is the slide <strong>img,</strong> we style it by adding a 5px white border. In our design we have that bottom shadow left and right, we will change that by adding a box-shadow.</li><li>Next we style the auto generated classes done by the JavaScript which is the <strong>.prev</strong> for previous and <strong>.next</strong> for next. What we did was to position it absolutely to our desired position, displayed it as a block element, gave it a fixed width and height, and positioned the background based on the image sprite. The same thing with the <strong>rslides_tabs</strong> the only thing different is we floated the <strong>li</strong> elements and give it a 10px right margin.</li></ul><p>Now to make the slider functional, copy and paste the <strong>responsiveslides.min.js</strong> to <strong>/js</strong> directory then copy and paste the script below and paste it before the closing of the <strong>body</strong> tag.</p><pre class="brush: xml; title: ; notranslate"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/responsiveslides.min.js"></script> <script> $(function () { $(".rslides").responsiveSlides({ pager: true, nav: true }); }); </script> </pre><h2>Step 5: Working on Welcome Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-10.jpg" /></p><p>Now let’s add the content inside the<strong> welcome</strong> div, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <h1> Hi! Im <span class="green">Michael Burns</span> a graphic / web designer </br> based in Philippines. </h1> <span class="graphic"> <img src="images/graphic.png" alt="" /> </span> </pre><ul><li>We wrapped our welcome text with an <strong>h1</strong> tag and added a <strong>span</strong> with a class of <strong>green</strong> to target the name and change the colour later on with CSS. When we take a look at the welcome section there is a graphic on the bottom so we mark up our HTML by adding a <strong>span</strong> with a class of <strong>graphic</strong> so that later on we can position the image absolutely.</li></ul><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> .welcome{ position: relative; padding: 15px 0; border: 1px dashed #9b9b9b; border-right: none; border-left: none; margin: 40px auto; } .welcome h1{ text-align: center; } .green{ color: #67b256; } .welcome .graphic img{ position: absolute; margin: 0 auto; left: 0; right: 0; bottom: -7px; } </pre><ul><li>First we needed to position the parent container which is the <strong>.welcome div</strong> to relative, added a 15px padding top and bottom, a dashed border on top and bottom, zero on left and right.</li><li>Next we centered h1, added a colour to .green class.</li><li>Next we position the graphic image absolutely to make it centered by adding a margin zero auto, left, right zero, and pushed it down a bit by adding -7px bottom.</li><li>Lastly we added a margin top and bottom to bump it down from the slider section.</li></ul><h2>Step 6: Working on Service Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-11.jpg" /></p><p>Now let’s add the content inside <strong>.service</strong> div, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <div class="one-third column"> <h2>Web Design</h3> <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p> <a href="#" class="more">read more</a> </div> <div class="one-third column"> <h2>Graphic Design</h3> <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p> <a href="#" class="more">read more</a> </div> <div class="one-third column"> <h2>Other Services</h3> <p>Suspendisse fringilla hendrerit molestie. Duis bibendum tellus at ligula ornare a cursus enim lacinia. Aliquam erat volutpat. Nam consectetur, erat placerat pharetra consequat, eros lorem facilisis arcu, eget convallis elit turpis ac lacus. Quisque a nisi quis.</p> <a href="#" class="more">read more</a> </div> </pre><ul><li>We just divided it into 3 columns by adding a class <strong>one-third column</strong> on each div. Then inside of it we added a heading <strong>h2</strong> for our heading title, a <strong>p</strong> for its content and a link <strong>a</strong> with a class of <strong>more</strong>.</li></ul><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> a.more{ display: inline-block; padding: 5px 15px; background: #67b256; border: 1px solid #539544; border-top: 1px solid #93cc84; box-shadow: 0 -1px 0 #539544; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-decoration: none; color: #fff; text-shadow: 0 -1px 0 #539544; } a.more:hover{ background: #6ebd5c; } .service{ margin: 20px auto; } </pre><ul><li>Since we have already formatted our paragraphs and headings, the only thing we need to style now is the read more button. First we displayed it as an inline-block, gave it padding, then followed by the background, border, box-shadow, border-radius, colour, text-shadow. Lastly, we gave a 20px margin to our parent container to give it a cool space from top and bottom.</li></ul><h2>Step 7: Working on Recent Projects Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-12.jpg" /></p><p>Now let’s add the content inside <strong>.recent-projects</strong> div, here’s the HTML. This HTML mark up is based on the Elastislide by Codrops that I provided in the resources.</p><pre class="brush: xml; title: ; notranslate"> <h2>My Current Pojects</h2> <div id="carousel" class="es-carousel-wrapper"> <div class="es-carousel"> <ul> <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/project-1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/project-2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/project-3.jpg" alt="" /></a></li> </ul> </div> </div> </pre><p>Now let’s add the CSS as follows: This CSS is a straight copy paste from Elastislide CSS styles so copy and paste it to our <strong>layout.css</strong>.</p><pre class="brush: css; title: ; notranslate"> .recent-projects{ margin: 40px auto; } /* Elastislide Style */ .es-carousel-wrapper{ padding:10px 37px; position:relative; } .es-carousel{ overflow:hidden; } .es-carousel ul{ display:none; } .es-carousel ul li{ height:100%; float:left; display:block; } .es-carousel ul li a{ display:block; margin: 0 10px; } .es-carousel ul li a img{ display:block; border: 5px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); max-height:100%; max-width:100%; } .es-nav span{ position:absolute; top:50%; left:0; background:transparent url(/images/prev-next.png) top left no-repeat; width: 13px; height: 22px; margin-top:-13px; text-indent:-9000px; cursor:pointer; } .es-nav span.es-nav-next{ right: 0; left:auto; background-position:top right; } .es-nav span:hover{ background-position: bottom left; } .es-nav span.es-nav-next:hover{ background-position: bottom right; } </pre><ul><li>We tweaked the CSS to make it fit to our design, removed the background of the <strong>.es-carousel-wrapper</strong> and <strong>.es-carousel</strong> div’s. Then added a styling to the image by giving it a 5px stroke and box-shadow. Lastly, tweaked the prev and next as we did previously in our slider section.</li></ul><p>We need to copy and paste <strong>jquery.easing.1.3.js</strong> and <strong>jquery.elastislide.js</strong> in our <strong>/js</strong> directory. Now to make it work we need to add the script below our <strong>.rslides</strong> script.</p><pre class="brush: xml; title: ; notranslate"> $('#carousel').elastislide({ imageW : 300, //width of the image minItems : 3 //item shown }); </pre><h2>Step 8: Working on Testimonial Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-13.jpg" /></p><p>Now let’s add the content inside <strong>.testimonial</strong> div, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <img src="images/me.jpg" alt=""/> <blockquote> <p>In hac habitasse platea dictumst. Donec sodales elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl, molestie ullamcorper sapien accumsan quis. Quisque velit risus, ullamcorper non tempor id, venenatis quis metus. </p> <cite><strong>Michael Burns</strong></cite> <a href="#" target="_blank">www.burnstudios.deviantart.com</a> </blockquote> </pre><ul><li>In the above HTML, first we added that thumbnail image, since it is a quote we will use a blockqoute tag where inside is a paragraph for the testimonial text itself, a cite for the author and a link for the site link.</li></ul><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> .testimonial{ margin: 40px auto; padding: 0 50px; } .testimonial img{ float: left; margin-right: 35px; border: 5px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } blockquote{ background: url(/images/quote.png) no-repeat; overflow: hidden; border: none; } blockquote p{ font-size: 14px; padding-left: 30px; font-style: normal; } blockquote a{ display: block; text-align: right; font-size: 12px; font-style: italic; } cite{ text-align: right; font-style: normal; color: #23353e; } </pre><ul><li>First we styled the testimonial container by padding 50px left and right, also we give it some breathing room 40px on top and bottom.</li><li>Next we styled the image the same as the image in recent projects.</li><li>Next we styled the blockquote by adding a quote image, overflow to hidden so that if a testimonial/text is too long the text will not flow below the thumbnail image, then removing the left border since by default it has a border left styling. Followed by basic styling and alignment for <strong>p</strong>, <strong>cite</strong> and <strong>a</strong>.</li></ul><h2>Step 10: Working on Widgets Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-14.jpg" /></p><p>Now let’s add the content inside <strong>.widgets</strong> div, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <div class="one-third column about"> <h2>About Me</h2> <img src="images/me-large.png" alt="" class="thumb"/> <div> <p>In hac habitasse platea dictumst. Donec sodales, elit sed orci consectetur mollis. Cras eget erat tellus, eu elementum felis. Morbi tincidunt varius nisl. </p> <ul> <li><a href="#" target="_blank"><img src="images/facebook.png" alt="" /></a></li> <li><a href="#" target="_blank"><img src="images/twitter.png" alt="" /></a></li> <li><a href="#" target="_blank"><img src="images/rss.png" alt="" /></a></li> </ul> </div> </div><!-- end about --> <div class="one-third column blog"> <h2>Latest News</h2> <ul> <li> <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p> <small>10.11.11 - Web Design</small> </li> <li> <p>Project design for donec laoreet dictum arcu, quis scelerisque turpis placerat varius</p> <small>10.11.11 - Web Design</small> </li> </ul> <a class="dark-more">view more</a> </div><!-- end blog --> <div class="one-third column tweet"> <h2>Latest Tweets</h2> <ul> <li> <p>AT&T Announces Five New Android Smartphones - <a href="#">http://on.mash.to/oCgEWK</a></p> <small>1 min ago</small> </li> <li> <p>Twitter will soon reformat all links with t.co regardless of length - <a href="#">http://on.mash.to/qUTLCe</a></p> <small>about 1 hour ago</small> </li> </ul> <a class="dark-more">@_burnstudio</a> </div><!-- end tweet --> </pre><ul><li>We marked up our HTML by adding 3 divs with a class of <strong>one-third column</strong> to make it 3 columns and on each div we added another class <strong>about</strong>, <strong>blog</strong> and <strong>tweet</strong> this class will help us to target the inside elements when we are styling.</li><li>On the <strong>about div</strong> we added an <strong>h2</strong> tag for our heading, an image, then a div with a paragraph inside it and an unordered list for our social icons.</li><li>For <strong>blog</strong> and <strong>tweet</strong> we added a heading also followed a unordered list that contains the content which is paragraph and small tag, lastly a button with a class of <strong>dark-more</strong>.</li></ul><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> footer{ background: url(/images/noise.jpg) 0 0; /* IE Fallback Background */ background: url(/images/triangle-top.png) 0 0 repeat-x, url(/images/noise.jpg) 0 0; padding: 30px 0 30px 0; } footer h2{ color: #fff; text-shadow: 0 1px 0 #111a1f; } .about img.thumb{ float: left; margin-right: 20px; } .about div{ overflow: hidden; } .about p{ color: #a4afb4; font-size: 13px; text-shadow: 0 1px 0 #111a1f; } .about ul li{ float: left; margin-right: 10px; } .blog ul li, .tweet ul li{ margin: 0; border-bottom: 1px dashed #0f161a; border-top: 1px dashed #37515e; padding: 15px 0; } .blog p, .tweet p{ color: #a4afb4; font-size: 13px; text-shadow: 0 1px 0 #111a1f; margin-bottom: 10px; } .blog small, .tweet small{ color: #667983; text-shadow: 0 1px 0 #111a1f; } .blog ul li:first-child, .tweet ul li:first-child{ border-top: none; padding-top: 0; } .blog ul li:last-child, .tweet ul li:last-child{ border-bottom: none; padding-bottom: 0; } a.dark-more{ display: inline-block; padding: 5px 15px; background: #286065; border: 1px solid #0f161a; border-top: 1px solid #558d91; box-shadow: 0 -1px 0 #0f161a; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-decoration: none; color: #fff; text-shadow: 0 -1px 0 #0f161a; } a.dark-more:hover{ background: #2d6b71; } </pre><ul><li>We styled the footer tag by giving it a background. Notice that I added multiple backgrounds, first is an IE6 Fallback since IE doesn’t recognize multiple backgrounds in a stacking order, followed by the two background <strong>triangle-top.jpg</strong> and <strong>noise.jpg</strong>. We also gave it top and bottom padding.</li><li>Next we target the <strong>h2</strong> elements by changing the colour and adding text-shadow.</li><li>In the <strong>about</strong> column, first we styled the image by floating it to the left and add a margin right 20px, styled the <strong>.about</strong> div by changing the overflow to hidden. I’m sure you already know what the purpose of this is since I explained it in the testimonial section. Next we styled the paragraph follow by the social icons by floating the list elements left and give it a 10px right margin.</li><li>For the <strong>blog</strong> and <strong>tweet</strong> they have the same styling, first we styled the list elements by 0 out the margin, added a dark top border and light bottom border, and gave it a 15px breathing room top and bottom. Next we styled the paragraph with a basic styling and a margin bottom. Next we styled the small tag by giving it a lighter color and a text shadow. Next we targetted the first-child element by removing the top padding and the top border, the same with the last-child but this time instead of top change it to bottom. Lastly, we styled the dark-more by just copying the same styles we did in <strong>more</strong> button but this time let’s change the colour the same on the PSD layout.</li></ul><h2>Step 11: Working on Footer Section</h2><p><img alt="" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/convert-artthatworks-img-15.jpg" /></p><p>Now let’s add the content inside <strong>.sub-footer</strong> tag, here’s the HTML.</p><pre class="brush: xml; title: ; notranslate"> <div class="container"> <div class="eight columns left"> <p>Copyright 2010 <a href="#">1stwebdesigner</a> | Design by <a href="#">Michael Burns</a></p> </div> <div class="eight columns right"> <h1 class="logo"><a href="#" title="Artthatworks">Artthatworks</a></h1> </div> </div> </pre><ul><li>In above HTML, we marked it up by adding 2 divs with a class of <strong>eight columns</strong> to make it 2 columns and in each div we added another class <strong>left</strong> and <strong>right</strong>.</li><li><strong>right</strong> class contains the copyright text, left class contains the logo.</li></ul><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> footer.sub-footer{ background: #1a272e; border-top: 1px solid #34454d; } footer .left p{ color: #fff; font-size: 12px; margin: 0; } footer .left a{ color: #67b256; text-decoration: none; font-size: 12px; } footer .left a:hover{ text-decoration: underline; } footer .right .logo{ float: right; } </pre><ul><li>In above CSS, we styled the .sub-footer container by adding a background and a border top. Then we changed the colour of the left paragraph and the link. Lastly, we floated the logo to right.</li></ul><p>Now everything looks good, the same as our PSD layout.</p><h2>Step 12: Working on Media Queries Section</h2><p>When you try resizing the browser, it’s responsive, but there are some elements that are not good to look at in different viewports, especially the slider. So what we are going to do is to fix it by changing some styling in media queries.</p><p>Now let’s add the CSS as follows:</p><pre class="brush: css; title: ; notranslate"> /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .about img.thumb{ display: none; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { nav.primary{ float: left; margin-top: 30px; } nav.primary ul li:first-child{ margin-left: 0; } .slides h2{ padding: 0; border: none; } .slides .desc{ display: none; } .testimonial img{ display: none; } .one-third.column{ margin: 20px 0; } .left p{ text-align: center; } footer .right .logo{ display: none; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { nav.primary ul li:last-child{ margin-left: 0; } } </pre><ul><li>In the above CSS, we removed the image in about widgets in Tablet Portrait size to standard 960.</li><li>Next thing to handle is all mobile sizes. First we floated the navigation to the left because by default it is floated to the right, then we removed the left margin of the list item first-child element. Next in the slideshow section we removed the padding and border of the heading, then we removed the description by changing the display to none. On the testimonial section we removed the thumbnail image by changing the display to none. Notice we have 3 columns in service section and on widget section and it is not spaced very well on top and bottom so we added a 20px margin on top and bottom. Next on footer section we centre the copyright text and hide the logo by changing the display again to none.</li><li>In mobile portrait size to mobile landscape size, if you look at the navigation the last list element is pushed below and 20px form the right so we are going to remove the left margin by changing it to zero.</li></ul><h2>Finally We’re Done!</h2><p>We just finished our responsive layout using the Skeleton Boilerplate. How was it? I hope you learned something in this tutorial. Feel free to drop your thoughts below, or if you have some suggestions, techniques or other boilerplate recommendations.</p><p>Oh and if you want to learn how to create this design in Photoshop in the first place, check our previous <a href="http://www.1stwebdesigner.com/tutorials/photoshop-tutorial-beautiful-portfolio-artthatworks/" target="_blank">PSD tutorial</a> to this very design!</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=ORYTcxeOVHk:fMsZoo8twQw:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=ORYTcxeOVHk:fMsZoo8twQw:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=ORYTcxeOVHk:fMsZoo8twQw:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=ORYTcxeOVHk:fMsZoo8twQw:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/ORYTcxeOVHk" width="1" />

<blockquote><p>Hey James, this week I am working on the most exciting project ever - I am designing a new website for one of the most popular radio stations.</p></blockquote><p>That was the last time I heard anything from my friend.</p><p>Now he is spending a big chunk of his time going through a lot of legal actions and a local lawyer has become his best mate.</p><p>Well, all just because my friend has been sued by a huge web design and development agency.</p><p><span id="more-77666"></span></p><p><em>Image by <a href=" <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=miTVe7aAKlw:z8h_HCHzZGE:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=miTVe7aAKlw:z8h_HCHzZGE:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=miTVe7aAKlw:z8h_HCHzZGE:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=miTVe7aAKlw:z8h_HCHzZGE:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/miTVe7aAKlw" width="1" />

<p>Looking for free HTML/CSS templates that you can use to practice your skills or to convert a WordPress theme? You came to the right place! In this roundup, we have gathered 45 CSS templates from 2011 to present. We know that not everyone has the time to design and code, but there is definitely a growing need for visually appealing templates. How about we expedite the process?</p><p>Visually appealing designs? Check!</p><p>Free and fresh templates? Check!</p><p>What are you waiting for? Read on!</p><p><span id="more-77478"></span></p><h2>What Can HTML/CSS Templates Do?</h2><p>For starters, CSS templates are a thing of beauty, especially when they’re free, since developers can actually make use of them without having the need to find a designer, or design one. There are a lot of developers out there who do not have the time to design, which applies to designers as well who do not have the time to code their Photoshop files.</p><p>It goes like this:</p><ol><li>Design is made using Photoshop (or other <a href="http://www.1stwebdesigner.com/design/online-photoshop-alternatives-photo-editing/">Photoshop Alternatives</a>)</li><li>File is converted to HTML/CSS</li><li>Developer converts HTML/CSS template into a fully-functional and feature-loaded website</li></ol><p>If you are in a hurry and you don’t want to spend a lot of time on the design or code, then you’re in great luck with these CSS templates from 2011 and 2012!</p><p>In the market, things like these cost several hundreds of dollars, so we’re not only helping you save time researching, we’re also actually helping you save money!</p><h2>Want to Learn How to Build One?</h2><p>There are a lot of free PSD templates on the web that you can download and try to convert, here is an in-depth PSD template tutorial with its follow-up HTML/CSS conversion.</p><ul><li><a href="http://www.1stwebdesigner.com/tutorials/stylish-design-agency-landing-page-photoshop-tutorial/">Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop</a></li><li><a href="http://www.1stwebdesigner.com/wordpress/psd-to-html-tutorial-code-photoshop/">PSD to HTML Tutorial: Code a Photoshop File to a Working Website</a></li></ul><p><a href="http://1stwebdesigner.com/demos/burnstudio/"><img alt="" class="alignnone size-full wp-image-77480" height="341" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/burnstudio.jpg" title="burnstudio" width="550" /></a></p><p>Click the image above for the demo.</p><h4>Making things Responsive</h4><p>All of the items listed below aren’t responsive, they’re free, so we can’t expect too much. But you know what? It is more fun this way because you can try to convert one or two into a responsive website.</p><p>We have a guide that is applicable for everything below, all you need to have is patience and passion!</p><p><a href="http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/">Media Queries Tutorial – Convert Burnstudio into a Responsive Website</a></p><p>Just apply what you have learned from the linked tutorial above and you’ll soon be on the road to becoming a web rockstar!</p><p>So, are you ready?</p><h3>1. Beauty Class</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/1-BeautyClass.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_353_beauty_class/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_353_beauty_class">Download</a></p><h3>2. Good-natured</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/2-GoodNatured.jpg" /></p><p><a href="http://www.freecsstemplates.org/download/zip/goodnatured/">Demo</a> | <a href="http://www.freecsstemplates.org/download/zip/goodnatured/">Download</a></p><h3>3. Rock Castle</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/3-RockCastle.jpg" /></p><p><a href="http://www.freecsstemplates.org/preview/rockcastle/">Demo</a> | <a href="http://www.freecsstemplates.org/download/zip/rockcastle/">Download</a></p><h3>4. Wood Working</h3><p><img alt="" border="0" height="416" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/4-Wood_Working.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.freecsstemplates.org/preview/woodworking/">Demo</a> | <a href="http://www.freecsstemplates.org/download/zip/woodworking/">Download</a></p><h3>5. Designa</h3><p><img alt="" border="0" height="383" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/4-Designa.jpg" style="border: 0px;" width="550" /></p><p><a href="http://sylvainlafitte.com/dev/test/designa/index.html">Demo</a> | <a href="https://dl.dropbox.com/u/26207476/Designa.zip">Download</a></p><h3>6. Folder</h3><p><img alt="" border="0" height="459" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/6-Folder.jpg" style="border: 0px;" width="550" /></p><p><a href="http://luiszuno.com/themes/folder/">Demo</a> | <a href="http://luiszuno.com/blog/downloads/folder-template/">Download</a></p><h3>7. BookStore</h3><p><img alt="" border="0" height="415" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/7-BookStore.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_360_bookstore/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_360_bookstore" target="_blank">Download</a></p><h3>8. Carousel</h3><p><img alt="" border="0" height="408" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/8-Carousel.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_358_carousel/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_358_carousel" target="_blank">Download</a></p><h3>9. Sailing</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/9-Sailing.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_322_sailing/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_321_glossy_box" target="_blank">Download</a></p><h3>10. Glossy Box</h3><p><img alt="" border="0" height="430" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/10-GlossyBox.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_321_glossy_box/">Demo</a> | <a href="http://www.templatemo.com/download/templatemo_321_glossy_box">Download</a></p><h3>11. Liquid</h3><p><img alt="" border="0" height="458" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/11-Liquid.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_293_liquid/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_293_liquid" target="_blank">Download</a></p><h3>12. Musical Instruments</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/12-MusicalInstruments.jpg" /></p><p><a href="http://csscreme.com/freetemplates/musical_instruments/">Demo</a> | <a href="http://csscreme.com/tpsaveas.php?tp=musical_instruments.zip">Download</a></p><h3>13. Darkside</h3><p><img alt="" border="0" height="382" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/13-DarkSide.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.nuviotemplates.com/preview.php?template=darkside-03">Demo</a> | <a href="http://www.nuviotemplates.com/download.php?id=63">Download</a></p><h3>14. Medical Clinic</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/14-Medical_Clinic.jpg" /></p><p><a href="http://csstemplatesmarket.com/freecsstemplates/medical_clinic/index.html">Demo</a> | <a href="http://csstemplatesmarket.com/tpsaveas.php?tp=medical_clinic.zip">Download</a></p><h3>15. Erasure</h3><p><img alt="" border="0" height="428" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/15-Erasure.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.freecsstemplates.org/preview/erasure/">Demo</a> | <a href="http://www.freecsstemplates.org/download/zip/erasure/">Download</a></p><h3>16. BeSmart</h3><p><img alt="" border="0" height="345" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/16-BeSmart.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.free-css.com/assets/files/free-css-templates/preview/page132/besmart/">Demo</a> | <a href="http://www.free-css.com/free-css-templates/page132/besmart" target="_blank">Download</a></p><h3>17. Free Software</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/17-FreeSoftware.jpg" /></p><p><a href="http://csstemplatesmarket.com/freecsstemplates/h_free_software/index.html">Demo</a> | <a href="http://csstemplatesmarket.com/tpsaveas.php?tp=h_free_software.zip">Download</a></p><h3>18. Buzz</h3><p><img alt="" border="0" height="408" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/18-BUZZ.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.free-css.com/assets/files/free-css-templates/preview/page132/buzz/">Demo</a> | <a href="http://www.free-css.com/free-css-templates/page132/buzz" target="_blank">Download</a></p><h3>19. Mini Two</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/19-MiniTwo.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_345_mini_two/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_345_mini_two" target="_blank">Download</a></p><h3>20. Accordion</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/20-Accordion.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_346_accordion/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_346_accordion" target="_blank">Download</a></p><h3>21. Graphite</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/21-Graphite.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_339_graphite/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_339_graphite" target="_blank">Download</a></p><h3>22. Blue Urban</h3><p><img alt="" border="0" height="390" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/22-BlueUrban.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_329_blue_urban/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_329_blue_urban" target="_blank">Download</a></p><h3>23. Briefcase</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/23-Briefcase.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_325_briefcase/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_325_briefcase" target="_blank">Download</a></p><h3>24. Golden Star</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/24-GoldenStar.jpg" /></p><p><a href="http://www.templatemo.com/templates/templatemo_305_golden_star/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_305_golden_star" target="_blank">Download</a></p><h3>25. Light Gray</h3><p><img alt="" border="0" height="431" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/25-LightGray.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.templatemo.com/templates/templatemo_304_light_gray/">Demo</a> | <a href="http://www.templatemo.com/preview/templatemo_304_light_gray" target="_blank">Download</a></p><h3>26. Zoo</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/26-Zoo.jpg" /></p><p><a href="http://www.freewebsitetemplates.com/preview/zootemplate/">Demo</a> | <a href="http://www.freewebsitetemplates.com/download/zootemplate/">Download</a></p><h3>27. Dark Pro</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/27-DarkPro.jpg" /></p><p><a href="http://www.free-css.com/assets/files/free-css-templates/preview/page130/dark-pro/">Demo</a> | <a href="http://www.free-css.com/free-css-templates/page130/dark-pro" target="_blank">Download</a></p><h3>28. Calliope</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/28-Calliope.jpg" /></p><p><a href="http://www.free-css.com/assets/files/free-css-templates/preview/page131/calliope/">Demo</a> | <a href="http://www.free-css.com/free-css-templates/page131/calliope" target="_blank">Download</a></p><h3>29. Xtreme</h3><p><img alt="" border="0" height="497" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/29-Xtreme.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.free-css.com/assets/files/free-css-templates/preview/page130/xtreme/">Demo</a> | <a href="http://www.free-css.com/free-css-templates/page130/xtreme" target="_blank">Download</a></p><h3>30. Halcyonic</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/30-Halcyonic.jpg" /></p><p><a href="http://templated.org/freecsstemplates/halcyonic-4332924433324311/demo-f9a21da1d8a4b6ca0c9752f3fac72de2907ba1722c198af114fa29b3f4a2ca9e50833ddc4a231a4e68d7bf071635e54a650f42db48ee8a5c66161300414e0406/">Demo</a> | <a href="http://templated.org/freecsstemplates/halcyonic-4332924433324311/dl-3b4f354c2b5a117d7a5952d12b9da3d799f0c0f6dc96c97f7c553abea04a21d938b043ae1baa47ac1e9f370c529694fd2cbc9e17f72066f43e51e6383650f4c0/">Download</a></p><h3>31. Stargazer</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/31-Stargazer.jpg" /></p><p><a href="http://templated.org/freecsstemplates/stargazer-6563164013324314/demo-f28ae413d8402435e4965ddbdb3d2662a89dcc09a06f26dc08f38425ddd2cd4735c6679868340edef3db0d5b501f397422ab0b38b95399b688e1c098b8c89061/">Demo</a> | <a href="http://templated.org/freecsstemplates/stargazer-6563164013324314/dl-00fb67947f72a5ed41aaa6ef3272b4895126f507a690e5dbd59610b119995f502a234b15cf0ab5566000e3962174a34793f8725e545a4feb34f5c0cc2e728937/">Download</a></p><h3>32. Indication</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/32-Indication.jpg" /></p><p><a href="http://templated.org/freecsstemplates/indication-8256045213324315/demo-44e6ac075ad4d1a6e36eb5c6708186e37c5765906c5ca31549a91cb1c9f84d8c835a162342673dfc02430b825bd484d2d198bdafceb71ed74f070f2a1816d5bc/">Demo</a> | <a href="http://templated.org/freecsstemplates/indication-8256045213324315/dl-c6bc432a595bcb81b55e33959012213c85f759809deda826d02f86e8223ca980d414085d0a870d9b08e2abd49e8be8c3cb67060db2365b2df0326a7101439f81/">Download</a></p><h3>33. Elegant Blue</h3><p><img alt="" border="0" height="349" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/33-ElegantBlue.jpg" style="border: 0px;" width="550" /></p><p><a href="http://templated.org/freecsstemplates/elegantblue-2683206313324317/demo-97fc37fafcbd116d405bd5e980948dfbc98e1d87a4695b0f44b23b97a762f25b895587b2ec806674f3a8528a9e58289567db2e2f1ae2c82b76a2563a68e9ae38/">Demo</a> | <a href="http://templated.org/freecsstemplates/elegantblue-2683206313324317/dl-d23cd8f6d156c7c576f1051508367c0c1b883c1125375f3160812070adac1a9ba939e347cb4266000a4a2c0734f6871a86534b091806cd59b135c9e4800a1a73/">Download</a></p><h3>34. Design Company</h3><h3><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/34-DesignCompany.jpg" /></h3><p><a href="http://www.freecss.in/free-template/preview/design_company">Demo</a> | <a href="http://www.freecss.in/free-template/download/design_company">Download</a></p><h3>35. Free Hosting</h3><p><img alt="" border="0" height="379" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/36-FreeHosting.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.freecss.in/free-template/preview/free_hosting">Demo</a> | <a href="http://www.freecss.in/free-template/download/free_hosting">Download</a></p><h3>36. Cardex</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/36-Cardex.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/cardex">Demo</a> | <a href="http://www.freecss.in/free-template/download/cardex">Download</a></p><h3>37. Under Construction</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/37-UnderConstruction.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/uder_construction">Demo </a>| <a href="http://www.freecss.in/free-template/download/uder_construction">Download</a></p><h3>38. Blog Design</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/38-Blog_Design.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/blog_design">Demo</a> | <a href="http://www.freecss.in/free-template/download/blog_design">Download</a></p><h3>39. Agro World</h3><p><img alt="" border="0" height="400" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/39-Agro_World.jpg" style="border: 0px;" width="550" /></p><p><a href="http://www.freecss.in/free-template/preview/agro_world">Demo</a> | <a href="http://www.freecss.in/free-template/download/agro_world">Download</a></p><h3>40. Wooden Wall</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/40-WoodenWall.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/woodenwall">Demo</a> | <a href="http://www.freecss.in/free-template/download/woodenwall">Download</a></p><h3>41. Sound Box</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/41-SoundBox.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/sound_box">Demo</a> | <a href="http://www.freecss.in/free-template/download/sound_box">Download</a></p><h3>42. Professional</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/42-Professional.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/professional">Demo</a> | <a href="http://www.freecss.in/free-template/download/professional">Download</a></p><h3>43. Fruit Art</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/43-FruitArt.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/fruit_art">Demo</a> | <a href="http://www.freecss.in/free-template/download/fruit_art">Download</a></p><h3>44. Design Team</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/44-DesignTeam.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/design_team">Demo</a> | <a href="http://www.freecss.in/free-template/download/design_team">Download</a></p><h3>45. Design Studio</h3><p><img alt="45 High-Quality Free HTML/CSS Templates from 2011 and 2012" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/45-DesignStudio.jpg" /></p><p><a href="http://www.freecss.in/free-template/preview/design_studio">Demo</a> | <a href="http://www.freecss.in/free-template/download/design_studio">Download</a></p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=56jzduTR4XE:SjzBSIJn4VM:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=56jzduTR4XE:SjzBSIJn4VM:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=56jzduTR4XE:SjzBSIJn4VM:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=56jzduTR4XE:SjzBSIJn4VM:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/56jzduTR4XE" width="1" />

<p>Sliders are a common component used in website design and for various purposes. We can create image, content, or video sliders using  jQuery. jQuery is the most popular JavaScript framework used for these sliders. A lot of jQuery sliders can be categorized based on the techniques used for sliding. The following are some common and trending techniques used by developers.</p><ul><li><strong>Layered Sliders</strong> - This is the latest addition to sliders with parallax effect.</li><li><strong>Fade In/Out Sliders</strong> - These types of sliders do not have controls. Content just fades away one by one.</li><li><strong>Banner Rotators</strong> - These sliders rotate in a circular path.</li></ul><p>There are many other types of techniques as well. Each type of slider is suited for a different purpose and location on your website. Hence the designer has to carefully choose sliders for different locations.</p><p><span id="more-76686"></span></p><p>Even on our personal sites we create sliders with large dimensions to show products, sliders for displaying our project portfolio and small sliders to display featured or popular posts on a blog. So there is every chance that we might include more than one slider in a website. In the next section I’ll explain why multiple sliders can be a real pain for a designer or developer.</p><h3 style="text-align: center;"><a href="http://www.innovativephp.com/demo/jquery-custom-slider-designs.zip" target="_blank">Zip File Download</a></h3><h2>Disadvantages of Using Multiple jQuery Sliders</h2><p>As I mentioned earlier, different sliders provides different effects and different layouts. Web designers will be prompted to include the slider with best effects for different locations. There are many drawbacks to using multiple different sliders on a single web page.</p><ul><li>Each slider will have a set of script and CSS files. Increasing the number of scripts and CSS files will slow your site loading time, which will affect SEO.</li><li>Different sliders may require different versions of jQuery. Hence jQuery files will be duplicated.</li><li>It’s possible to have conflicts in codes with other sliders.</li></ul><p>Considering the above points, it’s better to use one slider throughout your website. It’s possible to create different designs and features using the same slider. All you have to do is pick a flexible slider and have some knowledge of jQuery and CSS to customize it. I’ll be using Rhino Slider throughout this tutorial since it is one of the most flexible sliders available.</p><h2>Introduction to Rhino Slider</h2><p>Rhino Slider is a jQuery Slider dual licensed under the MIT or GPL Version 2 licenses. You can download and get more information <a href="http://rhinoslider.com/license/">here</a>. Following image shows the default view of Rhino Slider.</p><p><img alt="Rhino Slider Default View" class="size-full wp-image-76781 alignnone" height="254" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/Rhino-Slider-Default-View.png" title="Rhino Slider Default View" width="570" /></p><p>I have explained the Rhino Slider components and how it can be used in my tutorial <a href="http://www.1stwebdesigner.com/css/create-multi-step-form-rhinoslider/"><strong>How to Create a Multi-Step Form Using RhinoSlider</strong></a>. You can use it to get a better understanding about how it works. In this tutorial I’ll be explaining how to create different layouts and different functionality with a single slider.</p><h2>Designing Custom Navigation for the Slider</h2><p>Navigation is one important part of a slider. Even though sliders can be created to slide automatically in specified intervals, its preferable to provide controls for the user to go through them at their own speed. Generally <em>Next</em> and <em>Previous</em> buttons are provided in most sliders. Rhino Slider, which I am using for this tutorial, contains a numbered navigation similar to pagination.</p><p>We can create different designs for navigation pretty quickly and make the slider look completely different. I’ll show you how to change the basic styles of navigation. So lets get started.</p><p><strong>Identifying Control Buttons</strong></p><p>There are 3 navigation buttons in Rhino Slider for Previous Slide, Next Slide and Pagination. These components are provided with specific CSS classes so that we can identify them easily.</p><p>Previous Slide - rhino-prev<br /> Next Slide - rhino-next<br /> Pagination - rhino-bullets</p><p>Now, have a quick look at the image below to get an idea about how we are going to change the design.</p><p><img alt="Custom Navigation for Slider" class="size-full wp-image-77067 alignnone" height="283" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/Custom-Navigation-for-Slider.png" title="Custom Navigation for Slider" width="570" /></p><h3 style="text-align: center;"><a href="http://www.1stwebdesigner.com/demos/jquery-custom-slider/navigation-slider/">Demo</a></h3><p><strong><br /> Step 1 - Designing Prev/Next Controls</strong></p><p>As you can see, prev and next buttons are given different images to the original one with black background. Also, positioning of the controls has been changed to show them in the middle instead of bottom. So let’s discuss the necessary changes to main CSS file.</p><pre class="brush: css; title: ; notranslate"> .rhino-btn { background:url(/img/rhinoslider-sprite.png) 0 0 no-repeat; z-index:10; display:block; text-indent:-999%; -webkit-user-select:none; -moz-user-select:none; user-select:none; /* Modified Styles */ width:30px; height:25px; } .rhino-prev, .rhino-next {/* Modified Styles */ bottom:150px; } .rhino-prev { /* Modified Styles */ background: url("/img/prev-arrow.png") no-repeat scroll 13px 10px #000000; padding: 10px 5px; left : -45px; } .rhino-next { /* Modified Styles */ background: url("/img/next-arrow.png") no-repeat scroll 15px 10px #000000; padding: 10px 5px; right:-45px; } .rhino-prev:hover { /* Modified Styles */} .rhino-next:hover { /* Modified Styles */} .rhino-bullets:before, .rhino-bullets:after { position:absolute; display:block; left:-16px; content:' '; width:16px; height:26px; /* Removed Style */ /* background:url(/img/rhinoslider-sprite.png) -224px 0 no-repeat; */ } .rhino-bullets { position: absolute; bottom: -3px; margin:0 0 0 -50px; z-index: 10; background: #fff; padding:0; /* Modified Styles */ left: 45%; } .rhino-bullets li { float:left; display:inline; /* Modified Styles */ padding:10px; background :#000; /*margin:0 2px;*/ } .rhino-bullets li a.rhino-bullet { display: block; width: 16px; cursor: pointer; background: white; font-size: 10px; text-align: center; padding: 6px 0 5px 0; color: #333; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; /* Modified Styles */ background:url("/img/pagination.png") repeat scroll 0 0 #0C1C28; height: 3px; } .rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus { color:#999; /* Removed Style */ /* background:#eee; */ } .rhino-bullets li a.rhino-bullet.rhino-active-bullet { color:#fff; /* Removed Style */ /* background:#5cd4e8; */ /* Modified Style */ background-position:0px -14px; } </pre><p>Once you apply these styles, the slider will change its look to the design provided in the image. I have mentioned the styles which have been changed to achieve the new design. Now you can see how easy it is to create new designs.</p><h2>Designing Preview Images for Slider</h2><p>In the previous section, I explained how to use navigation controls and customize the layout. In this section we’ll try a bit of more advanced code to show preview images of the slider in place of navigation numbers. We will be using a combination of CSS and jQuery for this section.</p><h3 style="text-align: center;"><a href="http://www.1stwebdesigner.com/demos/jquery-custom-slider/image-preview-slider/" target="_blank">Demo</a></h3><p>So we have to remove the circular image used for pagination and increase the dimensions of navigation bullets to show the preview image. Let’s take a look at the CSS code first. All the changes from the original CSS file can be found in code comments.</p><pre class="brush: css; title: ; notranslate"> .rhino-bullets { position: absolute; bottom: -3px; z-index: 10; background: #fff; padding:0; /* Modified Styles */ bottom: -70px; /* Removed Styles left: 45%; margin: 0 0 0 -50px; */ } .rhino-bullets li { float:left; display:inline; /* Modified Styles */ padding:1px; background :#000; /*margin:0 2px;*/ } .rhino-bullets li a.rhino-bullet { display: block; cursor: pointer; background: white; font-size: 10px; text-align: center; padding: 6px 0 5px 0; color: #333; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; /* Modified Styles */ height: 55px; width: 102px; padding: 0; border:5px solid #eee; /* Removed Styles background:url("/img/pagination.png") repeat scroll 0 0 #0C1C28; */ } img{ max-width:100%; } </pre><p>Once you apply the above CSS code the preview will look like the following.</p><p><img alt="Slider Before Preview Images" class="size-full wp-image-77071 alignnone" height="334" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/Slider-Before-Preview-Images.png" title="Slider Before Preview Images" width="570" /></p><p>Let’s play with some jQuery code to generate the preview images in place of numbers in bullets.</p><pre class="brush: jscript; title: ; notranslate"> $('#slider li').each(function(){ var image_src = $(this).find("img").attr("src"); var panel_id = $(this).attr("id"); $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' />"); }); </pre><ul><li>First we traverse through all the li elements inside slider using jQuery each function.</li><li>You may have noted that li elements for slider images have the ID as rhino-item0,rhino-item1 etc., and the respective pagination bullet as rhino-item0-bullet, rhino-item1-bullet.</li><li>So we get the image src using the src attribute and get the ID of li elements above the image.</li><li>Then we find the respective bullet not using the ID and assign the image to the preview section.</li></ul><p>Now you will be able to see the preview images as shown in the screen below.</p><p><img alt="Slider After Preview Images" class="size-full wp-image-77075 alignnone" height="323" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/Slider-After-Preview-Images.png" title="Slider After Preview Images" width="570" /></p><p>You can see how easy it is to change the designs and functions. Previewing images like this is not the most optimized way since it scales images. But its very useful in certain situations.</p><h2>Slider with Vertical Tabs</h2><p>Lets see how we can convert the default slider into a slider with tabbed navigation on the left side. You can take a look at the final output of this section using the following screen.</p><p><img alt="Slider with Tabs" class="size-full wp-image-77122 alignnone" height="242" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/Slider-with-Tabs.png" title="Slider with Tabs" width="570" /></p><h3 style="text-align: center;"><a href="http://www.1stwebdesigner.com/demos/jquery-custom-slider/tab-slider" target="_blank">Demo</a></h3><p>The following is the necessary changes you need to make to the default CSS file in order to customize the design.</p><pre class="brush: css; title: ; notranslate"> .rhino-bullets { background: none repeat scroll 0 0 #FFFFFF; left: -136px; margin: 0 0 0 -50px; padding: 0; position: absolute; z-index: 10; /* Removed Styles bottom: -3px; */ /* Added Styles */ top: -3px; border:1px solid #A7A5A5; } .rhino-bullets:before, .rhino-bullets:after { position:absolute; display:block; left:-16px; content:' '; width:16px; height:26px; /* Removed Styles background:url(/img/rhinoslider-sprite.png) -224px 0 no-repeat; */ } .rhino-bullets li { margin: 0 2px; /* Modified Styles */ display: block; border-bottom: 1px solid #eee; /* Removed Styles float: left;*/ } .rhino-bullets li a.rhino-bullet { -moz-user-select: none; background: none repeat scroll 0 0 white; color: #333333; cursor: pointer; display: block; font-size: 10px; text-align: center; text-decoration: none; /* Modified Styles */ height: 50px; padding: 5px; width: 170px; } .rhino-bullets li img{ width:75px; height: 50px; float: left; } .rhino-bullets li p{ font-family: helvetica; font-size: 12px; font-weight: bold; } </pre><p>Apart from the thumbnail images we can also add a short title or caption in front of the header. You have to define the captions in a JavaScript array as shown in the code below.</p><pre class="brush: jscript; title: ; notranslate"> var info = ["Image Tagging","Rhino Slider","Tweet Book","Reward Tweet","Sliding Menu"]; $('#slider li').each(function(index){ var image_src = $(this).find("img").attr("src"); var panel_id = $(this).attr("id"); $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' /><p>"+info[index]+"</p>"); }); </pre><p>I have added the caption using the JavaScript array while traversing through pagination bullets.</p><h2>How to Use the Designs in Single Page</h2><p>In the previous 3 sections I showed you how to create different designs and functionality using the same slider. We changed the main CSS file of the Rhino Slider, but when we use more than one slider inside a single page we cannot change style the way we just did. So we have to find alternative methods to specify different styles for same classes and elements.</p><h3 style="text-align: center;"><a href="http://www.1stwebdesigner.com/demos/jquery-custom-slider/multiple-sliders" target="_blank">Demo</a></h3><p>First we have to provide different IDs for slider containers as shown below and initialize the Rhino Slider separately.</p><pre class="brush: xml; title: ; notranslate"> <ul id="slider1" class="slider"> <li><img src="img/slider/1.jpg" alt="" /></li> <li><img src="img/slider/2.jpg" alt="" /></li> <li><img src="img/slider/3.jpg" alt="" /></li> <li><img src="img/slider/4.jpg" alt="" /></li> <li><img src="img/slider/5.jpg" alt="" /></li> </ul> <ul id="slider2" class="slider"> <li><img src="img/slider/4.jpg" alt="" /></li> <li><img src="img/slider/5.jpg" alt="" /></li> <li><img src="img/slider/1.jpg" alt="" /></li> <li><img src="img/slider/2.jpg" alt="" /></li> <li><img src="img/slider/3.jpg" alt="" /></li> </ul> </pre><p>Then we have to assign a unique class to the bullet navigation list of each slider container. The following jQuery code will add the class to the navigation bullets.</p><pre class="brush: jscript; title: ; notranslate"> $('#slider1').parent().addClass("slider1"); $('#slider2').parent().addClass("slider2"); </pre><p>Each design will have its own styles for each class. So prefix all the modified styles with the class relative to the slider. Consider the following example.</p><pre class="brush: css; title: ; notranslate"> .slider1 .rhino-bullets { position: absolute; bottom: -3px; z-index: 10; background: #fff; padding:0; /* Modified Styles */ bottom: -70px; /* Removed Styles left: 45%; margin: 0 0 0 -50px; */ } .slider2 .rhino-bullets { position: absolute; bottom: -3px; margin:0 0 0 -50px; z-index: 10; background: #fff; padding:0; /* Modified Styles */ left: 45%; } </pre><p>In the above example 2 sliders have different styles for the <strong>rhino-bullets</strong> class. So prefix it with your slider class. Follow the same process for every other styles which is not common to all sliders.</p><p>So we have created a few slider designs and learned how to customize a slider. It’s time for you to create your own customized design for the slider. All are welcome to share links or images to your customized version of Rhino Slider.</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=AKB8ivWBi4s:6GeF5HksWJw:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=AKB8ivWBi4s:6GeF5HksWJw:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=AKB8ivWBi4s:6GeF5HksWJw:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=AKB8ivWBi4s:6GeF5HksWJw:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/AKB8ivWBi4s" width="1" />

<p>In this collection, we are presenting some handy and useful smartphone UI Kit PSDs that you can download for free. With these mobile user interface kits, designers can enhance their creations and make their mobile user interfaces look more interesting and appealing.</p><p>Using these kits, you can design visually interactive and appealing user interfaces. All these kits are available in PSD format for easy modification. <span id="more-77317"></span></p><p><strong>Note:</strong> Although all these UI Kits are free to use, we suggest you read the license agreements carefully before using them for commercial purposes.</p><h3>1. <a href="http://medialoot.com/item/surface-iphone-ui-kit-1/" target="blank">Surface iPhone UI Kit</a></h3><p><img alt="Surface iPhone UI Kit" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile42.jpg" width="570" /></p><h3>2. <a href="http://freeuikits.com/free-psd-iphone-ios-6-gui-psd/" target="blank">iPhone iOS 6 GUI PSD</a></h3><p><img alt="iPhone iOS 6 GUI PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile48.jpg" width="570" /></p><h3>3. <a href="http://365psd.com/day/3-110/" target="blank">iPhone UI</a></h3><p><img alt="iPhone UI" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile53.jpg" width="570" /></p><h3>4. <a href="http://freeuikits.com/free-psd-official-android-4-0-ui-downloads/" target="blank">Official Android 4.0 UI Downloads</a></h3><p><img alt="Official Android 4.0 UI Downloads" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile26.jpg" width="570" /></p><h3>5. <a href="http://www.teehanlax.com/blog/iphone-gui-psd-v4/" target="blank">iPhone GUI PSD Version 4</a></h3><p><img alt="iPhone GUI PSD Version 4" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile2.jpg" width="570" /></p><h3>6. <a href="http://www.teehanlax.com/blog/ios-6-gui-psd-iphone-5/" target="blank">iOS 6 GUI PSD (iPhone 5)</a></h3><p><img alt="iOS 6 GUI PSD (iPhone 5)" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile58.jpg" width="570" /></p><h3>7. <a href="http://livven.me/psds/htc-mondrian-windows-phone-7-concept-psd/" target="blank">HTC Mondrian Concept PSD</a></h3><p><img alt="HTC Mondrian Concept PSD" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile32.jpg" width="570" /></p><h3>8. <a href="http://thiago-silva.deviantart.com/art/Android-2-2-GUI-171047600" target="blank">Android 2.2 GUI</a></h3><p><img alt="Android 2.2 GUI" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile15.jpg" width="570" /></p><h3>9. <a href="http://freeuikits.com/free-psd-passbook-ui-psd-from-ios6/" target="blank">Passbook UI PSD from iOS6</a></h3><p><img alt="Passbook UI PSD from iOS6" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile47.jpg" width="570" /></p><h3>10. <a href="http://www.teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/" target="blank">iOS 5 GUI PSD (iPhone 4S)</a></h3><p><img alt="iOS 5 GUI PSD" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile41.jpg" width="570" /></p><h3>11. <a href="http://www.teehanlax.com/downloads/android-gui-psd-high-density/" target="blank">Android GUI PSD (High-Density)</a></h3><p><img alt="Android GUI PSD (High-Density)" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile46.jpg" width="570" /></p><h3>12. <a href="http://freeuikits.com/free-psd-app-view-mobile-ui-psd/" target="blank">App View Mobile UI PSD</a></h3><p><img alt="App View Mobile UI PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile49.jpg" width="570" /></p><h3>13. <a href="http://medialoot.com/item/free-iphone-app-template-appview/" target="blank">iPhone App UI Theme</a></h3><p><img alt="iPhone App UI Theme" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile44.jpg" width="570" /></p><h3>14. <a href="http://medialoot.com/item/fresh-iphone-ui-kit/" target="blank">Fresh iPhone UI Kit</a></h3><p><img alt="Fresh iPhone UI Kit" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile45.jpg" width="570" /></p><h3>15. <a href="http://365psd.com/day/3-62/" target="blank">iPhone Camera App UI</a></h3><p><img alt="iPhone Camera App UI" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile54.jpg" width="570" /></p><h3>16. <a href="http://www.webdesignshock.com/free-photoshop-android-interface-gui/" target="blank">Photoshop Android GUI Set</a></h3><p><img alt="Photoshop Android GUI Set (.psd & .png)" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile40.jpg" width="570" /></p><h3>17. <a href="http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/" target="blank">Android GUI PSD Vector Kit</a></h3><p><img alt="Android GUI PSD Vector Kit" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile51.jpg" width="570" /></p><h3>18. <a href="http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/" target="blank">iPad GUI PSD</a></h3><p><img alt="iPad GUI PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile52.jpg" width="570" /></p><h3>19. <a href="http://365psd.com/day/308/" target="blank">iPhone 4 GUI PSD</a></h3><p><img alt="iPhone 4 GUI PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile56.jpg" width="570" /></p><h3>20. <a href="http://365psd.com/day/234/" target="blank">iPhone App PSD</a></h3><p><img alt="iPhone App PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile57.jpg" width="570" /></p><h3>21. <a href="http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/" target="blank">iPhone 4 GUI PSD (Retina Display)</a></h3><p><img alt="iPhone 4 GUI PSD (Retina Display)" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile1.jpg" width="570" /></p><h3>22. <a href="http://designerstoolbox.com/designresources/iphone/" target="blank">iPhone GUI Elements</a></h3><p><img alt="iPhone GUI Elements" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile4.jpg" width="570" /></p><h3>23. <a href="http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements" target="blank">iPhone UI Vector Elements</a></h3><p><img alt="iPhone UI Vector Elements" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile5.jpg" width="570" /></p><h3>24. <a href="http://fantasy-apps.deviantart.com/gallery/#/d2r7sus" target="blank">iPhone UI Kits Light Remake</a></h3><p><img alt="iPhone UIKits light remake" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile7.jpg" width="570" /></p><h3>25. <a href="http://graffletopia.com/stencils/413" target="blank">Ultimate iPhone Stencil</a></h3><p><img alt="Ultimate iPhone Stencil" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile9.jpg" width="570" /></p><h3>26. <a href="http://unitid.nl/2009/11/fireworks-template-for-android/" target="blank">Fireworks Template for Android</a></h3><p><img alt="Fireworks template for Android" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile13.jpg" width="570" /></p><h3>27. <a href="http://bharathp666.deviantart.com/art/Android-Widgets-182178250" target="blank">Android: Widgets</a></h3><p><img alt="Android: Widgets" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile16.jpg" width="570" /></p><h3>28. <a href="http://mobile-developer.ru/maemo/vse-elementy-maemo-5-gui-v-psd/" target="blank">All Elements of Maemo 5 GUI in PSD</a></h3><p><img alt="All elements of Maemo 5 GUI in PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile21.jpg" width="570" /></p><h3>29. <a href="http://www.teehanlax.com/blog/palm-pre-gui-psd/" target="blank">Palm Pre GUI PSD</a></h3><p><img alt="Palm Pre GUI PSD" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile22.jpg" width="570" /></p><h3>30. <a href="http://graffletopia.com/stencils/495" target="blank">iPhone 3G Stencil</a></h3><p><img alt="iPhone 3G Stencil" border="0" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile25.jpg" width="570" /></p><h3>31. <a href="http://designmoo.com/12694/ios-5-gui-psd/" target="blank">iOS 5 GUI PSD</a></h3><p><img alt="iOS 5 GUI PSD" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile28.jpg" width="570" /></p><h3>32. <a href="http://softarea.deviantart.com/art/Music-UI-Kit-For-Web-and-Mobile-Phones-PSD-320027605" target="blank">Music UI Kit For Web and Mobile Phones (PSD)</a></h3><p><img alt="Music UI Kit For Web and Mobile Phones (PSD)" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile31.jpg" width="570" /></p><h3>33. <a href="http://mobile.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/" target="blank">iPhone PSD Vector Kit</a></h3><p><img alt="iPhone PSD Vector Kit" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile34.jpg" width="570" /></p><h3>34. <a href="http://dribbble.com/shots/631200-Freebies-Mobile-and-Web-UI-Kit" target="blank">Mobile and Web UI Kit</a></h3><p><img alt="Mobile and Web UI Kit" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile36.jpg" width="570" /></p><h2>Mobile Wireframes</h2><h3>35. <a href="http://www.zurb.com/article/608/full-set-of-stencils-for-sketching-iphone" target="blank">Full Set of Stencils for Sketching iPhone & Android</a></h3><p><img alt="Full Set of Stencils for Sketching iPhone, iPad & Android" border="0" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile35.jpg" width="570" /></p><h3>36. <a href="http://fullofdesign.com/posts/iphone-app-wireframe-template/" target="blank">iPhone App Wireframe Template</a></h3><p><img alt="iPhone App Wireframe Template" border="0" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile8.jpg" width="570" /></p><h3>37. <a href="http://graffletopia.com/stencils/630" target="blank">Android 1.6 Wireframe Stencil for Omnigraffle</a></h3><p><img alt="Android 1.6 Wireframe stencil for Omnigraffle" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile11.jpg" width="570" /></p><h3>38. <a href="http://www.usercentred.net/2010/06/28/illustrator-template-for-iphone-design/" target="blank">Template for iPhone Design</a></h3><p><img alt="template for iPhone design" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile12.jpg" width="570" /></p><h3>39. <a href="http://graffletopia.com/stencils/578" target="blank">Android Sketch Stencil Version 1.0</a></h3><p><img alt="Android Sketch Stencil Version 1.0" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile14.jpg" width="570" /></p><h3>40. <a href="http://www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/" target="blank">HTC HD2 Smartphone Vector</a></h3><p><img alt="HTC HD2 Smartphone Vector (.psd)" border="0" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/uikitsformobile17.jpg" width="570" /></p><p><strong></strong>Browse through this collection and feel free to download as many as you like. Do let us know what you think of this collection using the comment section below. Enjoy!</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8BNZ6rPlOWY:NOSBKIfp9BU:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8BNZ6rPlOWY:NOSBKIfp9BU:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8BNZ6rPlOWY:NOSBKIfp9BU:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=8BNZ6rPlOWY:NOSBKIfp9BU:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/8BNZ6rPlOWY" width="1" />

<p>There can be many reasons to stick to deviantART (dA) — the biggest art community and a basic step for a design newcomer. At the same time none of these reasons should prevent you from participating in other professional networks and showcasing your skills.</p><p>Founded twelve years ago, today deviantART has the widest art-loving audience. However, lately there is an opinion that deviantART is overcrowded with work which can only be called “art” by a long stretch of imagination. So many men, so many censures! Anyway, like it or not, dA is a wonderful art community, but at the same time, it helps to be part of other art networks as well.</p><p>Today, we will take a look at seven major art communities and deviantART alternatives for aspiring designers and creative artists. <span id="more-77282"></span></p><h2>7 deviantART Alternatives:</h2><h3>1. <a href="http://www.behance.net">Behance</a></h3><p><img alt="" class="alignnone size-full wp-image-77283" height="400" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/1-Behance.jpg" title="Behance" width="500" /></p><p>Unlike deviantART, Behance is built for those who work with art professionally, doing it for a living or as a very serious hobby. Due to the strict rules and high standards, Behance tends to be an upper-level professional network.</p><p>The website looks intuitive and well-organized: works are divided into groups, categories, and even countries. You can circle your friends or teammates according to the interests, professional level or the project you are working on together. If you are looking for a standout feature here, take a look at the job board and interaction system. On Behance, artists get a consistent portfolio system to show the workflow and project progress in steps. Although a large number of famous names may scare the beginners, Behance is probably the only place where you can share your experience and knowledge with artists and designers and get professional feedback.</p><ul><li><strong>Categories</strong>: Web and interface design, typography, typeface, graphics, industrial and interaction design, etc.</li><li><strong>Job board</strong>: Yes, very active.</li><li><strong>Pro account</strong>: Not exactly. Behance ProSite for publishing portfolio websites starts from $11/month.</li></ul><h3>2. <a href="http://www.dribbble.com">Dribbble</a></h3><p><img alt="" class="alignnone size-full wp-image-77284" height="414" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/2-Dribbble.jpg" title="Dribbble" width="500" /></p><p>First things first. Dribbble is a “by invitation only” website and stays one of those private networks that every designer is proud to be a part of. Users get 24 free shots each month to showcase their skills and get spotted. Frankly, Dribbble is all about “shots” and “rebounds”. Shots are small (400×300 pixels JPEG, GIF or PNG) sneak peaks of your work or even a piece of it. Rebounding is a good way to reply with a shot or post a series of your sneak peaks tied with a certain idea.</p><p>The invite system has also ensured that the quality of works remains intact. Drafting a newcomer is sort of a responsibility, after all.</p><ul><li><strong>Categories</strong>: UI Design, Web Design, Script, Typography, iOS apps design, 3D Designs, etc.</li><li><strong>Job board</strong>: Yes.</li><li><strong>Pro account</strong>: Yes, $20 per year. Better search for scouts, PRO badge for members, additional projects, attachments and stats.</li></ul><h3>3. <a href="http://www.forrst.com">Forrst</a></h3><p><img alt="" class="alignnone size-full wp-image-77285" height="409" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/3-Forrst.jpg" title="Forrst" width="500" /></p><p>Private communities always cause a lot of rumors, but I should admit: Forrst beats them all. It is an invite-only community but if you are a member of GitHub, you have a right to login without asking for an invitation. On the whole, Forrst is all about sharing four categories: questions, snaps, code and links. It may look a bit similar to Dribbble, but it focuses on web developers too.</p><p>The editorial team has launched an amazing podcast covering design-centric topics and tutorials, which can be downloaded on iTunes. Being a closed network, Forrst makes its members keep up with the high level of work and invites only those who meet the requirements. Another strict measure is flagging offensive posts, so the community content is always clean and relevant.</p><ul><li><strong>Categories</strong>: Icons, software, web interface, user interface.</li><li><strong>Job board</strong>: Yes.</li><li><strong>Pro accounts</strong>: Yes, called “supported accounts” and cost $5 per month. Provides stats and custom domains, unlimited attachment and more.</li></ul><h3>4. <a href="http://www.designmoo.com">Designmoo</a></h3><p><img alt="" class="alignnone size-full wp-image-77286" height="370" src="http://cdn3.1stwebdesigner.com/wp-content/uploads/2012/10/4-Designmoo.jpg" title="Designmoo" width="500" /></p><p>Designmoo.com is an open designers’ network aimed to provide its members with objective feedback and the opportunity to get their projects done. With its rich base of free stuff (fonts, brushes, illustrations, icons and other items) and active interaction system, Designmoo is a fast-developing network with one of the largest worldwide communities.</p><p>Each work can deserve a “like”, comment and feedback with suggestions. There is also a marketplace for pro members interested in selling their items via Designmoo or a third-party website. The community is vividly using all possible ways to promote free and quality stuff. A very popular one is so-called “Sponsored Freebies” featuring sources of peak traffic on a page branded with a company’s logo.</p><ul><li><strong>Categories</strong>: UI elements, email newsletter layouts, fonts, graphics, etc.</li><li><strong>Job board:</strong> No, but there’s a marketplace for buying/selling quality design-centric products.</li><li><strong>Pro account</strong>: Starts from $9/month, gives you Dropbox synchronization, externally-hosted resources sharing and widescreen preview images uploading.</li></ul><h3>5. <a href="http://www.designshack.net">Designshack</a></h3><p><img alt="" class="alignnone size-full wp-image-77287" height="357" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2012/10/5-Designshack.jpg" title="Designshack" width="500" /></p><p>Designshack is a user-friendly all-in-one solution for designers to submit their work, get feedback and make use of regular design-centric news and articles. The website is extremely easy to use; there are three main categories in the gallery: web design, branding, logos and interface design.</p><p>Being a part of DesignShack will get you an exclusive WordPress theme “Marketed” for free, while its usual price is $30. Your work can also get featured in a promotional article prepared by the editorial team for $49 only. Thus each member gets an opportunity to get spotted and receive objective critique for his pieces of art.</p><ul><li><strong>Categories</strong>: Web design, interface design, branding and logos.</li><li><strong>Job board</strong>: No.</li><li><strong>Pro account</strong>: No, but promotional opportunities for $49.</li></ul><h3>6. <a href="http://www.patterntap.com">Patterntap</a></h3><p><img alt="" class="alignnone size-full wp-image-77288" height="341" src="http://cdn4.1stwebdesigner.com/wp-content/uploads/2012/10/6-Patterntap.jpg" title="Patterntap" width="500" /></p><p>Let’s move to more focused communities. Patterntap was created four years ago as a “living classroom, where designers learn what is working well on the Web and why”; its members are mostly interested in UI design and patterns. There is a quick Twitter sign up and as a network participant, you can leave your comments below each item. If you are looking for inspiration or improving your design literacy, Patterntap is the right place to go!</p><ul><li><strong>Categories</strong>: Typography, texture, subtitle, colorscheme, slidebars, subnavigation and many others.</li><li><strong>Job board</strong>: No.</li><li><strong>Pro account</strong>: No.</li></ul><h3>7. <a href="http://www.typophile.com">Typophile</a></h3><p><img alt="" class="alignnone size-full wp-image-77289" height="361" src="http://cdn2.1stwebdesigner.com/wp-content/uploads/2012/10/7-Typophile.jpg" title="Typophile" width="500" /></p><p>Typophile is another focused community — this time for typography enthusiasts. If you are fond of typographic art, want to get experience, meet like-minded people and are ready for standing some criticism, you’ll find everything here. The network itself is a huge forum tree, where fonts and typefaces, associated software, tips and tricks are discussed. Holding tons of pieces of creativity, this website has never had paid accounts and is supported by Punchcut.com — a design consulting company from San Francisco.</p><ul><li><strong>Categories</strong>: Bitmap Display / Script, Typography / Composition, etc.</li><li><strong>Job board</strong>: No.</li><li><strong>Pro accounts</strong>: No.</li></ul><p>Is that all?</p><p>Of course not! You can also make use of the following websites:</p><ul><li><a href="http://designrelated.com">Designrelated.com</a></li><li><a href="http://designspiration.net">Designspiration.net</a></li><li><a href="http://psdbucket.com">PSDbucket.com</a></li><li><a href="http://typetoken.net">Typetoken.net</a></li><li><a href="http://flickr.com/groups/_typography/">Flickr.com/groups/_typography/</a></li></ul><p>Now that you’ve seen the most popular alternatives to dA, which one do you find the most attractive? Let us know whether you’re going to stay with dA community or explore something else. Share your thoughts or help us to expand the list!</p> <span id="pty_trigger"></span><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8lxKJbtWDV4:s_J31ZKgOVw:yIl2AUoC8zA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=yIl2AUoC8zA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8lxKJbtWDV4:s_J31ZKgOVw:7Q72WNTAKBA"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?d=7Q72WNTAKBA" /></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=8lxKJbtWDV4:s_J31ZKgOVw:F7zBnMyn0Lo"><img border="0" src="http://feeds.feedburner.com/~ff/1stwebdesigner?i=8lxKJbtWDV4:s_J31ZKgOVw:F7zBnMyn0Lo" /></a> </div><img height="1" src="http://feeds.feedburner.com/~r/1stwebdesigner/~4/8lxKJbtWDV4" width="1" />