Как научится верстать из PSD макетов в html+css?

Question

[Dave]

Я довольно неплохо знаю HTML5, CSS3 и JavaScript. Но совсем не умею нарезать из PSD макетов.

Прежде чем задавать этот вопрос, я облазил весь гугл запросами - нигде нет ничего толкового, одни только видео-уроки. А там они в основном они ничего не объясняют толком, что где как и зачем. Там только нужно повторять за ними - что затрудняет и затормаживает процесс обучения.

Мне нужно только научится вырезать из PSD, может кто-нибудь подскажет статьи, книги? Или как вы сами учились верстать из PSD макетов?

Comments

[Роман Павлов]

Если честно, я не понял: как можно знать HTML+CSS+JS, и испытывать проблемы в верстке PSD шаблонов =\

[Dave]

Я back-end программист, не имел дело с фотошопом ранее. А проблемы - их бы не было, если бы можно было найти нормальные туториалы по psd. Можно знать фронт-енд, стек но ведь слайсы, уметь работать со слоями - тоже надо уметь!

[tef]

djay: Как-то давно на заре, я постиг метод правильного вырезания. Встречал только в одном видео.
Берешь слой. С зажатым контролом тыкаешь на превьюшке слоя. Далее контрол+ц, и в новый документ контрол+в. Всё. Вообще для нарезки пригодиться только умение выделять. В фотошопе это целая наука. Но верстальщику не нужно владеть этим на уровне крутой ретуши.
Про инструмент slice сразу забудь. Для чего он и зачем доподлинно никому не известно.
Ну в общем-то и всё. Как посмотреть название шрифта или тыкнуть пипеткой, я думаю, проблем вызвать не должно. Ну и линейка ещё нужна, что бы замерять расстояние между элементами.

Answer 1

[Алексей Павлов]

Посмотрите вот эти две статьи с хабра:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
Очень хорошие статьи, пошагово расскажут, что делать с макетом.
UPD. Ещё одна статья от того же автора:
Как сверстать тему для WordPress

Answer 2

[Виталий Киренков]

То есть видео, где прямо носом тыкают куда нажимать и что в итоге получается - вас не устраивает, а вот книжки и статьи, в которых голые буквы и картиночки, вы думаете, что помогут?

Comments

[Алексей Павлов]

да, мне тоже гораздо легче воспринимать текст (с картинками или даже без), чем видеоурок на полчаса-час. Не люблю видеоуроки.

[pitimirov_a]

Снимают видео-уроки зачастую либо профессионалы в верстке, но, как правило, с плохим качеством речи, либо поверхностно знакомые с той же деятельностью люди...

Answer 3

[Денис]

@djay Если вы неплохо знаете HTML5, CSS3 и JavaScript, то наверняка понимаете, что у сайтов есть:
- каркас или сетка
- повторяющиеся части ( хедер, футер, сайд бар.... и т.п.)
- элементы которые могут быть сделаны без медиафайлов(картинок, видео, flash)
- медиа элементы
- формы.

Так вот сперва разделите макет на эти части.
Сверстайте каркас.
Затем разделите части на элементы, и начинайте верстать каждый элемент.

Со временем вы будете видеть вместо белого квадрата черной обводкой нечто вроде этого:

<div class="black-square">Текст в черном квадрате</div>

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

Волшебной кнопки - "Сохранить как сверстанный макет" увы в Photoshop нет.

Comments

[Dave]

Я бы добавил div к селектору - типа div.black-square - чтобы читать было легче и проще) Но мне бы хотелось узнать как отмерять писксели (в народе говорят - слайсом), ставить такие же шрифты - и все аналогичное в этом направлении. Но все равно спасибо за ответ!

[Денис]

div.black-square - будет работать только на div, а ведь могут быть и или другие блочные элементы.

Пиксели размечаются направляющими(их дизайнер должен поставить по идее) либо слайсами да.
Шрифты берутся либо стандартные, либо спрашиваем смотрим какие шрифты с макете и подключаем google-fonts.

[Денис]

PS мне нравится идеология bootstrap когда стили набираются стеком div class= квадрат углы черный.
Так можно комбинировать например круг черный, или прямоугольник углы черный

Answer 4

[Eugene Burmakin]

Режьте ровно картинки из псд и позиционируйте их на странице с помощью хтмл и ксс. Все, профит, вы умеете верстать.

Comments

[Виталий Киренков]

Гениально!)))

Answer 5

[Виталий Желтяков]

Во-первых, верстка основывается на знании HTML + CSS и представлении, как это всё работает в браузере.
Во-вторых, единственный путь научиться нормально верстать - это верстать, т.е. пробовать, совершать ошибки, исправлять их и снова пробовать.
В-третьих, видеоуроки полностью бесполезны, т.к. всё дело в первых двух пунктах.
В-четвёртых, PSD - лучше всего резать в Gimp, где есть нормальный резак. Соответственно надо ещё знать Gimp, ну на крайний случай Photoshop.
В-пятых, верстальщики - это один из "нижних классов" в ИТ. Лучше выбрать другое направление сразу.

Comments

[Виталий Киренков]

"Нижних классов"??? Вы вообще в курсе сколько получают фронтэндеры? И по сути любой фронтэндер изначально это верстальщик. А чисто верстальщики как таковые - вымирающий вид.

[Денис]

фигвам. Хороший верстак - золотой чел. Мне вот нужен хороший верстак, а нету таких.

Answer 6

[Роман Сохарев]

Однажды, добрые гномы из адоб сделали пэрфейт. С тех пор я горя не знаю.

Answer 7

[legotin4]

rghost.net/56518222 там поставить галочку напротив "фотошоп для Хтмл-верстальшика".

Comments

[Георгий Волокитин]

а есть ли еще такие ссылочки? а то "файл удален"

[legotin4]

Георгий Волокитин: https://yadi.sk/d/73jCsmokjYwzp

[Георгий Волокитин]

legotin4: премного благодарен!

[aar]

legotin4: не открывается ни первая, ни вторая ссылки. Нет ли возможности скинуть рабочую ссылку, если вам не трудно.

Answer 8

[StayBrutal]

psd2cms.ru

Answer 9

[sanex3339]

Подкину шаблончик.
www.freepsd.ws/57-gotovyy-maket-psd-angelo.html

Сам его сейчас верстаю для тренировки.

Comments

[Алекс]

Подскажи как можно скачать шаблон? у меня загружается в .exe - а после распаковки выбрасывает опять на сайт!

Answer 10

[Сергей]

поищи видео Бернацкого Андрея

Comments

[Сергей]

www.youtube.com/watch?v=2mEMHybhj7I у него подобных выдео много с разными уровнями сложности тебе должно это помоч

[Влад Преображенский]

Уж лучше не рекламируй на тут фуфло!Идите все в нетологию!

Answer 11

[wakh]

Сейчас очень редко нужна нарезка, как таковая, это было актуально во "времена таблиц".
Я делаю так.
1. в фотошопе/кореле или где угодно готовлю спрайты и верстаю их дивами, позиционируя вручную, возможно есть среды, но мне привычней руками
Если вёрстка коробочная, то можно экспортировать всю страницу картинкой, положить бэкграундом и позиционировать относительно неё.
2. шрифт ищу в гугловском сервисе, есть конечно скьюрел, но по ряду причин не пользуюсь
3. сверстав плэйнХТМЛ макет, натягиваю его на ЦМС, хотя чаще я сразу верстаю под нужную ЦМС.

ПС для позиционирования блоков, лучше использовать бэкграун, а не бордер или менять блочную модель, надеюсь ты понял о чём я ;)

Answer 12

[danil warshe]

Используй Adobe Muse, всё проще чем кажется

Answer 13

[DevMaster]

Twiter Bootstrap используйте

Answer 14

[GREAT-programmer]

Ознакомься с Avocode и ты научишься верстать из PSD в perfect pixel!