How to learn to typeset from PSD layouts in html+css?

Question

Layout

I have a pretty good knowledge of HTML5, CSS3 and JavaScript. But I don’t know how to cut from PSD layouts at all.

Before asking this question, I searched the whole Google for queries - there is nothing sensible anywhere, only video tutorials. And there they basically do not explain anything plainly, what, where, how and why. There you only need to repeat after them - which makes it difficult and slows down the learning process.

I just need to learn how to cut from PSD, can someone tell me articles, books? Or how did you yourself learn to make up from PSD layouts?

Answer 1

Look at these two articles from habr:
How to make up a web page. Part 1
How to make a web page. Part 2 - Bootstrap
And read all the comments on these articles (however, as usual on Habré :)
Very good articles, they will tell you step by step what to do with the layout.
UPD. Another article from the same author:
How to Design a WordPress Theme

Answer 2

That is, a video where they poke where to press with their nose and what happens in the end - does not suit you, but books and articles in which there are bare letters and pictures, do you think they will help?

Answer 3

@djay If you know HTML5, CSS3 and JavaScript well, then you probably understand that sites have:
- wireframe or grid
- repeating parts (header, footer, side bar .... etc.)
- elements that can be made without media files (pictures, video, flash)
- media elements
- forms.
So first, divide the layout into these parts.
Lay out the frame.
Then divide the parts into elements, and start laying out each element.
Over time, you will see something like this instead of a white square with a black stroke:

.black-square
{
width: 100px;
height: 100 px;
background-color: white;
border: 1px solid black;
}

Alas, there is no magic button - "Save as a layout" in Photoshop.

Answer 4

Cut exactly pictures from psd and position them on the page using html and css. Everything, profit, you know how to typeset.

Answer 5

Firstly, layout is based on knowledge of HTML + CSS and understanding how it all works in the browser.
Secondly, the only way to learn how to typeset normally is to typeset, i.e. try, make mistakes, correct them and try again.
Thirdly, video tutorials are completely useless, because. It's all about the first two points.
Fourthly, PSD is best cut in Gimp, where there is a normal cutter. Accordingly, you still need to know Gimp, well, in extreme cases, Photoshop.
Fifth, layout designers are one of the "lower classes" in IT. It is better to choose another direction immediately.

Answer 6

Once, good gnomes made a perfeit from adobe . Since then, I do not know grief.

Answer 7

rghost.net/56518222 check the box next to "Photoshop for HTML layout".

Answer 8

youtu.be/BmBcY5g5CCM the most chewed and interesting video tutorial

Answer 9

psd2cms.ru

Answer 10

I'll put up a template.
www.freepsd.ws/57-gotovyy-maket-psd-angelo.html
I'm typing it myself right now for practice.

Answer 11

look for Andrey Bernatsky's video

Answer 12

Now, cutting is very rarely needed, as such, it was relevant in the "time of tables".
I do so.
1. I prepare sprites in Photoshop / Corel or anywhere else and lay them out with divs, positioning them manually, maybe there are environments, but I’m more familiar with my hands
. If the layout is boxed, then you can export the entire page as a picture, put it as a background and position it relative to it.
2. I’m looking for a font in the Google service, there is of course a skurel, but for a number of reasons I don’t use
it.
PS for positioning blocks, it's better to use a background, not a border or change the block model, I hope you understand what I mean ;)

Answer 13

Use Adobe Muse, it's easier than it looks

Answer 14

Twitter Bootstrap use

Answer 15

Get familiar with Avocode and you will learn how to make up from PSD to perfect pixel!