Что нужно знать в Adobe Photoshop для верстки веб-страницы

Что нужно знать в Adobe Photoshop для верстки веб-страницы

 

Добрый вечер всем. Недавно я активно начал изучать и оттачивать свои навыки в  верстке веб-страниц, так как в вебе я уже около 6 лет и мне всегда это было интересно. И я хотел бы поделиться с Вами знаниями о том, что нужно знать для верстки. Но, верстки не в плане кода, а в плане работы с графическим редактором.

Ведь для того, чтобы верстать, вы должны использовать или фотошоп, или же, если вы работаете с ОС Линукс, то GIMP (хотя, фотошоп можно пользоваться и на линуксе).

Можете, кстати, скачать этот (Сlick) макет и поэкспериментировать на нём. Загружаем макет и видим что-то подобное. Если у Вас слои не включены, то посмотрите как это сделать ниже.

maket

Итак, первый совет, который будет полезна верстальщику, это использования функции “Авто-выбор”. Так как обычно слоев много, то порой бывает тяжело найти определенный слой.

Прежде всего, включаем “Move Tool” (Инструмент перемещения), ставим галочку на “Auto-Select” (Авто-выбор) и в выпадающем списке выбираем “Layer” (Слой).

auto-select

И теперь кликаем нужному нам объекту левой кнопкой мышки. И в списке слоев мы сможем увидеть выделенный слой, это он и есть.

auto-select2

Второй совет, если Вам нужно вырезать или что-то сделать с элементом, но Вам мешает все остальное, Вы можете в один клик скрыть все элементы, кроме нужного. Для этого зажимаем Alt и нажимаем на индикатор видимости (глаз).

visability

И опять же, если Вы хотите включить все слои, стоит нажать на индикатор правой кнопкой мышки и выбрать “Show/Hide all other layers” (Показать/Скрыть остальные слои).

visability2

Третий совет:

Обычно работа верстальщика в фотошопе заключается в вырезке определенных картинок, и я расскажу как это делать быстро.

Некоторые выделяют вручную, но я рекомендовал бы более легкий и быстрый способ (хотя иногда приходится все же делать это вручную). А также, рекомендовал бы пользоваться горячими клавишами, их легко запомнить и они ускорят такую рутинную работу. Запоминаем:

1. Зажимаем Ctrl и щелкаем по иконке слоя.

cut-item1

Как Вы сможете видеть, слой выделился. Теперь нажимаем Ctrl + C, тем самым копируя слой и Ctrl + N, с помощью которого мы создаем новый файл уже с нужными размерами.

image

Жмем “ОК” и нажимаем Ctrl + V. Изображение вставлено. Проверьте, не нужно ли убирать фон.

Когда изображение было вставлено, нажимаем Alt+Shift+Ctrl+S или же, если для Вас так будет проще, то “Файл –> Сохранить для веб-устройств”.

cut-item2

Здесь Вы можете выбрать тип файла, узнать/изменить размер и прочие полезные фишки. Все, изображение сохранено. Теперь можете спокойно добавлять его в Ваш шаблон. На словах это долго, на деле же все намного быстрее.

Какие еще инструменты понадобятся Вам?

Например, инструмент “Пипетка”, для того чтобы узнавать цвета элементов и их CSS-коды.

pipetka1

Выбираем инструмент и нажимаем, к примеру, на фон.

Сбоку у нас появился данный цвет, нажимаем на него и видим код, этот код нам нужно будет вставить в CSS.

pipetka2

image

color: #2d3844;

 

Инструмент линейка. Но, об этом я уже писал в блоге и Вы можете прочитать отдельную статью.

Так же бывает, что слой содержит эффекты. К примеру, как у меня:

effect

Прежде копируем слой, как мы это делали выше, а потом нажимаете “Copy style layer” (Копировать стиль слоя) и в новом файле нажимаем “Paste style layer” (Вставить стиль слоя).

effec2t

И в последнее это текст. Вы можете узнать шрифт, размер, начертание и цвет шрифта если возьмете инструмент “Текст” (буква Т) и нажмите на нужный Вам текст. И сверху в панели Вы сможете увидеть всю информацию.

text

Часто бывает такое, что фотошоп пишет что данной шрифта не существует и указывает название, соотвественно Вам нужно скачать данный шрифт и подключить в CSS файле или же подключить GoogleFonts, если этот шрифт есть в каталоге.

На этом, пожалуй, все. Надеюсь мои советы будут Вам полезны!
Кстати, если Вы читали раньше уроки, то Вы заметили что я перевел свой фотошоп на английский, чего и Вам советую. Но, для Вас я буду описывать для двух версий, ведь часто новички используют фотошоп с руссификатором.

Есть вопросы? Пишите в комментариях!

С ув. Владислав

 
Копилка советов