Create a Website using UI Packs (PSD to HTML) – Day 1

Introduction

During the past months we released on DesignModo a few User Interface Packs. All this UI Packs were made in Photoshop and we received a lot of requests to create some tutorials about how to use the elements of this UI packs on the web, so today we will start a new tutorial series. In these tutorials we will code a PSD template using HTML, CSS and JavaScript.

Lest start with a brief introduction about the UI Packs. The UI Packs are great resource for web designer and developers because they are great, save a lot of time and money. Usually when you start working on a new project you spend a lot of time designing and setting up the layout of your project. This UI Kits are great because you don’t need to spend time designing all the elements and you can focus on functionality and usability. Also all the elements are vectors and full customizable, so you can change the shape and the styles very easily.

We will not cover the PSD layout creation because we will focus more on the coding part. The layout creation is very simple, as you only need to grab the elements from the UI PSD, duplicate them and position on your new layout. If you have some basic Photoshop knowledge you will find it very easy to do. If not, there are a lot of free tutorials on the web where you can learn the basics. For this tutorial i used only Impressionist UI pack.

I also recommend you to take a look at this articles “What is UI Kit and Why You Should Use it” and “How Companies can Save Time and Money Using UI Kits” by Rochester Oliveira if you want to learn more about UI Packs and the advantages of using them.

Preview

Preview

Step 1 – Slicing the PSD

By slicing the PSD I mean, selecting the images from PSD that we need to use and save them for web. I will explain how to do it and I think that’s the faster way:

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

First select the image or layer and duplicate it to a new document.

1

Then we need to “Trim” it in order to remove the transparent pixels. Go to “Image” – “Trim” – Select Transparent Pixels – Top, Left, Right and Bottom.

2

To save it go to “File” – “Save for Web..” – Select “PNG24” and save it.

It can be kind of annoying to do it with all the needed images, so there’s a faster way to do it if you use an action that does it automatically. Download the source file to get it. To use you only need to select the layer(s) and press the “F3” key on your keyboard and a new window will open and you only need to set the file name.

Step 2 – Files Structure

The file structure is very simple, we will create a “css” folder where we’ll save the css files and fonts, an “img” folder to save all the images that we will use, a “js” folder to save the javascript files and an “index.html” file.

3

Step 3 – Startup Markup

Today we will start the basic structure of our layout; let’s add the necessary HTML tags and also create a div for each section of the page (header, footer, etc.).

<!DOCTYPE html>

<html lang="en">

<head>

	<!-- Meta Tags -->
	<meta charset="utf-8">

	<!-- Title -->
	<title>Movie</title>

	<!-- Stylesheets -->
	<link rel="stylesheet" href="css/style.css" media="screen">

</head>

<body>

	<div id="header">
		Header Content
	</div><!-- end #header -->

	<div id="featured-movies-wrapper">
		Featured Movies Content
	</div><!-- end #featured-movies-wrapper -->

	<div id="content-wrapper">

		<div id="blog-posts">
			Blog Content
		</div>

		<div id="side-bar">
			Sidebar Content
		</div>

	</div><!-- end #content-wrapper -->

	<div id="footer">
		Footer Content
	</div><!-- end #footer -->

</body>

</html>

We will also add the reset styles in order to remove all the default browser’s styling (margins, padding, etc.).

html, body, div, span, applet, object, iframe, h1,h2,h3,h4,h5,h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}body{line-height:1}ol, ul{list-style:none}blockquote, q{quotes:none}blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{cursor:default}

Then we will add the styles for each page section (header, footer, etc.) and make the container 870px wider. To center the page on the screen we will set the margin to 0 for the top and bottom and set to auto for the left and right.

#header {
	width: 100%;
	height: 490px;
	background: #222222 url(../img/header-bg.png) repeat-x 0 0;
}

#featured-movies-wrapper {
	width: 100%;
	background: #ffffff;
}

#content-wrapper {
	width: 100%;
	background: #efefef url(../img/content-bg.png) repeat-x 0 0;
}

#blog-posts {
	position: relative;
	width: 500px;
	float: left;
}

#side-bar {
	position: relative;
	width: 315px;
	float: right;
}

#footer {
	width: 100%;
	background: #181818 url(../img/footer-bg.png) repeat-x 0 0;
}

/* Center Pages */
.center-wrapper {
	position: relative;
	width: 870px;
	margin: 0 auto;
}

Step 4 – Header HTML Markup

We will start with the top navigation bar that will contain the logo, navigation menu and the search form. For the logo we will use an image and wrap it in an anchor tag. For the navigation we will create an unordered list with the class “nav”. To finish the top navigation bar we will create a form with two inputs.

<div id="top-nav" class="center-wrapper">

	<a class="title" href="#"><img src="img/title.png" alt="Title"></a><!-- end .title -->

	<ul class="nav">
		<li><a href="#">My dashboard</a></li>
		<li><a href="#">Movies</a></li>
		<li><a href="#">TV</a></li>
		<li><a href="#">Trailers</a></li>
		<li><a href="#">Photos</a></li>
	</ul><!-- end .nav -->

	<form id="search-form" action="#">
		<input type="text" id="search-box" name="search-box" placeholder="Search Box">
		<input type="submit" value="" id="search-submit">
	</form><!-- end #search-form -->

</div><!-- end #top-nav .center-wapper -->

For the daily featured movie we’ll start to add the movie cover and the movie rating using an unordered list. After that we will add the headings and the short paragraph of the movie. To finish the header HTML markup we will create a “trailers slider” that will contain images or videos about the movie. This images and movies can be loaded in a lightbox, you can use an plugin to do it. Each movie will be wrapped in a list and these lists will be wrapped in two “divs” that are needed to hide the other lists and show only two.

<div id="header-featured-movie" class="center-wrapper">

	<img src="img/content/dexter.png" alt="" class="movie-cover"><!-- end .movie-cover -->

	<ul class="movie-rating">
		<li class="rated"></li>
		<li class="rated"></li>
		<li class="rated"></li>
		<li></li>
		<li></li>
	</ul><!-- end .movie-rating -->

	<h3>Movie of the Day</h3>

	<a href="#"><h1>Metallica - Enter Sandman</h1></a>

	<p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing counterfeit goods of all types, and with the world going technology crazy in the last few years.</p>

	<div id="movie-trailers">
		<div id="movie-trailer-slider">
			<ul class="movie-trailer-slider">
				<li>
					<a class="" href="#">
						<img src="img/content/trailer-1.png" alt="">
						<h4>Trailer #1</h4>
					</a>
				</li>
				<li>
					<a class="" href="#">
						<img src="img/content/trailer-2.png" alt="">
						<h4>Trailer #2</h4>
					</a>
				</li>
				<li>
					<a class="" href="#">
						<img src="img/content/trailer-1.png" alt="">
						<h4>Trailer #3</h4>
					</a>
				</li>
				<li>
					<a class="" href="#">
						<img src="img/content/trailer-2.png" alt="">
						<h4>Trailer #4</h4>
					</a>
				</li>
			</ul><!-- end .movie-trailer-slider -->
		</div><!-- end #movie-trailer-slider -->
	</div><!-- end #movie-trailers -->

	<!-- Movie Trailer Buttons -->
	<a href="#" class="md-prev-button"></a>
	<a href="#" class="md-next-button"></a>

</div><!-- end #header-featured-movie .center-wrapper -->

Step 5 – Header CSS Styles

Let’s start by giving to the top navigation bar 44px of height and positioning the logo. Then we will style the navigation menu, position it after the logo, set the width and height and also add the divider for each menu link using a background image.

/* Top Navigation Bar Styles */
#top-nav { height: 44px; }

.title {
	position: absolute;
	top: 0;
	left: 0;
}

/* Top Navigation Menu */
.nav {
	position: absolute;
	top: 0;
	left: 220px;
}

.nav li {
	display: block;
	float: left;
	height: 24px;
	padding: 10px 0;
}

.nav li a {
	display: block;
	height: 24px;
	line-height: 24px;
	padding: 0 15px;
	background: url(../img/nav-border.png) no-repeat center right;
}

.nav li:last-child a { background: none; }

After that let’s position the search form on the right and add the stylings. We will add a light CSS3 gradient and for older browsers a solid white color background. Also some shadows and the rounded corners. For the submit button we will only add a background image, set the width and height and position it on the right.

#search-form {
	position: absolute;
	top: 7px;
	right: 0;
}

#search-form input#search-box {
	width: 150px;
	height: 30px;
	padding: 0 40px 0 10px;
	border: none;
	outline: none;

	background: #ffffff;
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

#search-form input#search-submit {
	position: absolute;
	display: block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	top: 0;
	right: 0;
	border: none;
	outline: none;
	background: transparent url(../img/search-icon.png) no-repeat 0 0;
}

Now we will start to style the daily featured movie. First we will set the height to 446px and hide the overflows. Then we will position the cover and set the width and height. For the rating system we will use a sprite image that contains the rated and unrated stars.

/* Header Featured Movie Section */
#header-featured-movie {
	overflow: hidden;
	height: 446px;
}

/* Header Featured Movie Cover */
#header-featured-movie .movie-cover {
	position: absolute;
	top: 50px;
	left: 110px;
	width: 230px;
	height: 320px;
}

/* Header Featured Movie Rating */
#header-featured-movie .movie-rating {
	position: absolute;
	top: 385px;
	left: 180px;
}

#header-featured-movie .movie-rating li {
	display: block;
	float: left;
	cursor: pointer;
	width: 18px;
	height: 18px;
	background: url(../img/star-icon.png) no-repeat 0 0;
}

#header-featured-movie .movie-rating li.rated { background-position: 0 -18px; }

Then we’ll position the heading and the short paragraph. For the paragraph we will also add a transparent background color and an arrow using the :before pseudo-selector and the border to create a triangle. If you want more info about how to create the triangle search on Google for “css shapes” and you will find a lot of information about it.

/* Header Featured Movie Titles */
#header-featured-movie h1 {
	position: absolute;
	top: 73px;
	left: 385px;
}

#header-featured-movie h3 {
	position: absolute;
	top: 50px;
	left: 385px;
}

/* Header Featured Movie Paragraph */
#header-featured-movie p {
	position: absolute;
	top: 120px;
	left: 385px;
	width: 340px;
	padding: 20px;
	background: rgba(0,0,0,.2);
}

/* Header Featured Movie Paragraph Arrow */
#header-featured-movie p:before {
	position: absolute;
	content: '';
	top: -20px;
	left: 25px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid rgba(0,0,0,.2);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

Before going to the header typography styles let’s position the video trailers slider. You will only see one trailer because it’s styled to hide the others but when we will get to the jQuery part we will make it work nicely using a script, so don’t worry about it. Let’s also position the next and previous buttons and style these using a background image.

/* Header Featured Movie Trailer Slider */
#header-featured-movie #movie-trailers {
	position: absolute;
	overflow: hidden;
	top: 240px;
	left: 385px;
	width: 380px;
	height: 122px;
}

#header-featured-movie .movie-trailer-slider li {
	display: block;
	float: left;
	width: 172px;
	height: 122px;
	margin-right: 36px;
	background: rgba(0,0,0,.2);
}

#header-featured-movie .movie-trailer-slider li a {
	display: block;
	padding: 5px;
}

/* Header Movie Trailers Next & Prev Buttons */
#header-featured-movie .md-prev-button,
#header-featured-movie .md-next-button {
	position: absolute;
	display: block;
	width: 11px;
	height: 14px;
	top: 295px;
	left: 360px;
	background: url(../img/next-prev.png) no-repeat 0 0;
}

#header-featured-movie .md-next-button {
	left: 780px;
	background-position: -11px 0;
}

To finish today’s part of tutorial let’s add the Header’s typography styles. We’ll set the font to Helvetica, Arial and if none of both is available will use a sans-serif font. Then we will set the color, the font size, etc. for each element of the header.

body { font-family: Helvetica, Arial, sans-serif; }

/* Header Top Navigation Menu Links */
#header .nav li a {
	font-weight: bold;
	font-size: 12px;
	color: #eeeeee;
	text-shadow: 1px 1px 0px rgba(0,0,0, .6);
}

/* Header Featured Movie Title */
#header-featured-movie h1 {
	font-weight: bold;
	font-size: 20px;
	color: #eeeeee;
	text-shadow: 1px 1px 0px rgba(0,0,0, .6);
}

/* Header Featured Movie Sub-Title */
#header-featured-movie h3 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
	color: #5293c2;
}

/* Header Featured Movie Paragraph */
#header-featured-movie p {
	font-weight: bold;
	font-size: 12px;
	line-height: 18px;
	color: #979797;
}

/* Header Featured Movie Trailer Title */
#header-featured-movie .movie-trailer-slider li a h4 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	color: #979797;
}

Preview

Source Files

Each day you will be able to download the source files that contain all the resources that we used on the tutorial. On the last day of this tutorial you will be able to download the complete project that contains all the code, images, psd file and all the resources of the tutorial.

Click here to download today’s source files.

Conclusion

That’s it for today, if you have any question let me know in the comments. Don’t forget to check the second part of this tutorial tomorrow.

Create a Website using UI Packs (PSD to HTML) – Day 2

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

22 Comments
  1. Alden Hornby Jun 19, 1:41 pm

    wow, nice tutorials that you have here. i was really having a hard time pulling this off, but i think i now know how to do it . thanks a lot.

    Reply
    +4
  2. Duuro Jun 19, 4:21 pm

    Great tutorial, man.
    This will definitely boost your UI kit sales :). Congrats, you deserve it.

    Finally a tutorial with real life implementation

    Reply
    +5
  3. Edwin Jun 19, 4:27 pm

    hmmm, seems like UI Kits are very useful… interesting :)

    Reply
    0
  4. Frank Jun 19, 4:30 pm

    So, interesting implementation of Impressionist UI. First day is very interesting and open my eyes. How many days are series?

    Reply
    -2
  5. Naseer Jun 19, 10:10 pm

    I just wanted to add a request to show how an UI Element such as a slider that for example changes the value amount of some sort can be implemented using various technologies from your UI Elements within your templates – thanks

    Reply
    -2
  6. Sü Smith Jun 19, 10:15 pm

    Nice, It’s good to know that others slice a PSD with trim/save for web, and cut the individual elements instead of using the slice tool. I have always had issues with the slice tool, couldn’t quite figure it out. Thanks for sharing.

    Reply
    +1
  7. Looker Jun 20, 9:17 am

    I really like the idea for your tutorial. Lots of people want to give out freebies or premium of UI packs, but some people don’t know how to use them or what to do with them.

    Reply
    +1
  8. ReBleach Jun 20, 11:09 am

    Nice design, but I don’t understand why you put width:100%; on block elements ? It’s useless, they have already a width at 100%. Moreover if you add a padding you will have some bug…

    Reply
    0
    • Valeriu Jun 20, 2:11 pm

      Hi, I’ve used the width 100% to make sure the section will have the complete width of the screen. As I removed the padding and margin there will be no problem with bugs. Thanks for pointing this out, I will take it on consideration of future projects. Regards

      Reply
      +1
  9. Tom Durkin Jun 20, 11:49 am

    Great website example. I always have a look around packs to see what websites can be made out of them. Very useful little things!

    Reply
    +2
  10. Naseer Jun 20, 6:29 pm

    A Question : when I opened your psd document I got the following dialog :

    http://tinyurl.com/bqlzcmx

    Is it ok to click update?

    Reply
    0
    • Valeriu Jun 20, 10:53 pm

      This is caused because you don’t have some fonts used on the PSD. If you click update it will change the fonts to some one that is available on your system. I usually click on “NO”.

      Reply
      -2
  11. Ray Jun 26, 1:11 am

    Awesome tutorial! =) I have learnt a few things myself. I love to see new ways of doing/getting similar results, very interesting to also see how other designers work etc.

    Was wondering if you would also do a tutorial or video on how you how design the .psd you provided for this tutorial.

    Cheers

    Reply
    +1
  12. Carlos Oct 2, 2:22 pm

    Amazing Tutorials. You should do a follow-up with a tutorial for responsive Websites.

    Reply
    +2
  13. Abhinaba Dec 8, 1:31 am

    It would be great if you do a similar tutorial for The Bricks UI with 12 Grid system.

    Reply
    0
  14. smili Dec 31, 2:22 pm

    will u pls provide me some links to understand from scrach…i know a little bit of how to use photoshope and dreamweaver…i want to learn from scrach..pls help me dude..

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters