Web Design Photoshop

It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

  1. Website Design Photoshop
  2. Website Photoshop
  3. Web Design Photoshop Tutorials
  4. Web Design Photoshop Free Download
  5. Design A Website In Photoshop

50 Free Web Design Photoshop PSD Templates in 2021. As well as being able to create your own designs, you can also download free, pre-designed web design PSD (Photoshop format) templates. And these are a great starting point for businesses or designers that are in a hurry or are operating on a small budget, or a fantastic method and opportunity for a novice web developer to learn new web design techniques. From Adobe Photoshop and Illustrator to XD, the powerful design and image editing applications in Creative Cloud make it the ideal toolkit for building web pages and apps. Discover all you can do — and overcome any learning curve — with beginner and expert tutorials. Make a low-fidelity design to define your website or app structure. Working in web design involves creating UI (user interface) elements—icons, graphics, wireframes, and mockups. Adobe Photoshop provides the capabilities needed to make these design elements transition smoothly and easily to production. In this course, learn how to use Photoshop for modern web design workflows. How to Design a website in Photoshop. In this video, I show you how to design a website in Photoshop step by step.-.

Here is a course I created where I show you exactly what I do to design a website visual for a client in Photoshop. In-depth Photoshop training here: Designing A Website in Photoshop and Illustrator

Getting started

Create a large Photoshop document, at least 1200 pixels wide by 900 pixels deep (this can be increased later with Canvas Size), RGB at 72 dpi.

I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R.

You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. Zoom in [Cmd(Mac)/Ctrl(PC)-plus] for greater accuracy. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document’s window.

Use vectors, Shapes and Smart Objects

Website Design Photoshop

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven’t found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

Lightroom photo editing online no downloading. For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

Presenting a web page design to a client

Website Photoshop

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home page visual number 1</title>
</head>

Photoshop

Web Design Photoshop Tutorials

Website design photoshop

<body style=”padding:0; margin:0; background:#fff”>
<div style=”margin: 0 auto; padding:0; height:1900px; text-align:center;”>
<img src=”home-1.jpg”/></div>

</body>
</html>

You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Web Design Photoshop Free Download

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.

Here is a course I created where I show you exactly what I do to design a website visual for a client in Photoshop.

In-depth training: Designing A Website in Photoshop and Illustrator

Design A Website In Photoshop

What about you?

What little tricks do you employ when creating the visual look of a website in Photoshop? Or do you use Fireworks or some other tool? Please put your excellent suggestions plus any queries in the comments section down below.