Tutorial: Take your minimalist web design from Photoshop to HTML
Takeaway: Ryan Boudreaux follows up on his tutorial for creating a minimalist layout in Photoshop by showing how to take that PSD file and turn it into HTML.
Following up from a recent tutorial on creating a minimalist website design using Photoshop, I am going to demonstrate how to take that design from Photoshop to HTML in response to TR member dougried's request. This is the first segment of three parts, which will take you through the process, step-by-step. The PSD file will be used as a roadmap for creating an HTML template file and the associated stylesheet that will fit the look and feel of the original PSD. The PSD serves as a "smart" wireframe, as it contains the cues we will use for building the foundation and styling with CSS, CSS3 and several HTML5 elements. All files needed for this demonstration are included in the download (zip file).
Before we get started, here are the two parts of the original tutorial:
- Tutorial: Create a minimalist web design layout using Photoshop
- Tutorial: Add finishing touches to minimalist web design using Photoshop
Separating the elements of the original PSD file
First, we need to un-compress the download file to a working location, and then open the PSD file (Minimalist_Template_Final.psd) in Photoshop as shown in Figure A below. Now, we can start with our dissecting of the background images. (The PSD file will also play double duty as our wireframe as we begin creating our styles and code for the HTML.)
We want to organize our layout in such a way that it can be put into defined sections such as rows, columns, blocks, or tiles so that they can be rendered using the coding and styling. The text and images in the PSD layout are going to be added on top of the background layers and can be placed easily with styling and code.
Figure A
In Photoshop we will create several individual images of the main content and background section starting with separating the header section from the body, and then the footer section. The body background will be a separate container, and we will eventually create sections with HTML5 <section> tags in the coding to piece it all back together. The text and images in the PSD layout are added layers on top of the background layers and can be replaced easily with styling and HTML code. It is the background elements that will need to be separated, and in this first section, we will copy the "Background" layer with the gradient and save it as a separate gif file named background.gif.
Next, unselect all the other layers in the PSD file leaving the "Background" layer visible.
Then, save the file in your web images directory (web/images) using the Save for Web & Devices… selection as background.gif.
The screen capture in Figure B displays the background layer selection.
Figure B
Next, we will create a separate image for the web name and subheading. To preserve the translucent background of the text sections we will:
- Make the "Web Site Name" visible and make sure all other layers are hidden.
- Use the Crop Tool (C) to surround the headings and accept the horizontal selection, then save the image in your web images directory using the Save for Web & Devices… selection as headername.gif. See Figures C and D below.
- Make sure you "Step Backward" (Alt+Ctrl+Z) to get the PSD file back to its original state.
Figure C
Figure D
Next, the featured image will be cropped out and saved as a separate gif.
- Make the "bg" layer and "Image Bg" layer visible, and make sure all other layers are hidden.
- Use the Crop Tool (C) to surround the two background image layers and accept the selection, then save the image in your web images directory (web\images) using the Save for Web & Devices… selection as feature.gif. See Figure E and Figure F below.
- Be sure to return the PSD to its original state by using the "Step Backward" (Alt+Ctrl+Z).
Figure E
Figure F
Included in the original download file are two more PSD image files for the "Connected" and "Social" icon. I have converted the two original PSD files to gifs and saved them for your convenience, and they are in the web images directory (web\images) as Connected_Icons.gif and Social_Icons.gif. These two images are both displayed in Figure G below for reference sake.
Figure G
Now that we have the major pieces of the PSD broken down into specific sections, it is time to start creating some HTML code and then the styles, based on the wireframe layout. Below is the basic HTML code to get us started with an outline within the <body> tags of the document and it is saved as the web document index.html.
<section id="main">
<section class="container">
<header id="header">
<p>Header Stuff Goes in Here</p>
</header>
<section id="main_content">
<section id="left_sidebar">
<p>Left Column </p>
</section>
<section id="right_column">
<p>Right Column</p>
<section>
<img src="images/feature.gif" />
</section>
<article id="left_feature">
<p>Left Feature Article</p>
</article>
<article id="right_feature">
<p>Right Feature Article</p>
</article>
</section>
</section>
</section>
<footer id="footer" class="footcon">
<p>Footer Stuff Goes in Here </p>
</footer>
</section>
Next, we will start adding in the styles to bring the code alive as we transform the PSD layout file into a working web document. We will start with some basic styles just to get the header, footer, sections and articles defined, and we will tweak some of them as we move through the tutorial. The styles are displayed below and saved as the document styles.css. The 1 pixel solid red border is a temporary style for this step to show the container separations, which you will see displayed below.
/*CSS Styles */
body { background-color:#b9c7c7;
}
#header { border:1px solid red;
}
#footer { border:1px solid red;
}
.container { width:1020px;
min-height:1020px;
margin:0 auto;
border:1px solid red;
}
.footcon { width:1020px;
margin:0 auto;
border:1px solid red;
min-height:120px;
}
#right_column { margin-top:50px;
float:left;
top:0;
right:0;
width:610px;
min-height:700px;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#left_sidebar { margin-top:10px;
margin-left:50px;
float:left;
top:0;
left:0;
width:200px;
min-height:750px;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#left_feature { margin-top:50px;
margin-right:5px;
float:left;
min-height:250px;
overflow:auto;
width:280px;
}
#right_feature { margin-top:50px;
margin-left:5px;
float:right;
min-height:250px;
overflow:auto;
width:280px;
}
Figure H shows how our index.html renders as displayed in Chrome 17.09:
Figure H
Now, let's add in the gradient image into our "container" section for the background by adding these two lines to our ".container" style:
background-image:url(images/background.gif);
background-repeat:no-repeat;
Figure I shows the resulting change, rendered in Chrome 17.09:
Figure I
The update is subtle, but the gradient is now visible from behind the feature image.
This concludes the first part of the tutorial. I will pick up in the next segment with adding in more styles for the remaining images, creating a gradient style for the footer area, and adding in the content text and linking for the navigation and other features.
Get IT Tips, news, and reviews delivered directly to your inbox by subscribing to TechRepublic's free newsletters.
http://www.techrepublic.com/blog/webmaster/tutorial-take-your-minimalist-web-design-from-photoshop-to-html/1346?tag=content%3Bsiu-container
Geen opmerkingen:
Een reactie posten