Закажи “Сайт под ключ” и получи

в подарок:

  • Домен !
  • Хостинг !
  • 10% скидки на следующий заказ !

Статьи

Верстка из PSD макета

Верстка из PSD макета

Верстка из PSD макета — это начальный этап при создании любого шаблона, от правильного его выполнения во многом зависит успех дальнейшей работы верстальщика. PSD макет являет собой нарисованную версию будущего шаблона, разделенного на слои. В нем есть достаточно функционала для выделения этих самых слоев под будущую верстку. Открыть файл формата PSD можно не только Photoshop-ом, но и некоторыми другими продуктами Adobe, как Illustrator, After Effects и другие.

Для того чтобы верстка из PSD макета не затруднялась, дизайнеру необходимо знать, как именно его нарисовать. В основном, здесь нет ничего сложного, просто необходимо не переусердствовать с использованием сложной графики, не пытаться как можно быстрее составить ту или иную картинку. Естественно, для упрощения использования макета следует дать уникальные и понятные названия слоям, объединить в группы, по принципу принадлежности к одному модулю.

В идеале хороший веб-дизайнер должен знать основы блочной верстки, а также понимать значение термина «валидный код». В таком случае, этот специалист сможет представить себе верстку из PSD макета, а значит не будет допускать элементарных ошибок. Также учитывая то, что иногда дизайн сайта выполняет «продающие» функции, веб-дизайнер должен иметь понятие в маркетинге и уметь правильно оформлять ключевые элементы.

Очень часто нарезка самого макета становится проблемной для новичков, поэтому сейчас мы на простом примере постараемся показать вам этот процесс.

Шаг 1. Выделения слоя и его вырезка Нажимаем в Photoshop инструмент «Раскройка» (или кнопку С), появится перо, далее просо выделяем пером область нашей будущей картинки (смотрите рисунок ниже).

верстка из PSD макета

Теперь когда выделена необходимая нам область , нам нужно назначить изображению свое уникальное имя, к примеру назовём «support» , назначать картинкам имена довольно просто, там же где и «Раскройка» есть инструмент под названием «Выделение фрагмента» , выбираем его, кликаем два раза по нашему выделенному изображению , после чего появится окно куда необходимо будет ввести ИМЯ. Вот и всё, у нас готово изображение, как видно вырезать изображения таким способом очень просто и занимает минимум времени.

Шаг 2. Сохранение  Сохраняем новый файл с помощью комбинации alt+shift+ctrl+s или в верхнем навигационном меню, заходим в Закладку «Файл» > «Сохранить для Web и устройств», в открытом окне задаем качество вырезанной картинки и ее формат, если нарезанных вами картинок много ,а вам необходимо сохранить лиш несколько, выделяем нужные нам картинки с помощью простого нажатия. Помните, что прозрачность не отображается в форме jpg, но именно в нем некоторые картинки выглядят более оптимально.

 На втором «шаге» также происходит оптимизация размера картинки, это значит что нужно попытаться максимально уменьшить ее вес без особых потерь в качестве.

При нажатии на на кнопку Сохранить всплывет окно, в котором необходимо будет указать куда сохранить файл. Важно знать, что сохранить можно не только картинки а и HTML документ, также если вы в предыдущем пункте выбрали несколько изображений, необходимо выбрать пункт «Сохранить выделенные фрагменты» Правильная нарезка в дальнейшем позволит упростить верстку из PSD макета, стоит отметить что это умение является стандартным для любого специалиста занимающегося созданием шаблонов.

Добавить комментарий