I don't know it should be asked here or on freelancing.

Designing a webpage and do coding for webpage both are different tasks and need different skills. I have seen some coders saying that we can convert your psd into webpage. I also have seen some clients asking for web design and then they would ask for coding from someone.
There is also a platform for designers to work for clients where I would only get designing jobs. There were a webpage design category and when faq about this category, they say that I can only work on designing webpage not for coding.
As I mentioned "PSD" that means it can be done in Adobe Photoshop.

My question is, how can I design a webpage using Adobe Photoshop and what types of webpages I can design in?

can somebody provide complete road map for designing webpage in Adobe Photoshop. If I complete designing then how would I send final files to client.


2 Answers 2


As your design should just be a guideline, you can make every design you can imagine.

In ye olde days, people would slice up photoshop files into separate images and then use frames or tables to stick it back together as a website. This created bulky, non-responsive websites.

Fortunately, web design has developed. Every self-respecting developer should use a .psd as a guideline, an inspirational tool, rather than a 1-to-1 non-websitey copy of a website. He has to take into account the fluidity of the web, and extrapolate a design from the rigidity of your Photoshop document.

As a web developer, I advise you to take the following things in consideration:

Use the right fonts, and not too many

Use only standard fonts (Arial, Times, Courier etc) or webfonts for your design. Unless you are willing to pay big time, using Futura and other hotties like that is not an option. Luckily, the already vast amount of very nice webfonts is still growing every day. Pick one or two, no more. Using too many webfonts slows down your website. Keep in mind that every font-weight adds to the loading time!

Work hi-res

This might seem a bit counter-intuitive, keeping loading times in mind. Nevertheless, more and more devices have a huge pixel count per inch. Reducing the dimensions of an image is easy, but enlarging it looks ugly.

Work with vectors

Again, an odd thing to say when using Photoshop. Using vectors has it's advantages though. It makes for small file sizes, and it will look as intended on every screen resolution and pixel pitch. Placing them in your .psd is easy using Smart Objects.

Organize your layers

Give every layer a sensible name, and use groups to stick layers together. This greatly improves the workflow for the web developer, and is good practice anyway.

Use simple gradients

CSS (the thing that makes websites pretty) is capable of generating simple gradients in code. This has the advantage of not needing to load an image, and looks good however big or small the element becomes.

Do not expect the final result to exactly match your design

In theory, your developer could render a pixel-perfect version of your design as a website. In practice, this means that said developer wasted a lot of time creating a subpar website. Fixed dimensions and consistent rendering are luxuries web does not have. A good frontend developer will not copy, but interpret your design. Mind you, I am not advocating artistic freedom from the dev here, I am merely emphasizing that it is his/her job to convert your pixels into consistent usability.


If possible, get in contact with the people that transform your design into a real website. Ask them for feedback, be interested in their progress, try to come up with (design) solutions that keep you both happy.


It depends entirely on the client. If you're talking about a business client, they typically don't want a design, they want a complete product. They likely want to higher a firm that design and produces the web site.

If the client is another design firm or development firm, they may just want you to handle visual design, and they'll take care of production.

  • and how would I handle visual design?
    – Murtaza
    Jul 3, 2014 at 1:55
  • The platform I am working on is only letting me provide assets for webpage and idea for webpage design. How would I do this in Photoshop?
    – Murtaza
    Jul 3, 2014 at 1:55
  • 1
    @MurtazaA. I'm not sure I understand your question. What platform are you referring to? As for 'assets' in web design that typically refers to the images used with the markup and CSS (JPG, GIF, and PNGs)--all of which can be produced from PhotoShop.
    – DA01
    Jul 3, 2014 at 1:57
  • 1
    add information of sizes of images, supposed animations, and their position related information.
    – user8795
    Jul 3, 2014 at 2:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.