Creating a site design using Photoshop

If you want to create your own web page, understand how to make a site in Photoshop. Adobe Photoshop is a graphic editor. It is possible to draw layouts and their individual elements. This is quite a long and complicated process. Over the years, web designers have been learning how to design templates and lay out web pages on them. But a simple layout can collect any person. Only basic Photoshop knowledge and fantasy are needed.

In Photoshop to draw a simple site design even a novice can

From the first time you are unlikely to get a page like the design masters. But you can draw an attractive and uncomfortable service.

Little about creating sites

Decoding of some terms.

  • CSS (Cascading Style Sheets) and HTML (HyperText Markup Language) are computer languages ​​used to create web resources. If you open the source code of any page on the Internet, there will be HTML tags.
  • Layout - layout and installation of materials from the layout, turning it into an html-template. It depends on how the objects are arranged, whether they look beautiful in the overall composition, whether it is convenient to read the text and the like.
  • Layers are part of the layout. Together they make up the big picture. But they can be edited and moved separately from each other.
  • The body is the place where the content is located. There may be a background around it.
  • Frame (Frame) - the page element. A block with some information, picture, form.

Make a stunning site from scratch can only be a professional. To do this, you need to understand web design and know HTML. Since the finished layout must still competently impose.

But there are more simple ways. There are online services and programs that automatically convert .psd (Photoshop file format) to HTML and CSS. You just have to correctly assemble the template.

To use Photoshop it is not necessary to be an artist and to understand all the options of the program. But if you first started it and do not know how to insert text, draw a geometric shape, duplicate a layer, change color or select an arbitrary area, you should start with something simpler. To make a layout in Photoshop, we need at least initial skills in working with the utility and an understanding of basic functions (how to draw a line, put a guide, select a font, and the like).

General information about network services is also useful. The site can be characterized by the following criteria:

  • Single page. All elements, content, all content of the resource is in one place. On one page. To view the contents of the service, do not click on the links or open new tabs. At the same time the site itself can be arbitrarily large. It will fit a small advertising brochure, and a huge 600-page novel.
  • Multipage. Accordingly, includes many pages. These can be, for example, “Home”, “Forum”, “Guestbook”, “Answers to frequently asked questions”, “Contacts”. For each of them you need to do a layout. You also need navigation and a site map: a separate section with links to all parts of the service. So that the user can quickly find the bookmark he needs.
  • "Rubber". Changes the size depending on the screen resolution. Stretched along with browser window. We must calculate in advance what the site will look like. If with a width of 1300 everything is displayed normally, then in 900 pixels a part of the article may “go” beyond the frame borders, the images will not stand up as it should, and the flash-animation will close the input form.
  • Fixed. The body of the site does not change the size. The easiest and most practical option. To make the page look solid, and when expanding the window there was no “empty” space at the edges, you can make a rubber background.

Layout

First, decide what design you need. It is not enough to simply "imagine", and then arrange in Photoshop. Must be a clear view. Draw a pattern on plain paper. No need to redraw every picture. Enough scheme: a few rectangles and circles, which conventionally denote the elements of a web page. Think about how the frames will be located, where it is better to put a logo, where to place information for visitors.

See examples of pages on the Internet. Think which ones you like and why. Whether it is a convenient arrangement of frames, pleasant colors or an interesting approach to the design. Copy someone else's design is not worth it. It is enough to draw inspiration out of it. After that you can figure out how to draw a site in Photoshop.

  • Create a new document (File - New). Dimensions are selected with the calculation on small monitors or low resolution: 1024 × 720 pixels. This is the width of the "information" part, and not the whole picture. If you want a page of 1100 pixels, then you need to make a document with a width of 1300 pixels. The length, in fact, is not fixed - it depends on how much content you want to place on the resource. These are recommendations, not rules. You can build a large layout if you want.
  • Turn on the ruler. Press Ctrl + R or go to the View menu - Rulers. This is a measuring scale. She appears outside the picture. Without it, you will have to estimate the size and distance "by eye", which does not very well affect the final result. You can configure this function in the Edit - Settings - Units of Measurement and Rulers menu. There it is better to change centimeters per pixel in order to work with one parameter, and not to calculate how many points in one inch.
  • You should also activate the grid. View - Show - Grid or Ctrl + E (you can also turn it off). This is a kind of analogue of a notebook in a cage. In Photoshop, vertical and horizontal lines will be displayed. They will not appear on the drawing itself. They can be seen only when editing. This function is needed to evenly arrange the elements of the template. Someone more convenient to work with the grid, someone without it. It is best to turn it on if you are making a site for the first time.
  • To configure it, go to Edit - Settings - Guides, Grid, and Fragments. There you can choose the size of the cells, as well as the color and type of lines (solid, dotted, out of dots).

An example of modern site design

  • Install the guides. Between them will be the main content resource - the fixed body of the site. And behind them - a rubber background. To do this, click View - New Guide. In the "Orientation" box, check "Vertical". In the field "Position" write the distance at which the object will be from the left edge. Focus on the scale of the ruler.
  • Two guides are needed - to the right and left of the page body. The distance between them should be a maximum of 1003 pixels for displays with a resolution of 1024 × 720. You can specify a different width. But large resources are inconvenient to view on small monitors.
  • Why 1003, not 1024? If the site needs to scroll down ("scroll") down, the browser will have a vertical slider to scroll. The size of this slider is approximately 21 pixels. If you do not take it into account, a horizontal scroll will appear. And the resource visitor will have to move the page left and right to see all the information.
  • The body should be in the center of the canvas.

These are preparatory stages of work. How to make a layout in Photoshop depends on your imagination and taste. Therefore, further will be only general recommendations of a technical nature.

  • First, your layout needs a background. It can be made independently or downloaded from the network. There are many resources with free textures. Do not put on the site images that are subject to copyright. Do not take a bright or contrasting background. It is better not to use textures with a large number of small eye-catching details. They will distract the visitor from the body of the page.
  • If you simply open the drawing in Photoshop, it will be on a new tab, and not added to the layout. Highlight the entire background. To do this, you need the keyboard shortcut Ctrl + A or the Selection tool (it is located in the left pane). Copy it and paste it into the template.
  • Also this option is available if you click Edit - Paste.

  • A new layer will appear in the list on the bottom right. Click on it with the right mouse button to see the possible actions. In the "Layer Options" menu, you can change its name. In the "Overlay Settings" are the basic image settings. You can make it glow, emboss, gloss, stroke, gradient. If you select an option, the changes will immediately appear in Photoshop. There is a set of ready-made styles. So from the standard texture, original design solutions are created. And do not draw anything extra.
  • The "Filters" button is in the menu bar. There you will find a variety of imitations (pastel, watercolor, pencils), styling, textures, sketches, highlights, blur.
  • You can choose a plain background. Color depends on your personal preference. But it is better not to make it black or poisonous. Suitable bedding and soft tones or transparent cold (for example, light gray, pale blue).
  • After the textures you can collect the site itself. Here you have the freedom to create.
  • To add some shape (line, square, oval), click on the corresponding button on the right. It will have the appearance and name of the object that is currently selected for drawing. For example, “Ellipse Tool”, “Polygon Tool”. In Photoshop, the number of shapes is limited. But they can be found on the Internet, downloaded and installed via the Edit - Set Management menu. In the Type field, specify which collection of objects you are loading.
  • In different versions of the program, these figures are called in different ways. Either by a button in the form of a small black triangle (it is on the right), or by a gear icon, or by the “Shape of dot” item (it is below the menu bar). Objects can be combined, grouped, make compositions of them.
  • To create a text frame, click on the button in the form of a capital letter "T". Then select the place where the characters should be located, click there and type what you need.
  • Each element is better to put on a separate layer. So it will be more convenient to move and edit, without “touching” the whole site. To add this object, go to Layers - New.

  • To project an image into a pre-selected area, first select it, and then open Edit - Paste Special. There will be “Insert instead” and “Insert outside” options.
  • You can transfer part of one picture to a new layer. To do this, select it, right-click on it and select "Cut to a new layer".
  • With shapes, captions and images the same options are available as with the background: effects, filters and so on.
  • In Photoshop, there are still many tools for drawing: brushes, pens, pencils.

You can make a quality resource even from simple geometric objects.

There are resources with free layouts. Load them in Photoshop and edit if necessary. It is easier and faster than drawing from scratch.

How to turn a layout into an html file?

You figured out how to create a site in Photoshop, and designed your first layout. What to do next? After all, it can not just upload to the hosting.

It can be given to the coder who will make a high-quality html-template. But there is another option. Use the services to convert the PSD file to HTML and CSS.

  • Psd2Html Converter. Paid online service. Quickly convert Photoshop format to webpage template. With this resource, even from a poor-quality layout, you can create a decent site.
  • HTML Panda.
  • PSDCenter
  • 40 Dollar Markup.

Constructors

Layouts can also be collected on special sites. Usually there is a clear and intuitive interface. You simply assemble a template from various parts. Some elements are best drawn in Photoshop. So you get the original design. Despite the fact that it was created on the constructor.

In Photoshop not only draw. It collects layouts for sites. In most cases, this is done by the masters. But a simple template can make any person. Only basic knowledge of Photoshop is needed.