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

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

@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 нет.

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

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

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

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

psd2cms.ru

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

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

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

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

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

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

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

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