Главная › Тарифы › Основы веб дизайна в фотошопе. Почему Photoshop Считается Лучшим Продуктом Adobe Для Веб-Дизайна. Так что выбирать

Основы веб дизайна в фотошопе. Почему Photoshop Считается Лучшим Продуктом Adobe Для Веб-Дизайна. Так что выбирать

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

Материалы для урока:

Шаг 1. Начнём с создания нового документа. В меню Файл - Новый (File - New) установим ширину и высоту 1100px, разрешение 72, фон - белый.

Далее, нам необходимо создать две направляющие, которые будут выступать в качестве границ для нашей страницы.
Выберите меню (View - New Guide). Для первой направляющей поставьте Ориентация - Вертикальная и положение 70 пикселей. (Orientation to Vertical and the Position 70 px).
Для второй направляющей снова выберите меню Просмотр - Новая направляющая (View - New Guide) и поставьте Ориентация - Вертикальная и положение 1030 пикселей.

И так, мы подготовили пространство для нашей веб-страницы шириной в 960 пикс.

Шаг 2. Следующий шаг - подготовка фона. Выберите инструмент Заливка (Paint Bucket Tool (G)), установите цвет переднего плана на 1e1e1e . Затем щелкните в любом месте на холсте, чтобы применить цвет к фоновому слою.

Давайте добавим текстуру нашему фону. Сделаем это в меню Фильтр - Шум - Добавить шум (Noise > Add Noise). Поставьте радиус (Amount) 2.5 и щёлкните ОК.

Шаг 3. Далее мы собираемся высветлить верхнюю часть нашей страницы. Этот ход будет привлекать основное внимание именно в эту область, иными словами - там будет фокус.
Выберите инструмент Кисть (Brush Tool), измените размер до 400 пикселей, Жесткость (Hardness) 0%

Создайте новый слой и назовите его "Spotlight".

Измените цвет переднего плана на "FFFFFF" (белый) и создайте круг в верхней части документа с помощью инструмента Кисть (Brush).

Чтобы вписать этот слой в фон, ему так же добавим немного шума, выбрав Фильтр - Шум - Добавить шум (Filter> Add Noise). Установите такие настройки. Эффект (Amount) 20 и выберите опцию Монохромный (Monochromatic) и кликните ОК.

Чтобы сгладить эту вспышку выберите Фильтр - Размытие Размытие по Гауссу (Filter- Blur-Gaussian Blur).
Установите радиус до 50,0 и нажмите кнопку ОК.

Наконец установите непрозрачность слоя Spotlight около 25%.

Шаг 4. Настало время добавить элементы графики. Скачаем изображение iPhone. Имейте в виду, вы можете использовать любой телефон, который соответствует вашим конкретным задачам (Android, Blackberry, и т.д...).
После загрузки откройте PSD файл в Photoshop. Раскройте папку “iPhones” щелкните правой кнопкой мыши на папке “iPhones” и выберите Дубликат группы (Duplicate Group). В появившемся окне дайте название группе (я использовал "iPhone") и укажите тот документ, над созданием которого вы сейчас трудитесь и нажмите кнопку ОК. Как только вы закончите, закройте PSD с iphone.

Позиция нашего первого iPhone касается левой направляющей и примерно 100px от верхней части холста документа.

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

Дублируйте группу iPhone выбрав меню Слои - Дубликат группы (Layer - Duplicate Group), назовите её “iPhone 2″ и нажмите кнопку ОК в диалоговом окне.
В меню Редактирование - Трансформирование - Масштабирование (Edit- Transform- Scale) изменим размер второго телефона. В настройках введите 107.0% по ширине и высоте. Позиция этого iPhone будет примерно 50px от верхнего края и 200px от левой направляющей.

Повторите шаг замены экрана в "iPhone 2" как упоминалось выше.

Шаг 5. Последний штрих для наших Iphones является создание их отражения. Выделим две группы -“iPhone” и “iPhone 2″, затем в меню Слои - Дубликат слоёв (Layer - Duplicate Layers) и нажмём ОК. Затем снова меню Слои - Объединить слои (Layer - Merge Layers).
Далее нам нужно перевернуть наши телефоны чтобы создать отражение. Пройдите в меню Редактирование - Трансформирование - Отразить по вертикали (Edit- Transform- Flip Vertical). Подгоните отражение под оригинальные телефоны.

Добавить маску слоя, нажав на иконку маски слоя в панели слоев.

Выберите инструмент Градиент (Gradient Tool (G)) от черного к белому и проведите линию сверху вниз по слою с отражением.

Наконец понизьте непрозрачность этого слоя до 30%.

Шаг 6. Далее следует добавить основные детали справа от наших телефонов. Прежде чем мы начнем, давайте добавим еще одну направляющую, чтобы можно было по ней выровнять будущие элементы дизайна. Выберите меню Просмотр - Новая направляющая (View - New Guide). Для этой направляющей поставьте Ориентация - Вертикальная и положение 550 пикселей. (Orientation to Vertical and the Position 550 px).
Примерно 100 пикс. от края документа мы добавим логотип. Автор использовал свой логотип. Вы можете просто использовать текст или вставить свой логотип.

Ниже логотипа мы добавим текст с описанием нашего приложения. Выберите инструмент Текст (Horizontal Type Tool) и нарисуйте прямоугольник между центральной и правой направляющими. Установите такие настройки для текста:
Шрифт (Font): Helvetica Neue
Размер (Size): 16 px
Стиль (Style): Regular
Интерлиньяж (Leading): 26 px
Трекинг (Tracking): -25
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Шаг 7. Далее мы создадим кнопку для посетителей, которые хотят приобрести наш продукт. Используем для этого инструмент (Rounded Rectangle Tool (U)) Нарисуем прямоугольник с такими настройками 240x75px 4px, где 4 это радиус скругления углов. Выровняйте кнопку левой стороной к центральной направляющей и опустите её ниже текста примерно на 45 пикс.

Теперь применим несколько стилей слоя. Дважды мышкой по слою в панели слоев и используйте скриншоты ниже для настроек.

Вставим иконку Apple и изменим её непрозрачность на 30%.

Справа от иконки добавим ещё текст, настройки ниже:
Шрифт (Font): Helvetica Neue
Размер (Size): 11 px и 24 px
Стиль (Style): Bold
Интерлиньяж (Leading): 26 px
Трекинг (Tracking): -25
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Добавим стили слоя к тексту. Воспользуйтесь настройками со скриншота.

Измените непрозрачность слоя с линией до 15%, дублируйте его, выбрав меню Слои - Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # 000000 (черный) и измените непрозрачность слоя со второй линией до 10%. Затем переместите чёрную линию на 1px влево от белой линии.

Последний элемент этой кнопки - значок, который указывает на Скачать. Воспользуемся инструментом Эллипс (Ellipse Tool) и нарисуем круг 25px в диаметре.

Добавьте следующие стили слоя для эллипса:

Наконец возьмите инструмент Произвольная фигура (Custom Shape Tool) и выберите стрелку (я использую форму "Стрелка 9"), нарисуйте стрелочку белым цветом 10px в ширину, разместите внутри круга.

Шаг 8. Создадим фигуру, на которой будет отображаться цена продукта. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), радиус скругления углов 4 пикс. Прямоугольник должен перекрывать собой кнопку загрузки и быть размером 52px в высоту и любой ширины больше чем 100 пикселей.

Изменените цвет этого прямоугольника на "2B2B2B " и переместите его ниже кнопки загрузки в панели слоёв.

Обводку

Теперь мы можем добавить информацию о цене. Для этого мы создадим два отдельных текстовых поля. Для каждого будет свой стиль.
Для первого текстового поля применим следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 19 px
Стиль (Style): Bold
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Для второго текстового поля используем такие настройки:

Шаг 9. Перейдём к нижней части нашей страницы, где нам необходимо создать разделитель. Для этого мы воспользуемся той же техникой, с помощью которой делали разделитель на кнопке загрузки.
Для этого выберите инструмент Линия (Line Tool) и зажав клавишу Shift, проведём линию от левой направляющей до правой, затем изменим цвет линии на "000000" (черный).

Изменените непрозрачность этой линии до 80%, дублируйте этот слой, выбрав меню Слои - Создать дубликат слоя (Layer> Duplicate Layer) и нажмите кнопку ОК. Измените цвет этой линии на # FFFFFF" (белый) и изменить непрозрачность слоя со второй линией до 10%. Затем переместите белую линию на 1px вниз от чёрной линии.

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

Выберите этот слой в панели слоев и нажмите дважды кнопку "Добавить маску", чтобы добавить векторную маску. Теперь выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), измените радиус углов до 6px и создайте прямоугольник с размером 175x120px.

В стилях слоя добавьте прямоугольнику Обводку (Stroke), настройки на скриншоте.

Повторите эти шаги для всех ваших скриншотов и задайте им расстояние между собой 35px

Шаг 11. Нарисуем разделитель для созданных скриншотов. Проведём линию в 1 пикс. от верхнего скриншота к самому нижнему и расположим этот разделитель правее от них примерно на 55 пикс. Измените цвет линии на "FFFFFF" (белый) и установите непрозрачность до 5%.

Шаг 12. Теперь добавим текст с информацией. Позиция текста 55 пикселей от левой линии разделителя. Для текста используем следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 24 px
Стиль (Style): Regular
Трекинг (Tracking): -10
Сглаживание (Anti-aliasing): Crisp Чёткое
Цвет (Color): #FFFFFF

Теперь давайте создадим список наших возможностей и поместим его под заголовком. Создайте текстовое поле и добавьте пять или шесть строчек и задайте им следующие настройки:
Шрифт (Font): Helvetica Neue
Размер (Size): 15 px
Стиль (Style): Regular
Интерлиньяж (Leading): 28 px
Трекинг (Tracking): -10
Сглаживание (Anti-aliasing): Sharp Резкое
Цвет (Color): #8d8c90

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

Шаг 13. Чтобы как то выделить список возможностей приложения, можно воспользоваться некоторыми хитростями. Сдвинем этот текстовый блок на 25px правее.

Используйте инструмент Эллипс (Ellipse Tool)с диаметром 9 пикс. и нарисуйте кружок цветом "bce086".

Добавить следующие стили слоя для этого круга:

Шаг 14. Дублируйте эти кружки в меню Слой - Создать дубликат слоя (Layer> Duplicate Layer) и разместите как на скриншоте ниже.

Шаг 15. Создайте ещё один разделитель, используя технику, которую мы применяли ранее.

Шаг 16. Теперь мы должны добавить некоторые полезные ссылки на нижней части. Сначала мы создадим четыре текстовых поля, бок о бок, которые будет содержать эти ссылки.
Начните с создания текстового поля, которое размером около 160x40px. Добавить в него текст и повторите 3 раза.

Вот пример текста, который вы можете использовать:
Вставка 1 : Следуйте @ MyCompany на Twitter для новостей и обновлений.
Вставка 2 : Для получения справки и поддержки.
Вставка 3 : Информацию о продукте.
Вставка 4 : Copyright 2011 "Моя компания", ООО.

Используйте такие настройки для текста:
Шрифт (Font): Helvetica Neue
Размер (Size): 12 px
Стиль (Style): Regular
Интерлиньяж (Leading): 20 px
Сглаживание (Anti-aliasing): Sharp Резкое
Цвет (Color): #5555552

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

Шаг 17.
Чтобы исправить нашу проблему с выравниванием, мы поместим текстовые блоки в группу под названием "Footer".
Во-первых, положение первого текстового поля 55 пикселей от левой направляющей, а последнее поле коснулось правой направляющей.

Теперь выделите четыре текстовых слоя в папке "Footer" , активируйте инструмент Перемещение (Move Tool) и нажмите кнопку Выравнивание центров по вертикали (Align vertical centers), а затем нажмите кнопку Выравнивание центров по горизонтали (Distribute horizontal centers).

Шаг 18. Теперь мы можем добавить некоторые пользовательские иконки, чтобы обозначить наши ссылки. Выберите инструмент Эллипс (Ellipse Tool (U) и создайте круг, 36px в диаметре, поместите его рядом с первым текстовым полем. Изменение цвет этого круга на "FFFFFF" (белый). Теперь выберите Слой - Растрировать слой (Layer- Rasterize Layer).

Добавим на созданный круг значок Твиттера, который можно взять

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

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

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

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

2. Web Font Plugin

Это бесплатный плагин, который позволяет использовать WebINK и шрифты Google Web Fonts в создании макетов веб-сайтов. Этот отличный инструмент дает легкий доступ к использованию более 1000 веб-шрифтов WebINK прямо в Adobe Photoshop. Чтобы получить плагин, вам придется скачать и установить пробную версию Suitcase Fusion 5 - профессиональный менеджер шрифтов от Extensis. В настоящее время плагин Web Font может быть использован в Adobe Photoshop CS5, Adobe Photoshop CS5.1, Adobe Photoshop CS6, Adobe Photoshop CC (версия 14), Adobe Creative Suite 5.5.

3. GuideGuide

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

4. Flaticon.com

Flaticon.com - это популярная платформа с более 35 тысячами иконок, которые отвечают всем последним трендам в дизайне. А некоторое время назад платформа разработала специальный плагин для Photoshop, чтобы дизайнеры могли быстро находить нужные иконки, не выходя из своей рабочей среды. Созданный специально для дизайнеров и разработчиков, Flaticon - это классный бесплатный проект, который вы обязательно должны посмотреть. Вы можете находить необходимые иконки, выбирать и использовать их в векторном формате. Вы также можете настраивать их по своему усмотрению.

5. CSS3PS

6. Cut&Slice me

Cut&Slice me - плагин Adobe Photoshop CS6, разработанный Daniel Peruho. Инструмент повышает до современного процесса нарезку с большим количеством мощных функций. Особенности этого плагина включают в себя принятие группы слоев и рассмотрения ее как единого объекта. После этого он обрезает лишние пиксели и экспортирует группу в файл изображения.

7. SubtlePatterns

Ваш сайт или дизайн нуждается в детальном фоновом рисунке? В этом случае вы можете использовать плагин SubtlePatterns для своих нужд. Он поставляется с огромным разнообразием шаблонов и весьма легок в использовании. К слову сказать, почти все шаблоны были созданы самими пользователями, так что вы можете даже не сомневаться в их качестве. Даже если вы выберете замысловатые компоненты для шаблона, можете быть уверены, что они не будут отвлекать посетителей сайта от основного контента.

8. Skeuomorphism

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

9. SiteGrinder

Как создавать веб-страницы из PSD? Используйте SiteGrinder. Инструмент поможет вам превратить ваши файлы PSD в веб-страницы. С SiteGrinder, вам не нужно резать или писать код. Если вам когда-либо посчастливилось работать с Divine Elemente, то вы почти сразу заметите, что данный плагин имеет практически аналогичные удобства в использовании.

10. SuitcaseFusion

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

Всего вам доброго!!!

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

Открываем фотошоп, после установки он будет выглядеть так:

Переходим во вкладку «окно» («window») -> «workspace» (рабочая среда) и выбрать типография («typograthy»)

У вас появится такая панель.

Обычно закрываю панельку «параграф стайл», для этого нужно 2 раза кликнуть и появится панель символ и абзац (работа со шрифтами). Разумеется, слева, панель инструментов.

Нажимаем ctrl + K, открываются основные настройки.

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

Когда создаешь новый файл, внимательно смотри, чтобы при каждом новом проекте в настройках стояли пиксели, в разрешении (resolution) 72 пикселя на дюйм, и цветовой режим RGB 8 bit. Этих настроек достаточно.

Следующая важная настройка стрелки. Обязательно поставь галку в поле «автовыбор» (auto select) выставить «слой» и галочку «показывать управляемый элемент».

На этом с основными настройками всё. Теперь об объектах, которые используюьтся в ФШ для веб-дизайна.
Чаще всего используется прямоугольник. Мы просто его протягиваем нужного размера, задаем цвет заполнения, цвет и ширину обводки. Есть так же прямоугольник со скругленными углами. Его можно найти если в панеле инструментов на прямоугольнике нажать маленькую стрелку в правом нижнем углу.

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

Интересные особенности фотошопа: если выделить объект и зажать клавишу shift, то он меняется пропорционально и не деформируется. Это очень помогает при работе с иконками или фотографиями. Если зажать клавишу alt при перетаскивании вы просто копируете элемент. Вам не нужно дополнительно нажимать «копировать» и «вставить».

Настройки смешивания в фотошоп

Очень часто в ФШ используются настройки смешивания. Выделяешь объект, 2 раза кликаешь по слою, открывается окно настроек слоя.

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

Как сделать кнопку в фотошоп

Создаю новый файл размером 400×300 пикселей. Выбираю прямоугольник со скругленными краями с радиусом скругления 5 пикселей. Задаю моему прямоугольнику цвет. Беру инструмент текст, кликаю на нужном мне месте и пишу «загрузить». Выделяю текст, выбираю шрифт (можно его выбрать до того, как написали текст). Стрелкой выравниваю надпись, чтобы она была по центру. Кстати, для выравнивания можно зажать кнопку shift выбрать необходимые элементы (в нашем случае прямоугольник и текст) и на панели управления сверху нажать на иконку «выравнивание центров по горизонтали». Всё выравняется автоматически. Или можно использовать стрелки на клавиатуре, при каждом нажатии на стрелку выделенный элемент будет смещаться на 1 пиксель, с зажатой клавишей shift - на 10. Я часто использую стрелки для выравнивания, это очень удобно. Теперь придадим объема кнопке. Кликаем 2 раза на слой, добавляем настройки смешивания: немного внутренней тени. Я ставлю угол падения тени -90 градусов. Размер 4 пиксела и прозрачность 57.

Можно использовать такие же параметры, а можно сделать какие-то свои. Кнопка готова.

Далее выделяем наши 2 слоя в поле слоёв справа с помощью зажатой кнопки ctrl, нажимаем ctrl + G и получаем группу слоёв. Назову её button. Далее делаем скриншот нашей картинки с помощью gyazo и отправляем в комментарии под постом.