20 хитростей в Photoshop для веб-дизайнеров

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

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

По этой причине рекомендуется продолжить изучение вашего любимого инструмента. Чтобы помочь вам в этом, в этой статье мы рассмотрим некоторые из лучших приемов Photoshop. Материалы, которые могут улучшить ваш рабочий процесс, упростить работу и жизнь, сэкономить время и помочь вам создавать лучшие веб-сайты.

Готовы узнать больше о Photoshop? Тогда продолжайте читать.

Уловки Photoshop, которые превратят вас в мастера веб-дизайна

Следующие советы варьируются от начального уровня до более сложного материала. Каждый из них выбран, чтобы помочь вам стать лучшим веб-дизайнером, которым вы можете быть.

1. Оптимизируйте свое рабочее пространство

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

По этой причине наша первая остановка - Окно> Рабочая область> Графика и Интернет . Выбор этого параметра изменит доступные инструменты на те, которые вы, скорее всего, будете использовать для веб-дизайна.

После этого перейдите в Edit> Preferences . Здесь одна из самых важных остановок - « Единицы и линейки». Какой бы размер вы ни выбрали (скорее всего, в пикселях), он будет использоваться по умолчанию для всех последующих документов.

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

После этого перейдите в « Настройки»> «Производительность»> «История и кэш» и нажмите « Дизайн веб-интерфейса или пользовательского интерфейса» .

Это приведет к изменению настроек кеша в пользу файлов меньшего размера с большим количеством слоев, с которыми вы в основном будете работать.

Там же вы можете выбрать количество состояний истории. Это количество шагов, на которое вы можете вернуться, если хотите что-то отменить.

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

2. Изучите быстрые клавиши.

Для любой программы, которую вы регулярно используете, изучение быстрых клавиш - хороший совет.

Например, я использую Ctrl + Alt + 2/3 для создания заголовков h2 и h3 при написании этого сообщения. Это намного быстрее, чем использовать для этого панель инструментов редактора, поскольку мне не нужно отрывать руки от клавиатуры.

То же самое и с фотошопом. Знать, как выполнять действия с помощью простых нажатий клавиш, бесконечно быстрее, чем щелкать по меню.

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

3. Слои групп и имен

При работе с Photoshop вы будете работать с множеством слоев. Большинство элементов не только получают свой собственный слой, но и такие модификации, как яркость / контраст, также добавляются как слои.

По этой причине он может очень быстро запутаться. К счастью, есть множество опций, позволяющих сделать это не так, две из которых - это возможность группировать слои и присваивать им имена.

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

Таким образом, вы легко поймете, содержит ли слой фоновое изображение, меню или боковую панель.

Кроме того, вы также можете выбрать несколько слоев одновременно, удерживая Ctrl, чтобы выбрать отдельные слои, или Shift, чтобы отметить диапазон соседних слоев. Ctrl + G затем превращает их в группу.

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

4. Слои фильтров

Именование и группировка слоев - хорошее начало. Однако при работе с десятками или даже сотнями из них все равно легко запутаться.

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

Также можно напрямую выбрать слой, используя инструмент « Перемещение» , удерживая Ctrl и щелкая слой или объект.

5. Создайте сетку.

Изображение предоставлено PureSolution / shutterstock.com.

Сетка - один из важнейших принципов веб-дизайна. Он наводит порядок в дизайне и помогает размещать объекты. По этой причине имеет смысл создавать сетку только в Photoshop.

Для этого используйте View> New Guide Layout . Также можно создать горизонтальные и вертикальные направляющие, просто щелкнув линейку и перетащив ее в документ. Используйте Ctrl для перемещения существующих направляющих.

6. Импорт образцов цвета

Вы можете загружать образцы цвета прямо в Photoshop из файлов HTML, CSS или SVG. Таким образом, у вас есть отличная отправная точка для вашей цветовой схемы при работе с существующими активами, такими как логотип.

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

7. Сохранение пользовательских фигур.

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

Для этого щелкните правой кнопкой мыши нужную фигуру с помощью инструмента выделения контура (черная стрелка). Затем выберите « Определить произвольную форму» . Как только вы это сделаете, вы можете получить доступ к этой форме через параметры верхней панели инструмента Custom Shape . Просто щелкните раскрывающееся меню с надписью Форма: и выберите сохраненную форму.

8. Переключение между цветом фона и цвета переднего плана.

Два переключаются между цветом фона и переднего плана, не нажимая на значок, просто нажмите X на клавиатуре. Кроме того, если вы хотите, чтобы цвета снова стали черно-белыми, вы можете сделать это, нажав D.

9. Измените прозрачность с помощью клавиатуры.

Еще одно сочетание клавиш: для любого инструмента, который может изменять прозрачность, вы можете просто сделать это с помощью клавиатуры. Цифры от 1 до 0 устанавливают непрозрачность от 10% до 100%. То же самое работает и с непрозрачностью слоев.

10. Нарисуйте прямые линии.

Чтобы нарисовать прямую линию любым инструментом, просто удерживайте клавишу Shift . После этого вы можете нарисовать линию (как по горизонтали, так и по вертикали), которая автоматически станет прямой, как гвоздь. Или щелкните две разные точки, чтобы создать прямую линию между ними.

11. Цвет образца

Следующим в нашем наборе приемов Photoshop является возможность пробовать любой цвет. Если вам нужен цвет любого объекта, удерживайте кнопку Alt и щелкните нужный оттенок. Это работает как с кистью , так и с карандашом , ведром с краской и любыми другими инструментами, использующими цвета.

12. Добавить или удалить из выделенного

Вы можете добавить к существующему выбору, удерживая Shift и выбрав часть, которую хотите включить. Чтобы вычесть, сделайте то же самое, но с кнопкой Alt .

13. Отменить более одного шага

Классический способ отменить последнее действие - использовать Ctrl + Z. Однако это работает только для последнего, что вы делали. Чтобы вернуться на несколько шагов назад, используйте Ctrl + Alt + Z.

14. Динамически изменяйте размер кисти

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

15. Сохранить для Интернета

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

В Photoshop это можно сделать, выбрав « Файл»> «Экспорт»> «Сохранить для Интернета» . Однако более быстрый способ - использовать Ctrl + Alt + Shift + S. Добро пожаловать!

16. Открывать изображения как слои

Иногда бывает необходимо импортировать в Photoshop сразу большое количество изображений. Тем не менее, когда вы просто перетаскиваете их на свое рабочее место, вам будет предложено разместить их вручную.

Более практичный способ сделать это - « Файл»> «Сценарии»> «Загрузить файлы в стек» . Найдите нужные изображения, отметьте их и дважды нажмите ОК . Теперь каждое изображение будет автоматически импортировано в отдельный слой.

17. Скопируйте CSS прямо из Photoshop.

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

Чтобы воспользоваться этим, просто щелкните слой правой кнопкой мыши и выберите « Копировать CSS» . Или используйте меню « Слой», чтобы найти тот же вариант. Теперь у вас есть все необходимые стили, которые можно просто вставить в таблицу стилей или в любую другую программу, которую вы используете.

18. Дизайн для нескольких устройств и ориентации одновременно

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

Источник: ComScore

К счастью, в Photoshop есть артборды и смарт-объекты, которые позволяют легко масштабировать дизайн для разных форматов.

Я мог бы подробно описать оба здесь, однако Phlearn сделал отличный учебник по этому поводу, который работает намного лучше, чем я когда-либо мог:

19. Используйте автоматическую обработку для повторяющихся задач

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

Вот как это работает. Сначала откройте ваш файл. Затем откройте Действия ( Alt + F9 ), найдите « Создать новое действие» и щелкните его. Введите имя и, при желании, назначьте ему комбинацию клавиш и цвет.

Чтобы записать свои действия, нажмите « Запись» . Затем выполните операцию, которую хотите повторить. В моем случае я открываю изображение из одной папки и сохраняю его для Интернета в другой папке.

После этого остановите запись. Теперь вы можете повторно использовать это действие для всех остальных изображений, сэкономив кучу времени. Дополнительные сведения о том, что можно автоматизировать в Photoshop, см. В этой статье.

20. Предварительный просмотр на устройстве

Наконец, наряду с Photoshop, Adobe также предлагает приложение, которое позволяет просматривать вашу работу на нескольких устройствах iOS. Лучшее: вы можете наблюдать за изменениями на устройстве, как вы делаете их на компьютере.

Для этого установите приложение и используйте предварительный просмотр устройства для подключения Photoshop к внешнему устройству через USB или Wi-Fi. Вы найдете опцию в разделе « Окно»> «Предварительный просмотр устройства» .

Какие ваши любимые уловки в Photoshop?

Photoshop - один из наиболее часто используемых инструментов веб-дизайна. Его мощные функции делают его идеальным для разработки высококачественных веб-сайтов и ресурсов.

Однако с большой мощностью приходит и большая сложность, и особенно новичкам может потребоваться некоторое время, чтобы освоить программное обеспечение.

Чтобы сократить время обучения, выше мы предоставили ряд полезных приемов Photoshop для веб-дизайнеров. Они упрощают многие вещи - от общего рабочего процесса до автоматической обработки файлов.

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

Какие ваши любимые приемы в Photoshop? Пожалуйста, дайте нам знать в разделе комментариев ниже, чтобы мы все могли помочь друг другу.

Миниатюра статьи: Creative Stall / shutterstock.com