Hello. There was such a question (for the most part a problem). I'd like to learn how to make sites from psd templates. There are no problems with flash; I’m implementing a site layout and a template. But how to make it from the psd site - no experience. Knowledge of html and css is. Please give a couple of tips in this matter. Maybe some kind of resource to read read. Thank you in advance.
I'll tell you how I am doing. Just give advice - do not do a lot of excess, just the right and convenient. In popular sites there is not too much, so they are comfortable.
- In Photoshop, you break a website in parts, which make it easier to put together a website.
- You can save each block or site element separately into an image, but it is recommended that you pull the necessary parts out of the file using css.
- After that, with the help of CSS you play with the positioning of blocks and you make up the site via html.
My little experience. When you draw a site, cut out the backgrounds, buttons, and other elements of the site. If the background is a pattern, cut out a 20x20 square, do not do less. Save files for web. Then, when everything is cut, you start writing html markup without paying attention to css. Accordingly, you should already know what and how you will be marked. When markup is started writing styles. I personally measure the indents with a ruler in Photoshop :). It turns out pretty accurate. After the layout, write js scripts and, if necessary, create a separate style for internet explorer.
I will also share my little experience:
Planning. Look at the psd and mentally imagine in your head how the blocks will be located, where the picture will be, and where you can replace the font, how best to make the background, etc. You can plan (and need) on paper. Where there is a solid color, you can fill with color through CSS (and even where it’s not possible to have a solid). In general, the first rule: if somewhere you can do without pictures, do not use pictures. This also applies to transparent blocks and rounding and shadows.
Cutting. Take your favorite cutting tool in Photoshop and carefully cut the psd into those parts that you mentally imagined when planning. You can save in any acceptable format (the main thing is that it weighs less while maintaining relative quality).
Build a frame from html. Here you need to remember what you planned there and correct the layout a bit according to the situation.
And now the most important thing. CSS. Here approaches can be different, you need to choose the best. For example, whether to use reset.css and what to position: float or position. Or even tables somewhere zabatsat. The main rule: what can be done through CSS, do it through CSS. If the CSS capabilities are already lacking, leave this space for js.
Further, if desired, you can add interactivity through js and do something that did not work out through CSS. Well, do not forget to constantly test the page in various browsers.