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. Here is the HTML I use to show a large JPG centered in a webpage: 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. 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. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.
You then get a HEX version of the color that you can use in your CSS mark up. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker. To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.įor dark text shadows, for example, 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). We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. I haven’t found a way around this yet! Layer styles for text shadow 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. 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?” This is awesome! Name Layers and Layer Groups to keep everything organizedĪ 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. 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. If you enlarge and reduce a bitmap logo you will soon see the quality affected.Īnother 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. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. 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. These are essentially vectors rather than bitmaps so later editing will be easier.
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. The magnification percentage can always be seen in Photoshop at the top of the document’s window. 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. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC).
You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R. (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. I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. In-depth Photoshop training here: Designing A Website in Photoshop and Illustrator Getting startedĬreate 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. Here is a course I created where I show you exactly what I do to design a website visual for a client in Photoshop. Here are a few tricks for creating website visuals in Photoshop. It is usually better to show a client what a website will look like before the development stage starts.
0 kommentar(er)
