Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Jackie Jen
Jackie Jen
2,723 Points
Posted by Jackie Jen
Jackie Jen
2,723 Points

How to create a PSD files from a website layout

I have been searching how to create a PSD files. But then it seem so easy that using adobe photoshop to save an image to psd file. what does PSD file used for developer in create a website?

Let said i create a website. How can i create a PSD file image that exactly same as my website layout?

2 Answers

Fernanda Salerno
Fernanda Salerno
2,733 Points
Fernanda Salerno
Fernanda Salerno
2,733 Points

Hey Jackie,

You can start your design work on Photoshop, Sketch, Illustrator, etc. But, for this layout works on the web, you need the code like HTML, CSS, Javascript, etc.

A basic workflow is divided on:

1- Definition of the project (What is, goals, constraints, etc) 2- Ideation(Sketchs, wireframes, prototypes) 3- Visual Design (Photshop enters here) 4- Code (Front-End and Back-End)

Here's some links to help you:

What is a PSD? The First Step to Web Design http://thesiteslinger.com/blog/what-is-a-psd/

Photoshop Foundations http://teamtreehouse.com/library/photoshop-foundations

Designing an Elegant Blog Layout in Photoshop https://webdesign.tutsplus.com/tutorials/designing-an-elegant-blog-layout-in-photoshop--cms-20972

Dani Ivanov
Dani Ivanov
10,732 Points
Dani Ivanov
Dani Ivanov
10,732 Points

You do not put a PSD file on you server. A photoshop file is used simply as a help tool when writing your website code. The files used for your website are with a .css, .html, and .js extensions. I hope that is a good answer as I don't really understand your question. Perhaps if you clarify it for me?