PSD Conversions

The laptop is going to run away!!! — This is not me but I like that color of blue.(http://unsplash.com/photos/pzA7QWNCIYg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

This article is going to cover some steps that will make the process of taking a design or PSD (Photoshop design) much easier and hopefully, speed up the build process. Like anything, the more you do it the easier it becomes. These steps are pretty much in order and have worked for me but feel free to switch them up if you want. This is by no means the only way to do it and if you know of some other tools or tips please share! I will write it in number point form just incase you do wanna follow this exactly.

This article also assumes you have a basic understanding of HTML and CSS and have possibly built a small one pager or two.

  1. Find a FREE PSD — https://dcrazed.com/free-photoshop-psd-website-templates/ — this site worked for me and then last week it didn’t. Just poke around online for some if it doesn’t work for you
  2. Create an Adobe creative cloud account — FREE
  3. Check out all the cool features of adobe assets
  4. Download all assets/images/icons from your PSD to adobe assets — theres a blue loading bar in the top left of the screen. It may take a little to download as your PSD is probably a large file
  5. Click on Extract on the top left(underneath the title of your PSD). Wait for the app to load then go through the layers tab on the right hand side of Adobe assets and hit the blue download arrow for each asset(image, png)— wait for a sec and the image your png will appear in the Assets tab
  6. Save images as JPG’s and logos as PNG’s. If you are building a site specifically for a retina screen, download the images at 2x but otherwise, 1x or just JPG is fine
Screenshot quality not too great here sorry :(

Above I am naming the PNG. Notice how there are spaces between the words? DON’T do that. I went back after because i missed putting”-” between the words. I have been schooled many times for not using “-” or “_” for file names or folder names. Appropriate way to write file above: little-white-bike OR little_white_bike

7. With Adobe assets you can’t bulk download all the images to your local drive(computer or hard drive of choice) so you have to click that download arrow for each image or PNG on the right hand side under the assets tab

8. In general, I like to keep my downloads folder empty. What? IKR? The good people at hackerYou have trained me well. Side note — if you have no idea whats in ur download folder and you get scared and start sweating about the though of deleting all those files;DON’T. Create a folder — name it:2017-old-downloads- select them all and dump into that folder-save on desktop.

9. NOW — Create a folder for all of your PSD assets so you don’t have to download them to downloads again. You just cleared that folder out!

This is a start — You will eventually put these all in a ASSETS folder

Final structure looked like this:

If you download your images to a ASSETS folder you can just copy it to your project folder later on like I did here

10. Setup Gulp — what is Gulp? You don’t have to use gulp however I did for this project because I wanted to become more familiar with it. It’s a build tool. Makes testing your site much easier, saves and updates changes automatically and make viewing on mobile easy! Ok so you wanna use Gulp right? Check out this wicked article from one my instructors at hackerYou, Ryan Christiani.

If you want build this project using just CSS, SASS and HTML that is totally cool too!

11. If you are using gulp, you want to put your assets folder inside the public folder structure like this:

Same image as above

If you are using HTML/CSS only, keep your images and pngs in the assets folder like this:

12. I used SASS on this project. What is SASS? Check out this site. I wont go into any details in this article because I want to focus on folder structure and general setup BUT my friend Kait Sykes wrote a great article on SASS. Check it out!

Folder structure using SASS

If you aren’t using SASS, don’t worry about the image above :) — If you are using SASS, I went ahead and made a partial for each section of my site! You can do this as you build the site if you want as well


The Big one

13. One of the most time consuming parts of building a PSD conversion is minifying the images or assets. Why should you make the file size smaller? The smaller the file size, the quicker your page loads — the quicker your page loads, the more friends you have.

I use this FREE resizing site for all of my assets. There are alot of popups but its fast, free and does the job!

There is nothing worse than working on a site and every time you make an adjustment and save it, it takes like 3 seconds to load. Times 3 seconds by like 500 saves and thats like 4000 days wasted of YOUR LIFE, more or less…

The site is pretty intuitive to use. Upload an asset — make the image small if you don’t need to full size — if not, keep the asset the same size and hit resize. It will shrink the size of the file by ALOT!

14. When you hit download you will now get the file with prefix of something like rsz- in front of it. Take that file from your downloads — copy it into your assets folder-overwrite your existing file.

Make sure that when you are writing the file path names in your HTML or CSS, you make sure to add the rsz- in front of each image. You can by all means get rid of the new prefix but I like it because it lets me know which assets have been minified and which haven’t!

Text editor/HTML setup

15. It’s all about mobile so don’t forget to add <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> to the <head> of your HTML. This will ensure that no matter what device, your site will be optimized for mobile use. If you forget to put this, when you test our your site on a mobile device it will look at though your site is a desktop version and everything will be teeny tiny.

I updated my stylesheet file path to public/styles/home.css so there is NO confusion :)

16. Using google fonts will save load time and will ensure that whoever is viewing your site will be able to view it the way you intended it to look. Notice ABOVE I have added google fonts in the <head> tag as well.

How to find out what fonts your PSD uses

adobe assets

17. Adobe assets actually gives you the font family and if you click on text in the design it will show you what size or weight it is. Also, you can click on the arrow beside the font name and it will list all the sizes used AND highlight on the design which ones are which. BOOM!

18. Once you know your fonts go to fonts.google.com>type in search for fonts>use add button>copy paste link for HTML(shown in image above)

Paste highlighted link above into your HTMl head tag

What colors are used?

19. Have you heard of Adobe assets…?

Scroll to bottom of the styles tab on the left>click on a color>wherever that color exists on your design it will be marked by arrows. BOOM again.

20. If you are using SASS for your project I would recommend setting up your base fonts and colors now to save you time!

For the project I worked on there weren’t that many colors that I actually used for font or background. The majority of the palette was pulled from the color in the images which Adobes assets picks up on.

21. What saves time for me regardless if you’re using SASS or not is doing as many base styles as possible. Not sure why your lists are not aligned or your heading has padding? It’s because those elements come with baked in padding and margins. I also use a reset to make styling less trouble.

notice the .scss for SASS

I couldn’t fit all of the setup file in this shot and forget how right now but this takes off a bunch of baked in setting which makes it easier to build.

22. Go to your terminal and run Gulp. Make sure you are in your project folder first! Then, type ‘gulp’.

23. I used font awesome for this project but there are a bunch of other font sites you can use. For font awesome you will need to have the CDN in your <head> tag. If you have any questions about how to use font awesome, leave me a message below!

One thing I will say about using icons is that its much easier to style them if they all come from the same place ie all font awesome or all ico font.

Like, how many steps are there here?! This is just HTML and CSS!!!

The process we just went through can be time consuming — the first two times you do it it will feel long. Maybe 2 hours — maybe 5 hours if you don’t have all the links or you are going through this article step by step. DON’T WORRY. When you have a PSD conversion product due in two days and you realize that your page is halfway done and looks good but none of you pictures have been downsized and you need to go through uploading, renaming, deleting blah blah blah. Do the boring stuff before. This will save you time AND make coding it much more fun!

24. Once I have done these steps, I will then write my markup. I never do CSS before my HTML(markup) or at the same time however, the setup I just covered makes writing my HTML so much easier and when I go to write my CSS I can actually write it as opposed to downsizing images, finding font sizes etc…

25. One thing I like to do before writing my CSS or SASS is to use inspect tools in the browser as I go to make sure my HTML makes sense and I only have to make minor adjustments down the road

Above I just did some simple styling to test my HTML makes sense. I do this as I write my HTML as it saves me many hours by the time I write my CSS.

26. Once I’m done ALL of my HTML, I move on to my CSS or in this case SASS. Going through each section of the site which I have split up using partials.

Some general notes on HTML/CSS setup

  1. Your images will now look like they ate what Varuka ate in willy wonka when she was told not to but that’s ok. As you go through each section, you will be referencing the EXACT size of the image you need from Adobe assets and your images will all fall in place — they will start out like this though with img {width;100%};

2. Another great trick with images is to wrap them in a div or another element like an <li>. This way you can make the img full size and when you are manipulating the size of the image, instead of messing with the img properties, you only have to change the size of the element(container) it is in.

3. This article covers a lot of setup! Take your time. Do one or a few sections each time you sit down. Or break it up into a week even if you want. Unless you are in a rush, take your time through these steps.

4. I always reference my last PSD to see if there’s a way to clean up the Markup or make things easier when adding JavaScript into the mix.

5. Please leave your comments below or feel free to contact me if you have any questions or comments! This is my first long article and would love to get some feedback on the flow and writing style.

Thanks very much for reading and I hope this helped you a little in your PSD conversion routine!

Check out the PSD conversion I made using these examples here at: http://robinwatson.codes/biketheme-psd/

Like what you read? Give Robin Watson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.