DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • 6 Easy Ways to Start Coding Accessibly
  • The Best Programming Languages for Kids
  • How To Create a Resource Chart in JavaScript
  • HTML5 < time > element: returned!

Trending

  • Role of Cloud Architecture in Conversational AI
  • Build Your First AI Model in Python: A Beginner's Guide (1 of 3)
  • Building AI-Driven Intelligent Applications: A Hands-On Development Guide for Integrating GenAI Into Your Applications
  • Article Moderation: Your Questions, Answered
  1. DZone
  2. Data Engineering
  3. Databases
  4. Coding a .PSD File to HTML – A Simple and Basic Guide for Beginners

Coding a .PSD File to HTML – A Simple and Basic Guide for Beginners

Learn to transform your PhotoShop .PSD file into HTML/CSS for your website to preserve the graphic design.

By 
Jack Calder user avatar
Jack Calder
·
Jul. 17, 15 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
2.1K Views

Join the DZone community and get the full member experience.

Join For Free

Want to transform your pixel-perfect .PSD file to well-structured HTML format? Well, then you can choose to code your PSD to HTML and CSS files formats. If you're a beginner, you may find it hard working with the coding part. This guest post will work as a basic guide for beginners that will tell them how to move code from .PSD successfully to HTML.


Step 1 - Get Your .PSD Shared

So, you have a pixel-perfect .PSD with heavy design, you'll probably have to export design elements from it. Let's first start with the most basic element that is background. When working on the background, disable all other layers and draw a marque around it. For doing so, right-click (Windows) and choose “Show/Hide All Other Layers” option in the photoshop tool. And then, hold down Alt (Windows), to activate the move tool to drag the selection you want to copy. Once the move tool is activated you can move your selection from your this active image window to the nice destination image window.

A word of caution, since most of the websites today are usually created with parallax scrolling effect, it's important to ensure that your design is wide enough hat it doesn't gets cropped when viewed on large screen. And so, make sure to set the width of your design to 2200px which is the sufficient size that can easily fit to even larger screens.

Now that you've created a large-size image, you'll have to ensure that the quality of the image is not affected, and so it's essential to choose the compression settings carefully.

Now continue to perform the same steps for individual page elements using the marquee tool (as described above for the background). Next, press Ctrl+Shift+C to copy and merge the elements, and then paste them in a new document from where you can export them. Especially, elements like your site logo, profile images and small navigation icons needs to be saved as individual graphics. Next, choose the right file type and compression setting for each of those item. Once you've saved all the images, you’ll have to move onto the HTML section.



Step 2 - Working With HTML


Now that you've carefully sliced each element of your .PSD, you'll have to give them a structure using HTML by writing the following code:

//*

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-9" />

<title>My Company Logo</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

</div>

</body>

</html>



When structuring the HTML you'll have to consider 3 main elements: the header, the footer and the content. You should keep in mind the better things of converting
PSD to HTMLfiles so that proper hand-coded HTML code can be prepared.



1. The Header

Every web design contains a header that usually contains the logo and the main navigation menu. Let's see how to write structure for the header:

<div id="header">

<h1><a href="#">Our Company Logo</a></h1>

<ul id="nav">

<li><a href="#" class="active">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>



As you can see the above snippet, the header section contains your logo and navigation menu divided into different sections: Home, About, Portfolio and Contact defined in an unordered list.



2. The Content

Next comes the most crucial part that will help you spread your brand message to your target audience far and wide – that it your website content. While structuring the HTML you'll have to write structure for the content that is contained within a div along with content ID. You can choose to write content in the form of large graphic images. Below is the code that will help you better understand how to structure for the content:

<div id="content">

<div id="services">

<ul>

<li><a href="#"><img src="images/services-1.jpg" alt="The main Heading goes here" /></a></li>

<li><a href="#"><img src="images/services-2.jpg" alt="Sub-heading" /></a></li>

</ul>

</div>



Let's say, you wish to segregate the design into two columns. In the first column you want to add a featured video (which could be a Youtube video or a vimeo video), which is followed by the title and description. Below is the code snippet for the first column:

<div class="column">

<h2 class="featured-video">Featured Video</h2>

<div class="video">

<object width="340" height="205" type="application/x-shockwave-flash" data="http://xyz.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1">

<param name="allowfullscreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="movie" value="http://xyz.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" />

</object>

</div>

<h3><a href="#">New Design Blog Launched</a></h3>

<p>This is the dummy text</p>

<p class="btn"><a href="#">See more videos here</a></p>

</div>


In your second column, you can define any upcoming events with date and a little description of the events or programmes.

<div class="column">

<h2 class="events">Upcoming Events or Programmes</h2>

<dl>

<dt>4 <span>Dec</span></dt>

<dd>

<h4>Launch of New Website</h4>

<p>This is the dummy text</p>

</dd>

</dl>

<p class="btn"><a href="#">See more events</a></p>

</div>

In the above code snippet, you can replace the text “This is the dummy content” with your original content. And also, you can define your upcoming events (if any) as per your own requirement.


3. The Footer

Now it's time to close the HTML with the footer. The footer usually contains a simple back-to-top link. However, you can also choose to add navigation menu to the footer as well if you wish.

<div id="footer">

<p><a href="#header" class="back-top">Back to top</a></p>

</div>

</div>

</body>

</html>



Step 3 - Let's Add Style to the CSS

Once you've completed writing your HTML structure, next comes the major part of styling your CSS. This step will ensure that the elements of all your HTML sections: the header, the content and the footer all are arranged in a clean and clutter-free manner. Styling the CSS involves putting all your design elements together in an organized manner. You can define the font-family and size of the text that will be displayed on your site. And then, you can add the main background image of your site, which is positioned at the top center (and don't forget to add not to repeat). These all things are required in the conversion of PSD to CSSfiles. You can see below:

/*
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {

margin: 0; padding: 0; border: 0;

}

body {

font-family: Arial Black, Times New Roman; line-height: 20px;

background: ##0099CC url(images/xyz.jpg) center top no-repeat;

}

/*


Now let's begin styling all the HTML sections one by one.


How to Style the Header Section?

When styling the header section, you'll first have to style the main container div, which is followed by the header and its sub-elements. Make sure to assign some padding to the header div, so as to create spaces at the top and sides in accordance with the .PSD concept.

#container {

width: 930px; margin: 0 auto;

}

#header {

padding: 42px 12px 0 12px; overflow: hidden;

}

#header h1 a {




display: block; width: 210px; height: 104px; float: left;

background: url(images/companylogo.jpg); text-indent: -9999px;

}

#header ul#nav {

width: 705px; float: right; margin: 35px 0 0 0;

}

#header ul#nav li {

float: left; list-style: none;

}

#header ul#nav li a {

display: block; width: 160px; height: 32px; margin: 0 0 0 25px; padding: 15px 0 0 0;

font-size: 23px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;

text-shadow: 0 4px 4px #444;

}

#header ul#nav li a:hover, #header ul#nav li a.active {

background: url(images/nav.png);

}


How to Style the Content?

Let's get started with styling the content background.

#content {

width: 910px; padding: 16px 16px 50px 13px; overflow: hidden;

background: url(images/img1.png);

border-radius: 1px;

-moz-border-radius: 1px;

-webkit-border-radius: 2px;

}


Now, let's style the features section by writing the following code snippet:

#content #features {

width: 935px; height: 455px; margin: 0 0 45px 0;

overflow: scroll; /* Changed to hidden if javascript enabled */

}




#content #features ul {

width: 2720px;

}

#content #features ul li {

float: left;

}


Now, let's see how to style the content of the two columns we created above. The columns need to float side by side, and so we'll add width (that easily fits inside the content div) and float:left property. Also, you'll have to style the video and upcoming events displayed in the those columns. You can simply add an image background to the video div to jazz up the embedded video, and adding some padding will help to aligns everything. Besides this, you can plan out on adding fancy layout to the events elements. For example, look at the following code that will help you style the columns content.

#content .column {

width: 410px; float: left; padding: 0 28px 0 28px; margin: 0 0 20px 0;

}

#content .column .video {

width: 395px; height: 230px; padding: 12px 0 0 15px; margin: 0 0 20px 0;

background: url(images/xyz.jpg) no-repeat;

}

#content .column dl dt {

width: 58px; float: left; padding: 13px 0 0 0; overflow: auto;

color: #f00; font-size: 64px; line-height: 32px;

}

#content .column dl dt span {

font-size: 16px; text-transform: uppercase; display: block;;

}

#content .column dl dd {

float: left; width: 354px;

}

}


How to Style the Footer?

You can style the footer area by simply adding the textured background, and the back-to-top link placed in the right position.

#footer {

min-height: 158px; overflow: hidden;

background: url(images/footer-xyz.jpg) center 0 no-repeat;

}

#footer p a.back-top {

float: right; margin: 12px 20px 0 0;

font-size: 12px; text-decoration: none; color: #0C090A;

}

#footer p a.back-top:hover {

color: #250517;

}


Conclusion

So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original .PSD concept.

HTML Element Coding (social sciences) Column (database)

Opinions expressed by DZone contributors are their own.

Related

  • 6 Easy Ways to Start Coding Accessibly
  • The Best Programming Languages for Kids
  • How To Create a Resource Chart in JavaScript
  • HTML5 < time > element: returned!

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!