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

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

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

Мне нужно только научится вырезать из PSD, может кто-нибудь подскажет статьи, книги? Или как вы сами учились верстать из PSD макетов?
  • Вопрос задан
  • 106791 просмотр
Решения вопроса 1
lexxpavlov
@lexxpavlov
Программист, преподаватель
Посмотрите вот эти две статьи с хабра:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
Очень хорошие статьи, пошагово расскажут, что делать с макетом.
UPD. Ещё одна статья от того же автора:
Как сверстать тему для WordPress
Ответ написан
Пригласить эксперта
Ответы на вопрос 14
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
То есть видео, где прямо носом тыкают куда нажимать и что в итоге получается - вас не устраивает, а вот книжки и статьи, в которых голые буквы и картиночки, вы думаете, что помогут?
Ответ написан
Freika
@Freika
Ruby on Rails developer
Режьте ровно картинки из псд и позиционируйте их на странице с помощью хтмл и ксс. Все, профит, вы умеете верстать.
Ответ написан
cjbars
@cjbars
@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.
В-пятых, верстальщики - это один из "нижних классов" в ИТ. Лучше выбрать другое направление сразу.
Ответ написан
greabock
@greabock
Могу
Однажды, добрые гномы из адоб сделали пэрфейт. С тех пор я горя не знаю.
Ответ написан
@legotin4
rghost.net/56518222 там поставить галочку напротив "фотошоп для Хтмл-верстальшика".
Ответ написан
AKKJIuMATu3uPOBAHHbIEE_PA
@AKKJIuMATu3uPOBAHHbIEE_PA
youtu.be/BmBcY5g5CCM самый разжеванный и интересный видеоурок
Ответ написан
@sanex3339
Подкину шаблончик.
www.freepsd.ws/57-gotovyy-maket-psd-angelo.html

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

ПС для позиционирования блоков, лучше использовать бэкграун, а не бордер или менять блочную модель, надеюсь ты понял о чём я ;)
Ответ написан
@GREAT-programmer
Ознакомься с Avocode и ты научишься верстать из PSD в perfect pixel!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы