PVM Garage » CSS

Design a One Page Portfolio Site in Photoshop – Part 2 Coding

Mohammad Jeprie — Sat, 26 Nov 2011 01:52:24 +0000

This is second part of designing a one page portfolio tutorial series. In the first tutorial, we had created a simple and elegant Portfolio PSD mockup. Now, we’ll convert the PSD to a HTML5 and CSS3 with some jQuery goodness. Make sure you have read the first tutorial and make the design in Photoshop, or you can just grab the final PSD mockup from there.

Take a look at our PSD mockup first. Our portfolio design has a simple one column page with a large white-space, big and bold header, a slider to put some portfolio items, and a contact form on the footer. We’ll play around with some fancy CSS3 effects like text-shadow on the header, semi-transparent background on the navigation menu and border-radius on the portfolio slider and contact form. We’ll also use a jQuery slider plugin named slides.js to create the slider. Let’s get started!

Final Result

Click on the image below to see the final design in HTML.

Step 1: File Structure

Create a new directory in your computer and give it a name whatever you like. Inside this newly created directory, create another directory called img to put all the images that we extracted from PSD file.

Grab Slides.js and place it inside the directory.

Step 2: Exporting the image files from PSD

Before we started coding, we need to export all the necessary images from the mockup such as background, portfolio items, and social media icon.

1. Background

Activate Zoom tool and click several times on the canvas to maximum magnification. Create a selection using crop tool. Click menu File > Save for Web and Device (Ctrl + Shift + Alt + S) and save it as bg.jpg in the img directory.

2. Slider Background

Head over tothe slider area and make a selection on the portfolio background using crop tool. Save it as detail_bg.png.

3. Portfolio Items

Create selection around the portfolio image and save it as items1.jpg. Grab the other image by switching the layer visibility on the item and save each item as items2.jpg and items3.jpg.

4. Slider Navigation

First, convert the circle shape to smart object by right clicking on the layer and select Convert to Smart Object. This way, we can select the layer and its layer styles. Create guide around our newly created smart object. Make selection with crop tool along the guide. Hide background layer to get a transparent background and save it as PNG-transparent file named nav.png. Repeat this step on the active state circle shape, save it as nav_a.png.

5. Separator

Merge all layers inside layer group “separator” by right clicking it and select Merge Layers. Then create guide around the merged layer. Create selection with crop tool and then hide the background layer. Save it as separator.png.

6. Social Icon

We will export all social icons as a single image instead of separate images, we’ll then use CSS sprite to separate the icons in the webpage. Shift the position of each icon until there are no gap between each icon, then create selection with crop tool after hiding the background layer. Save it as social.png.

7. Submit Button

Merge submit button shape and text into a single layer and then create guide around the new layer. Create selection with crop tool after hiding the background layer and save as submit.png.

Step 3: Basic Structure

We’re done with the images, now grab a coffee and let’s start on the coding. Open up your favorite code editor and write our first HTML markup.




	
	My Awesome Portfolio

Our HTML begins with typical document structure consisting of doctype, link to stylesheet file, link to jQuery slider and jQuery library from Google API, and an HTML5 hacks script for IE. We’re also embedding a google webfont, Lobster, with WebFont loader (personally I like this method because I can adjust how things look during and after font loading by defining CSS rules).

The CSS style begins with a simple reset to get rid the browser default style, and then some basic setting such as typography, color and background image.

/* ----- Resetting CSS ------ */

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/* ----- Layout ------ */

body {
	background:#c6c6c6 url(img/bg.png);
	color:#444;
	font-family:helvetica,arial,sans-serif;
}

Step 4: The Navigation

Our first element in the markup is the top navigation. We’ll use

element as our navigation wrapper and then place the menu as an unordered list. Since our page is just a single page, the menu works as a shortcut to jump to element that matched with the ID’s that we specify in the menu.


	
		Home
		Portfolio
		About
		Contact

Step 5: CSS

As in the mockup, our navigation menu has 37 px height and 5 px border in the bottom with a semi-transparent background. We’ll also make the navigation position static, to keep the navigation at the top of page when we scroll down the page.

nav#top {
	background:rgba(68,68,68,.5);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#55444444', EndColorStr='#55444444'); /* IE specific hacks to make transparent background */
	background-clip:content-box;
	border-bottom:5px solid rgba(255,255,255,.5);
	box-shadow:0 0 5px rgba(0,0,0,.5);
	font-size:16px;
	height: 37px;
	line-height:37px;
	position:fixed;
	top:0;
	width:100%;
	z-index:100;
}
	nav#top ul {
		list-style:none;
		margin:0 auto;
		text-align:center;
		width:780px;
	}
		nav#top li {
			display:inline;
			padding:0 20px;
		}
		nav#top a {
			color:#fff;
			text-decoration:none;
		}

Step 6: The Header

The next element is the header and a short introductory sentence. The syntax is pretty simple, we’ll use a

element to wrap the title and tagline, and then use

on the introductory sentence.

John Doe

designer by day, superhero by night

I am a web and graphic designer. I design interface for web and mobile apps.

Our site title design have a nice 1 px border and text-shadow to make the title stand out. Fortunately, we can make this effect with just using CSS3 text-shadow. We’ll also use text-shadow to make letterpress effect on the rest of the design.

header {
	padding:102px 0 130px;
	text-align:center;
}
header h1 {
	font-family:'Lobster', Georgia, Serif;
	font-size:64px;
}
header h1 a {
	color:#fff;
	text-decoration:none;
	text-shadow:
		3px 3px 0 #444,
		1px 1px 0 #444,
		-1px 1px 0 #444,
		1px -1px 0 #444,
		-1px -1px 0 #444
	;
}
header h1:hover {
	opacity:.8;
	filter:alpha(opacity=80);
}
header h2 {
	font-size:14px;
	line-height:2;
	text-shadow:1px 1px 0 #fff;
}

p.hello {
	font-size:30px;
	font-weight:bold;
	line-height:1.2;
	margin:0 auto 100px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
	width:620px;
}

Step 7: The Slider

Now, we move to Slider section. We’ll use a

as a container of the slider. Inside this container we’ll place an

title and a series of our slider items. Don’t forget to add separator before and after the slider.




	Featured Project
	
		
			
				
			
			
				News Icon
				Icon Design
			
		
		
			
				
			
			
				Go Design
				Logo Design
			
		
		
			
				
			
			
				Desain Digital
				Web Design

To make the slider works, we’ll need to initialize Slidejs by adding a script inside the element. Place this following script below the Google Webfont script.

$(function(){
	$("#portfolio").slides({
		container: 'slider',
		slideSpeed: 500,
		play: 4000
	});
  });

Let’s add style to the slider. Our slider container will have an 8 px rounded corner and a little shadow. We’ll also add a 70 px top and bottom padding to create large white-space. Slidejs automatically generate pagination to the slider, so we also need to style them using graphic circle from our PSD.

.separator {
	background:transparent url(img/separator.png);
	display:block;
	margin:0 auto;
	height:28px;
	width:780px;
}
section#portfolio {
	margin:0 auto;
	padding:70px 0;
	width:778px;
}
h3 {
	font-family:'Lobster', Georgia, Serif;
	font-size:36px;
	margin-bottom:25px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
section#portfolio .slider {
	border-radius:8px;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	display:block;
	height:414px;
	width:778px;
	margin-bottom:30px;
}
section#portfolio .items {
	background:#444;
	border-radius:8px;
	border:5px solid #fff;
	margin-bottom:30px;
	height:404px;
	width:768px;
}
section#portfolio .items figure img {
	display:block;
}
section#portfolio .items .details {
	background:#7e7e7e url(img/detail_bg.png);
	height:49px;
	line-height:55px;
}
section#portfolio .items .details a {
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
section#portfolio .items .details a.name {
	float:left;
	margin-left:10px;
}
section#portfolio .items .details a.category {
	float:right;
	margin-right:10px;
}
ul.pagination {
	list-style:none;
	text-align:center;
}
ul.pagination li {
	display:inline-block;
}
ul.pagination li a {
	background:transparent url(img/nav.png);
	display:block;
	height:18px;
	margin:0 5px;
	width:15px;
	text-indent:-9999px;
}
ul.pagination li.current a {
	background:transparent url(img/nav_a.png);
}

Here’s a preview of our current work.

Step 8: About Section

We’re done with the slider, so let’s jump to About Section. We’ll use

again as the wrapper of the content and place some text and social media link inside the wrapper. Don’t forget to place separator after the section.


	Meet The Hero
	I'm John Doe, a web & graphic designer. As a web designer, I am best known for making some kickass website. As a graphic designer, especially icon design, my work was used by one of the largest social network on earth, Twitter.
	If you want to know more about me, you can reach me via contact form below or one of these social network.
	
		Facebook
		LinkedIn
		Twitter
		Last FM
		Blog

We’ll transform the social media link into a nice icon that we have created before. Since the icons is wrapped in a single file, we need to configure each icon position to match the correct link by modify the background position. This method is called CSS Sprite.

section#about {
	margin:auto;
	padding:70px 0;
	text-align:center;
	width:460px;
}
section#about p {
	font-size:14px;
	line-height:18px;
	margin-bottom:18px;
	text-align:center;
	text-shadow:1px 1px 0 #fff;
}
.social {
	display:block
}
.social a {
	background:transparent url(img/social.png);
	display:inline-block;
	height:30px;
	width:33px;
	text-indent:-9999px;
}
.social a:hover {
	opacity:.7;
}

/* CSS Sprite */
.social a.fb {
	background-position:0 0;
}
.social a.linkedin {
	background-position:133px 0;
}
.social a.twitter {
	background-position:100px 0;
}
.social a.lastfm {
	background-position:67px 0;
}
.social a.wp {
	background-position:33px 0;
}

Step 9: Contact Form

Our last element is the contact form. As usual, contact form is just a series of some input text, a text area and a submit button wrapped in a

container.


	Drop Me a Line
	
		
			Your Name
			
		
		
			Your Email Adress
			
		
		
			Message Subject
			
		
		
			Message Text

Each form will have a rounded corners and dark grey background, while the submit button is replaced with graphic image that we exported from photoshop earlier.

section#contact {
	margin:auto;
	padding:70px 0;
	width:460px;
	text-align:center;
}
section#contact form div {
	display:block;
	margin-bottom:35px;
}
section#contact form div label {
	display:block;
	font-size:14px;
	margin-bottom:8px;
	text-shadow:1px 1px 0 #fff;
}
section#contact form div input {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:0 5px;
	height:35px;
	text-align:center;
	width:290px;
}
section#contact form div textarea {
	background:#444;
	border-radius:5px;
	color:#fff;
	margin:auto;
	padding:5px;
	text-align:left;
	height:240px;
	width:450px;
}
section#contact form input {
	background:transparent url(img/submit.png);
	cursor:pointer;
	display:block;
	margin:auto;
	height:38px;
	text-align:center;
	text-indent:-9999px;
	width:145px;
}
section#contact form input:hover, section#contact form input:focus {
	opacity:.7;
}

Step 10: Final Touch

Actually, our portfolio is already done and works well. But we still need to add one final touch to make our site more fancy. We’ll add a jQuery scrolling effect to make a smooth scrolling on our navigation menu. Place this script inside element.

$(document).ready(function(){
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,")
		&& location.hostname == this.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target
			|| $('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body')
				.animate({scrollTop: targetOffset}, 1000);
				return false;
			}
		}
	});
});

Final Result

We’re finally finished coding this portfolio. I hope you enjoy the tutorial. Click on the image below to see the final design in HTML.

Download Link

Download One Page Portfolio (HTML)

Worlds top 10 fashion brands and their websites

Steve — Mon, 19 Jul 2010 12:00:20 +0000

Recently I was working on a design project for a high-end fashion company. I thought it would be great inspiration for everyone to have the top 10 fashion brands in the world presented PVM Garage. View the designs below for excellent inspiration on your next fashion design project.

Chanel

Polo Ralph Lauren

Louis Vuitton

Givenchy

Tommy Hilfiger

Juicy Couture

Lacoste

Gap

Brooks Brothers

Interview with CapsisMedia.com

Steve — Wed, 07 Jul 2010 23:15:06 +0000

Recently we had the pleasure of meeting with the owner of Capsis Media, a custom website design and development company based out of Toronto, Canada. The company caught our attention for their quality and pricing for custom websites. The “short” interview took nearly 1 hour, however we are thrilled to have had the opportunity to talk with the owner.

Who is Capsis Media?

Capsis Media is a company, which I established back in April 2004. The company has been through several transformations with the ultimate goal of becoming a world class website design and development company mainly catering to the small business, personal and outsourcing market. We’ve dedicated our lives to growing this growing from zero to six figures in a short period, and been successful at our efforts. Capsis has grown to become a world class company in the development sector.

Why would someone choose Capsis Media?

Simple… we get done what no one else can. What do I mean by that? Well we have fully trained staffed that is capable of producing custom designs, php programming, graphic design, marketing or hosting solutions. If you provide us with the opportunity to quote your project we will provide you with a very competitive price which 99% of competitors can not match, and deliver quality far beyond your expectation. Let us quote your project online, free! with no obligation to order, click here!

How did you start the business?

6 years ago, I started the business with a partner. Myself being the sales brain and my partner being the designer/developer. After our company was able to secure more than a few orders, my partner wasn’t able to keep up. After butting heads, I decided to acquire the company solo and head off on my own to form Capsis Media. Since then, I’ve acquired the most talented staff in website design and website programming in the world. Since the split with my partner (5+ years) I’ve focused on growing the business with one mind frame… deliver quality websites at affordable prices… and it has worked.

What do you least like about the business?

I’m involved in a few businesses; my main line of business is real estate development. With Capsis, it has provided me with the freedom to live life as I’ve always wanted to, going anywhere in the world I desire, yet running a successful online business at the same time. Capsis Media doesn’t have any down falls, however my lifestyle does, considering I’m involved in 3 full time businesses, it does get very hectic sometimes.

Do you run your business 9 to 5?

Absolutely not! I don’t think any successful business now a days can honestly say they do. I run my business 24 hours per day… you ask how? From my smart phone! My Blackberry has been the best office tool in my life, I’m able to respond to staff, clients and keep projects up to date from the comfort of my blackberry from anywhere in the world. The great thing about an internet business is that if you structure the business correctly, you can have the ability to work only a few hours per day from your smart phone, while automating everything in the back end. A lot of people ask me how I do it and I say, contact me I’ll be happy to share my experiences with you!

Your based in Canada, does that have any down falls?

No, the only downfall is time zones with my clients. However, most clients realize that we’re based in Canada and don’t have a problem with the time difference in response times.

What is the one sales pitch you can leave us with?

Give us a try! Capsis Media has a fully staffed team of designers and developers that can produce any website you desire. Our one goal is to ensure we can produce the best service within your budget. Visit us online at capsismedia.com and we’ll be pleased to provide you with an online no-obligation quote.

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Piervincenzo Madeo — Fri, 23 Apr 2010 15:48:04 +0000

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.
Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, ‘Houston, we have a big problem!’ We should create a working web design. Actually the common routine requires the following main steps:

Step 1: understand the theme and the topics of the website and decode the client’s requests
Step 2: choose the right style and sketch your ideas
Step 3: draw a clean and clear wireframe to summarize the structure of the website
Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

How HTML 5 And CSS3 Can Change Web Design

If you were to ask me which is the greatest change that HTML 5 and CSS3 could bring about, I’d focalize my answer on the use of the image editors. Sure, we can talk about the power of the semantic web or about the reduction of the plugin-based rich internet applications (such as Flash or Java); but as web designer the first, big, change is just within my design process. In fact the new features of CSS3 allow us a complete control of some properties able to create nice effects without the use of jpgs, pngs or gifs. New properties of CSS3, such as box-shadow, avoid creating pixel-perfect images to make precious your web design.
For a long time I’ve thought about Photoshop (or other image editors) ‘it is an essential tool to develope a website.’ Actually I’m changing this point of view to ‘it is an useful tool to develope a website.’
From the routine described in the introduction of the article it’s evident how the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3, a question hires my brain: ‘do you really need a psd mockup?’
The answer, in my opinion, is ’sometimes.’ When you have a clear concept and a good wireframe you may code instantly an HTML-based mockup for a browser; to save your time (and your money) avoiding an almost-absolete step.
Note: I am not saying that you don’t need Photoshop. I am just saying that, sometimes, a psd mockup could be a superflous step, however you could need an image editor to create stunning graphic details.
Megan Fisher explains in wonderful way her point of view about HTML-based mockup with her article on 24ways titled “Make Your Mockup in Markup.”

Quick Overview On HTML 5

HTML 5 borns to improve interoperability and to reduce development costs for websites and web applications. It is not a W3C recommendation yet, and for this reason you have to read information contained in the article like a simple overview on how we might work with new technologies in the (next) future.

HTML 5 is aimed to create a comprehensive and all-in-one markup language for front-end development, able to provide a qualitative information on the different elements of the page; all this introducing new media elements (and their attributes), such as and , and semanthic elements (that reflect modern usage of the website), such as

and