Photoshop Question posted in
The official user guide can be found here.

When someone gives you a PSD and tells you to convert it into a web page – Photoshop

I was given a code challenge to do this. I’ve read and watched some tutorials about how to do it, and have run into a lot of stuff about how this “workflow” of PSD to HTML is dead.

In my opinion, it’s not that hard to bring a design to fruition with HTML and CSS but there’s definitely still some questions that linger when given this assignment without very specific instructions and lacking much practical experience in this realm. Here are some…

  1. Given that most websites are responsive and I assume that’s the expectation for new sites, should you take the pixel width and height of PSD layers literally and give them a fixed width/height? Or should you use some other approach such as measuring the relative width/height (like as a percentage) of a specific section?

  2. When is it appropriate or recommended to crop a portion of a PSD and include it as an image rather than drawing it yourself with HTML/CSS?

Tags:

2

Answers


  1. 0

    1.) make sure the site looks like it’s supposed to look in the psd. with tools like bootstrap at your disposal it’s easy to make it responsive. Fixed widths are never OK unless you’re using media queries to change them based on the window size. But don’t reinvent the wheel, again – tools like bootstrap exist. take advantage of someone else’s hard work.

    2.) Never. Never ever. The most important part of building a site is that it is accessible to all people it’s important that each element has what it’s supposed to ie alt and title tags for those with disabilities. Equally important, if not more, is that the page loads as quickly as is possible. CSS styles and optimized images(ie using a 1px bg image and repeating it, making sure it’s the right type of image for the situation, etc.) load way fast than just cramming images in a div to make it look right, plus an image cannot be responsive the way markup can be.

    Obviously these are mostly opinion based, so this answer might get shut down. But the real answer is make something that works great regardless of resolution, is made for all users, and don’t be lazy and take short cuts.

    Login or Signup to reply.
  2. 0

    1) My advice is to go responsive. Substitute every static element you see in Photoshop with a percentage. How do you know the percentuage of a static element? You need to calculate it. I give you an example, if your Photoshop website has a max-width of 1000px, and you have a column of 320px, you’ve got to divide 1000/320 = 32%.

    Also, always start with a “Mobile First” attitude, meaning that you should build the website from small to large, so that more complex styles are only visible on larger screens sizes, in this way you don’t confuse mobile users. Learn to use EM and REM units instead of pixels (be aware that REM are not supported in IE8), this will give you the ability to scale your website easily if in the future you want to change it.

    Super important: apply box-sizing: border-box to all the elements in the page, this will make your life easy because if you apply padding or margin to an element, it will not get bigger than the percentuage you’ve specified. 

    *, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

    2) It is simple. Crop and use an image only when you are 100% sure that it can’t be created with CSS (for example if you need to add the logo or other bitmap-related graphics).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search