Добрый вечер всем. Недавно я активно начал изучать и оттачивать свои навыки в верстке веб-страниц, так как в вебе я уже около 6 лет и мне всегда это было интересно. И я хотел бы поделиться с Вами знаниями о том, что нужно знать для верстки. Но, верстки не в плане кода, а в плане работы с графическим редактором.
Ведь для того, чтобы верстать, вы должны использовать или фотошоп, или же, если вы работаете с ОС Линукс, то GIMP (хотя, фотошоп можно пользоваться и на линуксе).
Можете, кстати, скачать этот (Сlick) макет и поэкспериментировать на нём. Загружаем макет и видим что-то подобное. Если у Вас слои не включены, то посмотрите как это сделать ниже.
Итак, первый совет, который будет полезна верстальщику, это использования функции “Авто-выбор”. Так как обычно слоев много, то порой бывает тяжело найти определенный слой.
Прежде всего, включаем “Move Tool” (Инструмент перемещения), ставим галочку на “Auto-Select” (Авто-выбор) и в выпадающем списке выбираем “Layer” (Слой).
И теперь кликаем нужному нам объекту левой кнопкой мышки. И в списке слоев мы сможем увидеть выделенный слой, это он и есть.
Второй совет, если Вам нужно вырезать или что-то сделать с элементом, но Вам мешает все остальное, Вы можете в один клик скрыть все элементы, кроме нужного. Для этого зажимаем Alt и нажимаем на индикатор видимости (глаз).
И опять же, если Вы хотите включить все слои, стоит нажать на индикатор правой кнопкой мышки и выбрать “Show/Hide all other layers” (Показать/Скрыть остальные слои).
Третий совет:
Обычно работа верстальщика в фотошопе заключается в вырезке определенных картинок, и я расскажу как это делать быстро.
Некоторые выделяют вручную, но я рекомендовал бы более легкий и быстрый способ (хотя иногда приходится все же делать это вручную). А также, рекомендовал бы пользоваться горячими клавишами, их легко запомнить и они ускорят такую рутинную работу. Запоминаем:
1. Зажимаем Ctrl и щелкаем по иконке слоя.
Как Вы сможете видеть, слой выделился. Теперь нажимаем Ctrl + C, тем самым копируя слой и Ctrl + N, с помощью которого мы создаем новый файл уже с нужными размерами.
Жмем “ОК” и нажимаем Ctrl + V. Изображение вставлено. Проверьте, не нужно ли убирать фон.
Когда изображение было вставлено, нажимаем Alt+Shift+Ctrl+S или же, если для Вас так будет проще, то “Файл –> Сохранить для веб-устройств”.
Здесь Вы можете выбрать тип файла, узнать/изменить размер и прочие полезные фишки. Все, изображение сохранено. Теперь можете спокойно добавлять его в Ваш шаблон. На словах это долго, на деле же все намного быстрее.
Какие еще инструменты понадобятся Вам?
Например, инструмент “Пипетка”, для того чтобы узнавать цвета элементов и их CSS-коды.
Выбираем инструмент и нажимаем, к примеру, на фон.
Сбоку у нас появился данный цвет, нажимаем на него и видим код, этот код нам нужно будет вставить в CSS.
color: #2d3844;
Инструмент линейка. Но, об этом я уже писал в блоге и Вы можете прочитать отдельную статью.
Так же бывает, что слой содержит эффекты. К примеру, как у меня:
Прежде копируем слой, как мы это делали выше, а потом нажимаете “Copy style layer” (Копировать стиль слоя) и в новом файле нажимаем “Paste style layer” (Вставить стиль слоя).
И в последнее это текст. Вы можете узнать шрифт, размер, начертание и цвет шрифта если возьмете инструмент “Текст” (буква Т) и нажмите на нужный Вам текст. И сверху в панели Вы сможете увидеть всю информацию.
Часто бывает такое, что фотошоп пишет что данной шрифта не существует и указывает название, соотвественно Вам нужно скачать данный шрифт и подключить в CSS файле или же подключить GoogleFonts, если этот шрифт есть в каталоге.
На этом, пожалуй, все. Надеюсь мои советы будут Вам полезны!
Кстати, если Вы читали раньше уроки, то Вы заметили что я перевел свой фотошоп на английский, чего и Вам советую. Но, для Вас я буду описывать для двух версий, ведь часто новички используют фотошоп с руссификатором.
Есть вопросы? Пишите в комментариях!
С ув. Владислав
