From PSD to XHTML: How cut a layout with Photoshop?
One of the most frequent when working on the web is the export of a layout from an image to XHTML + CSS. Unfortunately (and fortunately) there are still valuable tools to automate this task, so everything builds the skill and creativity of the developer. In this article we will see in the next few techniques to export and create the simplest possible way an entire layout, or “Your Inspiration Corporate”, produced by Sara under the heading “styles of web design”. Go!
There are several ways to slice a layout. The first is to use the tool “selection” to copy the selected frame into another Photoshop document and then save it. Work for small to medium size can also be a useful working method, but in the long run is very tedious and tiring.
Fortunately, Photoshop offers the very useful tool “Sections”, allowing “cut” the layout into several parts, specify the details of export and then save them in one fell swoop.
The tool “Sections”
Since this tool is not visible by default in Photoshop, you must click to select it, holding down the instrument “cutter” At this point a menu will appear, which will select the second item.
At this point, the cursor will become a cutter: You can start getting comfortable with the instrument trying to select an image area. The result will be more or less similar to the following:
As you can see, the image is divided into several panes, some of which have a small icon in the upper left: these boxes represent the different sections in which the layout has been divided. The pages with the colored icon in blue are those created by the user, which are complemented with other gray icon called “auto slices” in practice Photoshop creates portions to fill all the space not covered by sections of the user, so can always export the complete layout.
Since we are interested only in our pages, we disable the feature by clicking again on the button “Departments” and then selecting the third item,“Instrument selection sections. In the top menu of the tool, click “Hide sections automatic” only make visible our sections. During the “clipping” of the layout tool “Select sections” is very useful, since it allows you to resize and / or move sections we have created.
Once created our section, it is time to export. But first, a little ingenuity to improve the management of exported images: Right click on the section created, and then “Edit Options section …”. You will see a small prompt like this:
Of course, Photoshop offers many options available to us, but we just specify a name for our section is good to give a meaningful name, because this will be the name of the resulting file export.
Download a section
To export a section created, you must open the “Save for Web & Devices ..”Photoshop, on the File menu (or alternatively use the keyboard shortcut CTRL + ALT + SHIFT + S, if you can articulate your hand). The window that appears can put some ‘awe of the amount of controls, but analyzed piece by piece will be easy and straightforward.
On the left is the column with the tool buttons to move and operate in this window, “Hand”, “Select sections”, “Zoom”, “droppers”, which do not require specific explanation.
The central part of the window is dominated by export from the preview image. Just above, there are 4 tabs:
- Original: the original image appears in the box, without modification
- Optimized: displays the image using the settings specified in the right column (which we shall soon see)
- 2 images: You can preview images with two independent adjustments.Are the equivalent of two tabs “Optimized” side by side
- 4 images: as above, except that the number of images is four
At the bottom of each box, as you can see in the picture, there are some very interesting information about the image that you are going to export: the export format, respectively, the size (in Kb) of the resulting file and the time needed to download the image with a 56Kbps modem. This information may appreciate a simple check of the goodness of the applied settings.
Colonna the right is dedicated to the settings for image export. Detailed analysis of all possible combinations is beyond the scope of this article, but you can keep in mind some common sense:
- For sections with photographic subjects without large portions with a flat color, you should use JPEG compression setting properly.
- For icons, logos, or simple graphics with few colors, GIF or PNG-8 is an excellent choice.
- For high-quality graphics, which require transparency effect (given the recent decline of IE6) PNG-24 can be used without fear.
Obviously, these rules should be taken with the tongs, and evaluated on a case by case, since the topic “Export for Web” has generated a lot of different schools of thought. That said, Photoshop offers a few choices in the drop-down menu “Default” which may represent a good starting point.
Once analyzed the export window and including the various tools available, we have to export our test section. Select the “Select sections” on the left and click on the section you created. Remember that the icon should be blue in the upper left, otherwise it will be an automatic section created by Photoshop. Without this, choose a model of export from the “Default”, such as PNG-8, and click “Save.” This opens the usual Windows file save dialog: Make sure the menu below, “Sections”, is set to “All user slices” and you click again on “Save.”You have successfully exported your first portion of a layout, congratulations!
Trivially, all operations of coding a layout from PSD begin with the choice of components to be extracted from the image and format in which export them together to write the markup to be subject to those pictures. Obviously, the advantage given by the instrument sections is you can choose before all the various parts to be exported, then the export window choose the settings for each, exporters with a single click.
YIW Corporate: from PSD to XHTML + CSS
We try to apply the concepts just described the layout PSD chosen YIW Corporate. Since this is an explanation of “hands-on (or operational) to familiarize yourself with the sections of Photoshop, I will describe the necessary steps, without going into too much detail. The reason is that there is no way to create an XHTML layout given a PSD, but many different approaches, all with their validity. So, notice the words, one begins!
As a first step it should analyze the various pieces that compose our layout. We will need:
Light gray background with gradients of the head
I created a high image 156 pixels wide and 15 pixels of background gradients and the head of navigation, exporting it as PNG. This image is repeated horizontally.
Given that the logo has a particular font and the symbol of the sun, I exported a 380×114 pixel section of saving it in PNG.
Background of navigation elements
You must also export the background to indicate the currently selected page. Download this picture requires a little ‘reasoning. (Hint: try to remove the visibility at a level).
The image of the team, including logo and transparent radial gradient, needs a bit ‘of attention in the selection. Beware of the gradient, to avoid the “clean cut” caused by too narrow a section. Eliminating the visibility of the paragraph, the resulting image is a PNG (since I wanted to keep the edges of the sun) of 1053×256 pixels.
Blue background with dark shadow
As the gradient of the head, this image will be repeated horizontally.PNG is a 24×256 pixel.
Images are representative of various products
Every product the company is represented by a photograph. The best candidate for this export is the JPEG format, for the three images of size 300×116 pixels.
Take your time to do a good job is often a bit ‘more time spent between the approaches of the different formats, or on the choice of what to export, will make a difference in the medium to long term.
We have reached the end of this first part: You have learned to use the tool very useful sections of Photoshop. In the next lesson we use the images exported for creating our layouts using XHTML + CSS frameworks “960 Grid System”. Of course, as repeatedly stated in the article, there is no better way to export the pictures you can recommend some other equally effective?
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »