Photoshop для веб-дизайна: 20 профессиональных советов

  1. 01. Используйте сеточные системы
  2. 02. Получите все это
  3. 03. Изучите пользовательские шаблоны документов
  4. 04. Настройте тип по умолчанию
  5. 05. Сделайте ваши векторы четкими
  6. 06. Создание пунктирных линий
  7. 07. Оберните текст легко
  8. 08. Создавайте быстрые цветовые заливки
  9. 09. Будьте организованы
  10. 10. Стань умным

Для многих веб-дизайнеров Adobe Creative Cloud Suite - и Photoshop в частности - играют важную роль в процессе создания сайта. Создаете ли вы Веб-сайт макеты или разработка отдельных элементов сайта, Photoshop - отличный вариант.

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

01. Используйте сеточные системы

Используйте сеточные системы

Существует ряд инструментов, которые помогут вам использовать сетки в Photoshop.

Грид-системы могут сэкономить много головной боли в веб-дизайне. Попробуйте использовать такие ресурсы, как Руководство Кэмерона Макфифи Расширение Photoshop, чтобы сделать пользовательские сетки легко и точно.

02. Получите все это

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

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

03. Изучите пользовательские шаблоны документов

Изучите пользовательские шаблоны документов

Photoshop поставляется с множеством веб-ориентированных пресетов. Проверь их!

Нажмите cmd + N, чтобы открыть окно «Новый документ». Меню «Preset» содержит базовые веб-настройки и предустановки для мобильных устройств, но в нем отсутствуют многие общие параметры для различных систем сетки, баннеров, устройств iOS и Android. Потратьте несколько минут, чтобы заполнить недостающие области.

04. Настройте тип по умолчанию

Закройте все открытые документы. Откройте палитру символов, чтобы выбрать предпочитаемое семейство шрифтов, вес, интервал и цвет. Нет больше стандартного множества!

05. Сделайте ваши векторы четкими

Держите ваши векторные объекты четкими. Выбрав инструмент «Прямоугольник» ( U ), откройте меню параметров геометрии на панели параметров. Установите флажок «Привязать к пикселям».

06. Создание пунктирных линий

Создание пунктирных линий

Создавайте пунктирные линии в фотошопе. Это одна из тех вещей, которые вы всегда должны делать.

Выберите инструмент «Кисть» ( B ), затем откройте палитру «Наборы кистей», а затем раскрывающееся меню в правом верхнем углу. Выберите квадратные кисти и нажмите «Добавить».

Теперь выберите кисть Hard Square 1 Pixel. Переключитесь на палитру «Кисти» и нажмите «Форма кончика кисти», установив расстояние до 300%. На холсте, удерживая клавишу Shift , перетаскивая кисть по горизонтали или по вертикали, чтобы создать четкую пунктирную линию.

07. Оберните текст легко

Используя быстрый обходной путь, Photoshop может применять функции переноса текста, аналогичные InDesign. Выберите инструмент Прямоугольник ( U ). На панели параметров установите для заливки контуры, установите для фигуры инструмент «Прямоугольник» и выберите «Добавить в область контура» (или нажмите + ).

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

Выберите инструмент «Текст» ( T ) и щелкните внутри большого прямоугольника, чтобы преобразовать фигуру в «Рабочий путь типа» для заполнения шрифтом. Можно дополнительно уточнить размеры рабочего контура с помощью инструмента «Прямоугольник» ( U ) и инструмента «Прямой выбор» ( A ).

08. Создавайте быстрые цветовые заливки

Создавайте быстрые цветовые заливки

Определенные ключевые команды оказываются полезными снова и снова. Быстрое заполнение является одним из них

Нажмите Alt + Delete, чтобы заполнить текст, фигуры и слои выбранным цветом переднего плана. Нажмите cmd + Delete, чтобы заполнить область выбранным цветом фона. Нажмите D, чтобы вернуться к стандартному черно-белому, и нажмите X, чтобы поменять местами основной и фоновый цвета.

09. Будьте организованы

Используйте cmd + G, чтобы сгруппировать слои и помочь вам оставаться организованными и сфокусированными. Группировка областей содержимого и компонентов - таких как навигация, области выделенного содержимого, вспомогательные компоненты и нижние колонтитулы - по отдельности избавит вас от головной боли на протяжении всего процесса проектирования и разработки проекта.

10. Стань умным

Использование смарт-объектов (перейдите в «Фильтр> Преобразовать для смарт-фильтров» и, удерживая клавишу Ctrl или щелкнув правой кнопкой мыши «Слой> Преобразовать в смарт-объект»), действительно может значительно ускорить ваш рабочий процесс в процессе проектирования. Преобразование больших фотографий и векторных объектов в смарт-объекты сохраняет исходное качество изображения после масштабирования, вращения и перекоса.

Следующая страница: еще 10 советов по веб-дизайну для Photoshop ...