поступление для веб-разработчиков

postuplenie dlya veb razrabotchikov

Введение

Зачастую, работая веб-разработчиком, нам нужно интегрировать шаблоны. Они могут быть из Photoshop или другого программного обеспечения. В этой статье мы рассмотрим основы Photoshop для веб-разработчиков.

Этот контент первоначально был написан для семинара для DAMDigital London.

Adobe Photoshop — это программное обеспечение для редактирования растровой графики, то есть приложение, которое позволяет пользователям создавать и редактировать изображения.

Hn9dRTjo6YkUp5YZ5bnr1oIGxXjjMm9G1j2V
Источник изображения

Он был выпущен в 1988 году и стал отраслевым эталоном для графического программного обеспечения.

Вы можете загрузить бесплатную пробную версию Photoshop на веб-сайте Adobe.

Рабочая область

Рабочая область Photoshop является модульной, поэтому вы можете адаптировать ее в зависимости от выполняемой работы. Некоторые рабочие области по умолчанию уже настроены в Photoshop. В этой статье я использую Graphic and Web один. Для перехода к этой рабочей области перейдите к Window/workspace/Graphic and Web.

Давайте посмотрим на нашу рабочую область:

GrHsceHchCL77wzBJVYovMnh6Wumhltg6ikN
Photoshop
  • A — Строка меню: Именно здесь вы найдете большинство вариантов Photoshop
  • B — Панель параметров: Эта панель предоставит все параметры для текущего выбранного инструмента.
  • C — Панель инструментов: Эта панель содержит все доступные инструменты из Photoshop. Связанные инструменты сгруппированы вместе, и вы можете долго щелкнуть на одном из них, чтобы увидеть все инструменты.
  • D — Панели: Это область, где у вас открыты основные панели, например Layers, History, и так дальше. Чтобы открыть панель, просто зайдите Window/(Panel that you want to open)

Создайте новый файл

Создавая новый файл в Photoshop, вам сначала нужно знать, для какого носителя будет использоваться дизайн, то есть для экрана (веб, фильм или видео) или для печати?

В зависимости от ответа на этот вопрос вам нужно будет изменить значение PPI (пиксели на дюйм).

Пиксели на дюйм (PPI) – это измерение, используемое для определения разрешения дисплея компьютера. Эта метрика оценивает качество изображения/изображения, которое может показать конкретная вычислительная или исходная система отображения. Количество пикселей на дюйм также известно как плотность пикселей. Техопедия

Для печати обычно требуется 300 PPI, но это зависит от принтера и размера напечатанного документа. Вы также должны изменить цвет на CMYK, но это опять-таки зависит от того, как вы печатаете документ. Если вы хотите узнать больше о цветах RGB и CMYK, просмотрите эту статью.

Для экранов и Интернет требуется цвет 72 PPI и RGB. Затем необходимо указать размер экрана. Я бы рекомендовал сначала создать дизайн для мобильных устройств, затем для планшетов и компьютеров.

В качестве веб-разработчика вам может не понадобиться создавать новый файл. Скорее всего, вам придется работать с дизайном, предоставленным веб-дизайнерами.

Сейчас мы рассмотрим существующий .psdшаблон и работайте с ним, чтобы ознакомиться с Photoshop.

Вы можете загрузить и открыть этот шаблон PSD из Луиса Косты.

Слои

Одной из основных функций Photoshop является слои. Слои подобны стопке листов, и вы можете видеть сквозь прозрачные области или области с низкой непрозрачностью (частично прозрачными).

Вы можете открыть панель слоев Window/Layers.

tQQjIui8Q7xS3jxXIdyvWHDHNIVirFY8A93N

Верхний слой на этой панели будет расположен поверх всех остальных слоев под ним. Слои можно организовать в папки. Важно правильно назвать слои и папки. Это поможет при интеграции.

Рядом с каждой папкой и слоем есть значок глаза. Это позволяет переключать их видимость.

Ваш PSD может иметь множество слоев и документов. Одним из способов быстрого поиска слоя является выделение move tool (v). Щелкните правой кнопкой мыши на холсте, где вы хотите найти свой слой. Вы получите все слои в области, где вы щелкните правой кнопкой мыши. Щелкнув по одному, он выберет этот слой на панели слоев.

G6F2Tk5n4XnwyY2X3J8cdswbGb-EWxZcIglZ

Панель инструментов

Photoshop поставляется с множеством инструментов. Я собираюсь показать вам несколько полезных, которые помогут вам?

Во-первых, если вы просто установите Photoshop CC 2018, вам нужно восстановить все инструменты. Идите к Edit > Toolи нажмите кнопку Восстановить параметры по умолчанию.

UMkamoH1ixOjCLaOS6Z9bM-NVc1QReFOByyK
Изображение от Adobe

Мы увидим несколько наиболее полезных инструментов, которые можно использовать для интеграции шаблона:

A — Инструменты выделения

  • Двигаться: позволяет пользователю перемещать слой вокруг холста. Как мы видели ранее, его также можно использовать для поиска слоя, щелкнув правой кнопкой мыши на своем полотне.
  • Прямоугольный шатер: Этот инструмент используется для выделения области полотна для копирования и вставки, заполнения и т.д. Его можно использовать для измерения. После завершения выбора вы сможете найти размер выбранной области Window/Info. Возможно, вам придется изменить единицу по умолчанию в Photoshop Edit/preferences/general/Unit & Rulers затем установите единицы измерения на пикселе.
RNWaDP1kVGLAyGz3DrKZXT-TCHYLFNYjazj8

B – инструменты Crop и Slice

  • Урожай: Этот инструмент может… обрезать изображение? В настройках инструмента (Панель параметров) можно установить соотношение сторон, которое хотите сохранить.

C — Измерительные инструменты

  • Пипетка: пипетка позволяет быстро получить цветовой оттенок в вашем дизайне. Просто нажмите там, где вы хотите получить цвет. Затем в нижней части панели инструментов цвет переднего плана изменится на выбранный. Если нажать на цвет переднего плана, откроется color picker window. Оттуда вы можете получить значение цвета.
  • Пробник цвета: при интеграции вашего дизайна вам может понадобиться выбрать несколько цветов. Мы снова воспользуемся информационным окном Window/Info. Этот инструмент позволяет создать выборку цветов. Просто нажмите область изображения, из которой хотите получить цвета. Вы получите каждый цвет на информационной панели. Вы можете изменить тип цвета в Интернете, нажав значок «Пипетка» под номером.
-r5ub2UTHKZWsnsIUtm4SdjRBEbGODTwmwHw
  • Линейка: помогает измерить шаблон. Вся информация появится в вашем информационном окне. Поддерживайте Shiftпри измерении ваша линейка остается прямой. Вы также можете получить углы.

G – инструмент навигации

  • рука: Этот инструмент поможет вам обойти холст. Вы можете получить доступ к этому инструменту в любое время, удерживая пробел и перетаскивая его с помощью мыши.
  • Увеличить: Позволяет увеличивать и уменьшать масштаб (вы можете Ctrl + +или Ctrl + - тоже).

Руководители

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

Вы можете перемещать существующие направляющие с помощью move tool(v).

Чтобы создать новые направляющие, вам нужно будет открыть линейку: View/Ruler или Ctrl + R. Линейка появится в вашем рабочем пространстве. Затем с помощью линейки вы можете перетащить новую направляющую на холст.

Чтобы удалить направляющую, воспользуйтесь move tool(v) и вставьте направляющую обратно в линейку.

Чтобы скрыть и показать все свои справочники, вы можете просто воспользоваться Ctrl + Hили перейдите к View/Extras.

Умные объекты

Что такое разумные объекты?

Умные объекты – это слои, содержащие данные изображения из растровых или векторных изображений, например файлов Photoshop или Illustrator. Умные объекты сохраняют исходное содержимое изображения со всеми его исходными характеристиками, что позволяет выполнять неразрушающее редактирование слоя. Adobe

Разумные объекты можно распознать в ваших слоях, если на их миниатюрах есть такой значок:

QyPI1W-pNwBcjwv8oz4WAY8oAorz4TbhcNHk

Умные объекты очень удобны, если вы работаете с изображениями векторного типа (SVG, EPS, AI), но также полезны с другими сложными растровыми файлами.

Давайте попробуем импортировать смарт-объект в наш PSD. Загрузите файл SVG из flaticon. Чтобы импортировать наш SVG на наше полотно, просто перетащите файл на полотно. Теперь мы можем редактировать наш SVG в illustrator или любом другом векторном программном обеспечении, дважды щелкнув миниатюру или наш смарт-объект. Изменения появятся в нашем PSD.

Однако разумные объекты могут сделать гораздо большее. Если вы хотите узнать о них больше, посмотрите 10 вещей, которые вам нужно знать о смарт-объектах в Photoshop.

Экспортные активы

Во-первых, просто напомню, что фотошоп – это растровый программное обеспечение, а не a вектор программное обеспечение. Это означает, что мы не можем экспортировать файлы SVG из Photoshop. Для этого вам потребуется экспортировать такие файлы, например из Illustrator или Inkscape.

В Интернете мы хотим иметь светлые файлы изображений. Для фотосъемки мы использовали бы сжатый .jpg файл. Если вам нужно использовать прозрачность (альфа-канал), мы бы использовали .png файл. Для анимированного изображения мы использовали a .gif. Если вам нужно векторное изображение (например, значки), лучше экспортировать файл как .svg. Если вы хотите получить больше информации о всех файлах, доступных в Photoshop, вы можете проверить «форматы файлов» на веб-сайте Adobe.

Экспортируем наше полотно

Чтобы экспортировать полотно, выполните следующие действия.

  1. Идти в File/Export/Save for Web
  2. Выберите формат файла
  3. Выберите размер изображения
  4. Выбирайте качество
  5. Сохранить

Экспортировать только объект из холста

Возможно, вам потребуется экспортировать некоторые активы шаблона.

Давайте экспортируем левую стрелку в карусели продуктов:

rK3w29prW1my7q8LEhDrTfHTURlhqj9CIKh6

Используя инструмент перемещения, мы собираемся найти наш слой. Щелкните правой кнопкой мыши на стрелке и выберите слой Arrow Left. Теперь просто щелкните правой кнопкой мыши на этом слое на панели слоев. Выберите export as и выберите тип файла.

Мы также можем экспортировать папки.

Действия

Что такое действие в Photoshop?

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

Эта функция очень удобна, если вы хотите изменить размер партии изображений для Интернета!

Давайте создадим новое действие, чтобы обрезать изображения и экспортировать:

  1. Загрузите кучу изображений с https://unsplash.com/
  2. Откройте одно из этих изображений
  3. Откройте Actions панель, Window/Actions,
  4. Создайте новое действие, нажав на значок Создайте новое действие (То, что слева от значка корзины). Назовем это действие Экспорт для Интернет — имя клиента.
  5. Сейчас мы записываем нашу акцию. Кнопка записи будет красной, и можно остановить запись, нажав значок остановки (квадрат слева)/
  6. Выберите значок обрезки и установите соотношение 1×1 и обрежьте изображение/
  7. Теперь мы хотим экспортировать наше изображение, File/Export/Save for Webвыберите JPGкачество 50% и ширина 500 пикселей.
  8. Нажмите кнопку «Сохранить» и выберите целевую папку.
  9. Закройте изображение, не сохраняя его.
  10. Чтобы остановить запись, щелкните значок остановки (квадратный значок слева).

Теперь у нас есть наше действие, поэтому мы можем открыть изображение и просто воспроизвести наше действие, нажав кнопку воспроизведения.

Если мы хотим применить наше действие к партии изображений, просто выполните следующие действия:

  1. Идти в File/Automate/Batch
  2. Выберите Source папку.
  3. Выберите наше действие
  4. Нажмите на Ok

И вуаля! Все изображения находятся в папке экспорта.

Надеюсь, вам понравилось это маленькое вступление в Photoshop 101 для веб-разработчиков? Если вы хотите иметь версию 102, дайте мне знать, что вы хотели бы узнать или узнать больше о ?.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *