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

• 5 minutes READ

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:

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

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

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

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><closeform></closeform><!-- 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. These images and movies can be loaded in a lightbox, you can use a 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.

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 Timbuc

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.

Posts by Valeriu Timbuc
🍪

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree