|
One of the most popular editors used for development of website design is Adobe Photoshop (or just Photoshop). This editor allows to achieve a lot of nice visual effects and realize practically any designer's idea.
In order to make website design in Photoshop you needn’t posses any painting skills, but you should have an idea of the basics of composition and color. You can “draw” website design in Photoshop with the help of a special graphics tablet (graphics pad) or using a common computer mouse; the choice will depend on the complexity of design elements.
Website design in Photoshop should start with development of a concept. First of all you should think out the arrangement of the elements on the page, determine the sizes of page blocks in pixels – i.e. develop the modular grid of the page.
A typical website design layout consists of several parts: a header, a menu panel, a content block, a footer. These elements are placed on a draft; the width and height of the draft equal to the estimated display resolution of the site users.
You should start creation of a website design layout with creating a new document in Photoshop. The width of the document is set in pixels according to the required display resolution, for example, 1024 pixels. The height of the document can be taken arbitrarily, because the page will “stretch” vertically in the browser itself if the height of its content exceeds the height of the computer display. Standard resolution of website design layout is 72 pixels per inch, the color model should be RGB, 8 bit.
Using the command View – New guide you can locate the page in accordance with the modular grid. It helps to achieve precise matching of the sizes of the draft and terminal document. Besides, you can use ready-made grids, that have been developed for various display resolutions. As a rule, such grids are offered by their authors absolutely free of charge.
The next step is creation of the page background. The background may be monochromatic, for that you should use the Paint Bucket Tool. Choose the Foreground option and fill the document area with the selected color. Besides, an image or a pattern can also serve as a background. If you want to fill the document area with a pattern, you can also use the Paint Bucket Tool; but in this case you should choose the Pattern option.
Now you can get to creation of the page elements. Most designers begin with the header – the top block of the page that contains the name of the site and its logo. You can choose any color and shape of the header, for example, you can make a rectangular header or a header with rounded corners; its color can match the background color or be contrasting. The width of the header is the same as the width of the document, its height is strictly fixed.
You can select the needed rectangular zone using the Rectangular Marquee Tool. By changing the Feather parameter of this tool you can set required rounding for the corners.
Then you need to create the rest of the page elements. The order of creation is optional. For example, you can start with creation of the footer – the area of the page that contains information about the site authors – and then switch to the menu and content areas. Each of these areas, as well as the header of your site, can have various shapes and colors – everything depends on the author's idea.
We can single out creation of buttons and icons for website design as a separate step. Depending on the concept of web design, they may be strict and business-like or, on the contrary, bright and merry. The buttons, as a rule, are created with the help of the Rectangular Marquee Tool. You can make the buttons with another, non-rectangular shape, with the help of the Pen Tool. The Pen Tool also allows to create different icons of arbitrary forms.
You can make inscriptions on the buttons and icons using the Horizontal Type Tool or the Vertical Type Tool. You can set any required font type, font size and text alignment in the tool options.
To carry on working with the website design, you should cut the ready template into parts. It is done to place the template into the table cells during making the html layout of the page. You should cut the template using the Slice Tool. The sizes of the pieces (slices) of the image should match the elements of the future html page.
Using the command Save for Web&Devices save the sliced image. Choose the file type HTML&images in the dialog box and save it under the name “index.htm” or “index.html”. Now website design template consists of index.html file and images directory. This directory contains sliced pieces of the design layout. If you need to edit index.html, you can use Notepad or any html editor.
The most convenient way to make website design in Photoshop is to assemble it like a meccano. For that you can use layers; arrange different elements on different layers, and it will be easier to move, merge and hide them.
If you use different filters, actions and plug-ins during working on website design in Photoshop, it will considerably accelerate the process. Package file processing, that is usually called just “actions”, helps to make working with several documents easier. The actions allow to apply several actions to a document at once by just one mouse click.
Plug-ins in Adobe Photoshop are special software components, that supplement the editors with new functions or modify already existing ones. The plug-ins also help to create visual effects for website design in Photoshop by just one mouse click.
How to change website design?
Photoshop helps not only to create, but to change website design. Photoshop tools help to erase and add elements, change their color and shape, arrangement on the page.
The need to change website design may arise from the need to make redesign of the entire site or its separate parts. For instance, if the company, that own the site, has changed the logo, it must be reflected in the new website design.
TAGS
website design,
website design in photoshop,
make website design in photoshop,
creation of website design in photoshop,
create website design in photoshop |
website design 
