Создание web элементов

Опубликовано Фев 19, 2017 в Дизайн сайта, Создание сайтов | Нет комментариев

Создание web элементов

В этом уроке мы создадим в свой собственный комплект web элементов. Это будет единый документ Photoshop, куда войдут все разновидности форм и элементов дизайна, которые вы могли бы использовать в своих будущих проектах.

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

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

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

Готовый омплект web элементов созданный Photoshop

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

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

Шаг 1

Создайте документ 1000 x 1000 px с разрешением 72 dpi (web стандарт). Сейчас он возможно немного великоват, но обрезать никогда не поздно.

Выберите для фона темный, синевато-серый цвет (#383e44), затем создайте новый слой и, залив его более светлым, серым (#7a7a7a), добавьте шум, перейдя в Filter > Noise > Add noise… (Фильтр > Шум > Добавить шум) и выбрав такие параметры:

Amount (Эффект) : 10%

Distribution (Распределение): Gaussian (По Гауссу)

Monochromatic — Checked (Монохромный – выбрано)

Затем, изменив blend mode (режим смешивания) на Luminosity (Яркость) и уменьшив Opacity (Непрозрачность) до 10%, вы должны получить вот такую зашумленную текстуру:

Фон на котором будут расположены элементы дизайна

Шаг 2

На этом шаге мы создадим фоновый узор.

Создайте новый документ 45 x 45 px и, выбрав Pencil Tool (Карандаш) размером 1px, нарисуйте вот такой узор:

Фоновый узор

Длина каждого пунктира составляет 2 px, а промежутки занимают 1px. Увеличьте масштаб для точности!

Завершив рисунок, следуйте в Edit > Define Pattern… (Редактирование > Определить узор…) и присвойте узору имя. Затем вернитесь к основному документу и создайте новый слой с белым фоном. Двойным щелчком по этому слою в палитре слоев вызовите окно Layer Styles (Стиль слоя) и выберите Pattern Overlay (Наложение узора). Кликнув на миниатюре, откройте список узоров и выберите последний, созданный вами. Укажите для узора режим смешивания (Blending mode) перекрытие (Overlay) и масштаб 69%. Затем для самого слоя измените Blending Mode (Режим смешивания) на Overlay (Перекрытие) и установите Opacity (Непрозрачность) 10%.

Результат:

Готовая подложка для веб-элементов

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

Шаг 3

Теперь, закончив с фоном, нужно максимально упростить предстоящую задачу создания и редактирования web элементов.

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

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

Сначала займемся обычными кнопками. Прежде всего, нужно создать две отдельных группы слоев. Верхнюю группу назовем «Above color» (Над цветом), а вторую «Colored elements» (Цветные элементы). Начнем со второй группы, создав внутри нее новый слой и выбрав затем Rounded Rectangle Tool (Прямоугольник со скругленными углами).

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

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

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

Для этих цветных элементов очень важно, чтобы параметр Fill (Заливка) был установлен на 0%.

ЗаливкаНастройка теней

Нстройка внутренней тени для кнопок

Нвстройка внутреннего свечения у кнопок

Настройки наложения градиента у кнопок

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

Было бы полезно сохранить для себя набор стилей по текущим параметрам, кликнув в окне Layer Styles (Стиль слоя) на кнопку New Style… (Новый стиль).

Теперь скопируйте этот слой дважды и поместите оба дубликата рядом друг с другом, чтобы в итоге получилось три кнопки. Для новых двух кнопок мы внесем изменения в стили слоя, и не забудьте, что fill (заливка) должна быть на 0%.

Вторая кнопка будет точно такой же, как первая, мы только увеличим для нее размер Inner Glow (Внутреннее свечение):

Внутренне свечение - кнопка 2Кнопка 3 тоже останется такой же, как первая, за исключением стиля Gradient Overlay (Наложение градиента), в окне настроек которого мы поставим галочку в чекбоксе Reverse (Инверсия).

Внутреннее свечение -Кнопка 3

Ваши три кнопки теперь должны выглядеть так:

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

Все три кнопки с различными эффектамиТеперь добавьте кнопкам свой текст, сделав это в группе слоев «Above color» .

Добавляем нужный текст на кнопкиНапишите в центре название и, применив к тексту эффект Drop Shadow (Тень) с параметрами Distance (Смещение) и Size (Размер) по 1, просто скопируйте его на две другие кнопки, а на последней измените угол падения тени на -90°.

Изображение элементов: "кнопоки"

На данный момент кнопки готовы. Если вы хотите изменить размер кнопок, очень важно знать, как это сделать. Это не просто нажать клавишу V и перетаскивать объект по холсту… Вы должны включить Direct Selection Tool (Стрелка), (A) и, выбрав одновременно (с нажатой клавишей Shift) четыре нужных опорных точки, перетащить их на новое место.

Шаг 4

Переходим к созданию кнопок, призывающих к действию.

На новом слое внутри группы «Colored elements» (Цветные элементы) нарисуйте скругленный прямоугольник (Rounded Rectangle) с такими параметрами:

начало создание второй группы кнопок

Скопируйте (cmd/ctrl+J) фигуру дважды и расположите дубликаты рядом друг с другом. Если вы создали и сохранили набор стилей для трех ранее сделанных кнопок, вы можете применить эти три стиля к текущим кнопкам, в противном случае сделайте то же самое вручную, повторив действия шага 3.

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

Результат:

Итоговое изображение второй группы кнопок

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

Мы поместим эти кнопки в неглубокие «ниши» такой же формы. Чтобы реализовать это, потребуется еще одна группа слоев, поэтому создайте ее и назовите «Call to Action» (Призыв к действию), а затем, убедившись, что она не попала в одну из уже существующих двух папок, поместите под ними.

А сейчас немного математики, но не волнуйтесь, это не сложно.

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

Поэтому мы воспользуемся простым расчетом, добавив с каждой стороны исходной формы по 10 px. Таким образом, для создаваемого прямоугольника нужно указать в окне настроек размеры 200 x 50 px и радиус закругления 25 рх. Выбрав такой #202529 цвет, щелкните на холсте, чтобы вставить фигуру.

Размещая «нишу» за кнопкой, включите направляющие для точного совмещения центров фигур.

Затем добавьте следующие стили слоя:

Настройка теней - вторая группа кнопок

Настройка внутренней тени - вторая группа кнопок

настройка внутреннего свечения - вторая группа кнопок

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

Результат:

внутренняя тень с кнопками

Шаг 5

Переходим к созданию кнопок «Buy» (Купить), и они должны выглядеть почти так же эффектно, как кнопки «Call to Action», потому что вы, конечно, хотите, чтобы посетители кликали по ним.

На новом слое внутри группы «Colored elements» возьмите Ellipse Tool (Эллипс) и нарисуйте круг с такими параметрами:

Создаем кнопку "купить"Как и в предыдущих случаях, сделаем две копии этой кнопки, чтобы одну из них использовать для эффекта «rollover», а вторую для кнопки в нажатом состоянии. Используйте тот же набор стилей слоя, который мы уже применяли, но размер текста снова нужно изменить, подогнав под габариты кнопки. Я написал на кнопке «BUY» (Купить), выбрав такие параметры шрифта:

Настройки шрифта для кнопок: "Купить"

Не забудьте, что все текстовые слои должны быть внутри группы «Above color» .

Эти кнопки мы также поместим внутри круглых «ниш», как и предыдущие. Это означает, что для новых форм нужно создать очередную, отдельную группу слоев и поместить ее ниже всех других групп (но выше фона, естественно). Нарисуйте круг размером 120 x 120 px и, выбрав такой #383d43 цвет, добавьте следующие эффекты:

эффекты для кнопок купить - тень

эффекты для кнопок купить - внутренее свечение

эффекты для кнопок купить - внутреняя тень

Результат:

Готовое изображение кнопок "купить"

Шаг 6

На очереди горизонтальное меню с вкладками. Поскольку мы не будем делать его столь же красочными, как другие элементы, можно будет все наши слои сложить в одну папку, поэтому создайте новую группу с именем «Tabs» (Вкладки) и перетащите ее в самый низ в палитре слоев. Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом 5 рх и создайте фигуру с размерами 300 x 30 px, затем добавьте ей следующие стили слоя:

 горизонтальное меню с вкладками - внутренее свечение

 горизонтальное меню с вкладками - внутреняя тень

 горизонтальное меню с вкладками - тень

Теперь включите Rectangle Tool (Прямоугольник) и снова проведите «математические расчеты». Наше меню размером 300 x 30 px будет состоять их трех вкладок, следовательно, если мы выделяем, например, среднюю кнопку, нужно создать прямоугольник с размерами 100 x 30 px. Поместите его в центре, включив для этого направляющие. На этом шаге очень важно придерживаться выбранных параметров стиля меню, чтобы цвета выделенной вкладки гармонично вписывались в панель. Если у вас есть свои соображения по этому поводу, смело выбирайте собственные цвета, или убавьте высоту прямоугольника на 2px, чтобы он не влиял на эффект цветового выделения.

А тем, кто аккуратно и строго повторял все действия на текущем шаге урока, предлагается добавить прямоугольнику следующие стили слоя:

горизонтальное меню с вкладками - дополнительно

Теперь напишите свои названия вкладок, выбрав, как и прежде, белый шрифт Myriad Pro размером 13 рх и добавив такую же тень (Drop Shadow), как на всех предыдущих надписях, изменив лишь ее угол на -90° для средней вкладки.

Результат:

Итоговое изображение горизонтального меню

Шаг 7

Создайте новую группу слоев с именем «Sliders» (Слайдеры).

Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и, выбрав такой #383e45 цвет, нарисуйте фигуру с параметрами: высота — 8px, ширина 225px, радиус — 25px, которая будет изображать полосу регулятора.

Затем добавьте следующие стили слоя:

Создание web элементовВ этом уроке мы создадим в свой собственный комплект web элементов. Это будет единый документ Photoshop, куда войдут все разновидности форм и элементов дизайна, которые вы могли бы использовать в своих будущих проектах.

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

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

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

Готовый омплект web элементов созданный Photoshop

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

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

Шаг 1

Создайте документ 1000 x 1000 px с разрешением 72 dpi (web стандарт). Сейчас он возможно немного великоват, но обрезать никогда не поздно.

Выберите для фона темный, синевато-серый цвет (#383e44), затем создайте новый слой и, залив его более светлым, серым (#7a7a7a), добавьте шум, перейдя в Filter > Noise > Add noise… (Фильтр > Шум > Добавить шум) и выбрав такие параметры:

Amount (Эффект) : 10%

Distribution (Распределение): Gaussian (По Гауссу)

Monochromatic — Checked (Монохромный – выбрано)

Затем, изменив blend mode (режим смешивания) на Luminosity (Яркость) и уменьшив Opacity (Непрозрачность) до 10%, вы должны получить вот такую зашумленную текстуру:

Фон на котором будут расположены элементы дизайна

Шаг 2

На этом шаге мы создадим фоновый узор.

Создайте новый документ 45 x 45 px и, выбрав Pencil Tool (Карандаш) размером 1px, нарисуйте вот такой узор:

Фоновый узорДлина каждого пунктира составляет 2 px, а промежутки занимают 1px. Увеличьте масштаб для точности!

Завершив рисунок, следуйте в Edit > Define Pattern… (Редактирование > Определить узор…) и присвойте узору имя. Затем вернитесь к основному документу и создайте новый слой с белым фоном. Двойным щелчком по этому слою в палитре слоев вызовите окно Layer Styles (Стиль слоя) и выберите Pattern Overlay (Наложение узора). Кликнув на миниатюре, откройте список узоров и выберите последний, созданный вами. Укажите для узора режим смешивания (Blending mode) перекрытие (Overlay) и масштаб 69%. Затем для самого слоя измените Blending Mode (Режим смешивания) на Overlay (Перекрытие) и установите Opacity (Непрозрачность) 10%.

Результат:

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

Шаг 3

Теперь, закончив с фоном, нужно максимально упростить предстоящую задачу создания и редактирования web элементов.

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

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

Сначала займемся обычными кнопками. Прежде всего, нужно создать две отдельных группы слоев. Верхнюю группу назовем «Above color» (Над цветом), а вторую «Colored elements» (Цветные элементы). Начнем со второй группы, создав внутри нее новый слой и выбрав затем Rounded Rectangle Tool (Прямоугольник со скругленными углами).

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

Начало создания кнопокПривязку к пикселям мы используется для того, чтобы кнопки получились изящными и четкими, как если бы они были созданы с помощью чистого кода.

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

Для этих цветных элементов очень важно, чтобы параметр Fill (Заливка) был установлен на 0%.

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

Было бы полезно сохранить для себя набор стилей по текущим параметрам, кликнув в окне Layer Styles (Стиль слоя) на кнопку New Style… (Новый стиль).

Теперь скопируйте этот слой дважды и поместите оба дубликата рядом друг с другом, чтобы в итоге получилось три кнопки. Для новых двух кнопок мы внесем изменения в стили слоя, и не забудьте, что fill (заливка) должна быть на 0%.

Вторая кнопка будет точно такой же, как первая, мы только увеличим для нее размер Inner Glow (Внутреннее свечение):

Внутренне свечение - кнопка 2Кнопка 3 тоже останется такой же, как первая, за исключением стиля Gradient Overlay (Наложение градиента), в окне настроек которого мы поставим галочку в чекбоксе Reverse (Инверсия).

Внутреннее свечение -Кнопка 3

Ваши три кнопки теперь должны выглядеть так:

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

Все три кнопки с различными эффектами
Теперь добавьте кнопкам свой текст, сделав это в группе слоев «Above color» .

Добавляем нужный текст на кнопкиНапишите в центре название и, применив к тексту эффект Drop Shadow (Тень) с параметрами Distance (Смещение) и Size (Размер) по 1, просто скопируйте его на две другие кнопки, а на последней измените угол падения тени на -90°.

Изображение элементов: "кнопоки"

На данный момент кнопки готовы. Если вы хотите изменить размер кнопок, очень важно знать, как это сделать. Это не просто нажать клавишу V и перетаскивать объект по холсту… Вы должны включить Direct Selection Tool (Стрелка), (A) и, выбрав одновременно (с нажатой клавишей Shift) четыре нужных опорных точки, перетащить их на новое место.

Шаг 4

Переходим к созданию кнопок, призывающих к действию.

На новом слое внутри группы «Colored elements» (Цветные элементы) нарисуйте скругленный прямоугольник (Rounded Rectangle) с такими параметрами:

начало создание второй группы кнопок

Скопируйте (cmd/ctrl+J) фигуру дважды и расположите дубликаты рядом друг с другом. Если вы создали и сохранили набор стилей для трех ранее сделанных кнопок, вы можете применить эти три стиля к текущим кнопкам, в противном случае сделайте то же самое вручную, повторив действия шага 3.

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

Результат:

Итоговое изображение второй группы кнопок

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

Мы поместим эти кнопки в неглубокие «ниши» такой же формы. Чтобы реализовать это, потребуется еще одна группа слоев, поэтому создайте ее и назовите «Call to Action» (Призыв к действию), а затем, убедившись, что она не попала в одну из уже существующих двух папок, поместите под ними.

А сейчас немного математики, но не волнуйтесь, это не сложно.

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

Поэтому мы воспользуемся простым расчетом, добавив с каждой стороны исходной формы по 10 px. Таким образом, для создаваемого прямоугольника нужно указать в окне настроек размеры 200 x 50 px и радиус закругления 25 рх. Выбрав такой #202529 цвет, щелкните на холсте, чтобы вставить фигуру.

Размещая «нишу» за кнопкой, включите направляющие для точного совмещения центров фигур.

Затем добавьте следующие стили слоя:

Настройка теней - вторая группа кнопок

Настройка внутренней тени - вторая группа кнопок

настройка внутреннего свечения - вторая группа кнопок

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

Результат:

внутренняя тень с кнопками

Шаг 5

Переходим к созданию кнопок «Buy» (Купить), и они должны выглядеть почти так же эффектно, как кнопки «Call to Action», потому что вы, конечно, хотите, чтобы посетители кликали по ним.

На новом слое внутри группы «Colored elements» возьмите Ellipse Tool (Эллипс) и нарисуйте круг с такими параметрами:

Создаем кнопку "купить"
Как и в предыдущих случаях, сделаем две копии этой кнопки, чтобы одну из них использовать для эффекта «rollover», а вторую для кнопки в нажатом состоянии. Используйте тот же набор стилей слоя, который мы уже применяли, но размер текста снова нужно изменить, подогнав под габариты кнопки. Я написал на кнопке «BUY» (Купить), выбрав такие параметры шрифта:

Настройки шрифта для кнопок: "Купить"

Не забудьте, что все текстовые слои должны быть внутри группы «Above color» .

Эти кнопки мы также поместим внутри круглых «ниш», как и предыдущие. Это означает, что для новых форм нужно создать очередную, отдельную группу слоев и поместить ее ниже всех других групп (но выше фона, естественно). Нарисуйте круг размером 120 x 120 px и, выбрав такой #383d43 цвет, добавьте следующие эффекты:

эффекты для кнопок купить - тень

эффекты для кнопок купить - внутренее свечение

эффекты для кнопок купить - внутреняя тень

Результат:

Готовое изображение кнопок "купить"

Шаг 6

На очереди горизонтальное меню с вкладками. Поскольку мы не будем делать его столь же красочными, как другие элементы, можно будет все наши слои сложить в одну папку, поэтому создайте новую группу с именем «Tabs» (Вкладки) и перетащите ее в самый низ в палитре слоев. Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом 5 рх и создайте фигуру с размерами 300 x 30 px, затем добавьте ей следующие стили слоя:

 горизонтальное меню с вкладками - внутренее свечение

 горизонтальное меню с вкладками - внутреняя тень

 горизонтальное меню с вкладками - тень

 горизонтальное меню с вкладками - наложение градиента

Теперь включите Rectangle Tool (Прямоугольник) и снова проведите «математические расчеты». Наше меню размером 300 x 30 px будет состоять их трех вкладок, следовательно, если мы выделяем, например, среднюю кнопку, нужно создать прямоугольник с размерами 100 x 30 px. Поместите его в центре, включив для этого направляющие. На этом шаге очень важно придерживаться выбранных параметров стиля меню, чтобы цвета выделенной вкладки гармонично вписывались в панель. Если у вас есть свои соображения по этому поводу, смело выбирайте собственные цвета, или убавьте высоту прямоугольника на 2px, чтобы он не влиял на эффект цветового выделения.

А тем, кто аккуратно и строго повторял все действия на текущем шаге урока, предлагается добавить прямоугольнику следующие стили слоя:

горизонтальное меню с вкладками - дополнительно

Теперь напишите свои названия вкладок, выбрав, как и прежде, белый шрифт Myriad Pro размером 13 рх и добавив такую же тень (Drop Shadow), как на всех предыдущих надписях, изменив лишь ее угол на -90° для средней вкладки.

Результат:

Итоговое изображение горизонтального меню

Шаг 7

Создайте новую группу слоев с именем «Sliders» (Слайдеры).

Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и, выбрав такой #383e45 цвет, нарисуйте фигуру с параметрами: высота — 8px, ширина 225px, радиус — 25px, которая будет изображать полосу регулятора.

Затем добавьте следующие стили слоя:

Начальные параметры для элементов: "Слайдер"

Теперь скопируйте этот слой трижды, чтобы в итоге получилось четыре полоски.

Затем включите Ellipse Tool (Эллипс) и, выбрав размер 12 x 12 px, нарисуйте на первых двух полосах по одному кружочку, которые будут представлять ползунки, указывающие степень заполнения.

К первому кружочку добавьте следующие стили слоя:

Основные настройки для ползунка

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

Теперь мы сделаем пару ползунков остроконечной формы для регулятора точной настройки.

Нарисуйте маленький скругленный прямоугольник с параметрами: высота и ширина — 10px, радиус — 2px.

Сохраняя объект активным, установите посредине направляющую, затем выберите Direct Selection Tool (Стрелка) и кликните по светлому контуру фигуры, вызвав появление опорных точек, из которых нас интересуют две нижние, определяющие кривизну каждого угла. Выберите ту, что ближе к центру, и тащите вниз, склоняясь к направляющей, пока не сомкнетесь с ней. То же самое проделайте и с другой опорной точкой, закончив точно в том же месте, куда притащили первую.

Оцените, не слишком ли низко вы переместили опорные точки, сравнив свой результат с рисунком ниже, как с примером для подражания, на котором, однако, фигура тоже излишне вытянута. В идеале заостренная часть должна превышать исходный размер на 5px, что составляет половину высоты прямоугольника.

Ползунок слайдера

Создание web элементовВ этом уроке мы создадим в свой собственный комплект web элементов. Это будет единый документ Photoshop, куда войдут все разновидности форм и элементов дизайна, которые вы могли бы использовать в своих будущих проектах.

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

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

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

Готовый омплект web элементов созданный Photoshop

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

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

Шаг 1

Создайте документ 1000 x 1000 px с разрешением 72 dpi (web стандарт). Сейчас он возможно немного великоват, но обрезать никогда не поздно.

Выберите для фона темный, синевато-серый цвет (#383e44), затем создайте новый слой и, залив его более светлым, серым (#7a7a7a), добавьте шум, перейдя в Filter > Noise > Add noise… (Фильтр > Шум > Добавить шум) и выбрав такие параметры:

Amount (Эффект) : 10%

Distribution (Распределение): Gaussian (По Гауссу)

Monochromatic — Checked (Монохромный – выбрано)

Затем, изменив blend mode (режим смешивания) на Luminosity (Яркость) и уменьшив Opacity (Непрозрачность) до 10%, вы должны получить вот такую зашумленную текстуру:

Фон на котором будут расположены элементы дизайна

Шаг 2

На этом шаге мы создадим фоновый узор.

Создайте новый документ 45 x 45 px и, выбрав Pencil Tool (Карандаш) размером 1px, нарисуйте вот такой узор:

Фоновый узорДлина каждого пунктира составляет 2 px, а промежутки занимают 1px. Увеличьте масштаб для точности!

Завершив рисунок, следуйте в Edit > Define Pattern… (Редактирование > Определить узор…) и присвойте узору имя. Затем вернитесь к основному документу и создайте новый слой с белым фоном. Двойным щелчком по этому слою в палитре слоев вызовите окно Layer Styles (Стиль слоя) и выберите Pattern Overlay (Наложение узора). Кликнув на миниатюре, откройте список узоров и выберите последний, созданный вами. Укажите для узора режим смешивания (Blending mode) перекрытие (Overlay) и масштаб 69%. Затем для самого слоя измените Blending Mode (Режим смешивания) на Overlay (Перекрытие) и установите Opacity (Непрозрачность) 10%.

Результат:

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

Шаг 3

Теперь, закончив с фоном, нужно максимально упростить предстоящую задачу создания и редактирования web элементов.

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

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

Сначала займемся обычными кнопками. Прежде всего, нужно создать две отдельных группы слоев. Верхнюю группу назовем «Above color» (Над цветом), а вторую «Colored elements» (Цветные элементы). Начнем со второй группы, создав внутри нее новый слой и выбрав затем Rounded Rectangle Tool (Прямоугольник со скругленными углами).

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

Начало создания кнопокПривязку к пикселям мы используется для того, чтобы кнопки получились изящными и четкими, как если бы они были созданы с помощью чистого кода.

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

Для этих цветных элементов очень важно, чтобы параметр Fill (Заливка) был установлен на 0%.

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

Было бы полезно сохранить для себя набор стилей по текущим параметрам, кликнув в окне Layer Styles (Стиль слоя) на кнопку New Style… (Новый стиль).

Теперь скопируйте этот слой дважды и поместите оба дубликата рядом друг с другом, чтобы в итоге получилось три кнопки. Для новых двух кнопок мы внесем изменения в стили слоя, и не забудьте, что fill (заливка) должна быть на 0%.

Вторая кнопка будет точно такой же, как первая, мы только увеличим для нее размер Inner Glow (Внутреннее свечение):

Внутренне свечение - кнопка 2Кнопка 3 тоже останется такой же, как первая, за исключением стиля Gradient Overlay (Наложение градиента), в окне настроек которого мы поставим галочку в чекбоксе Reverse (Инверсия).

Внутреннее свечение -Кнопка 3

Ваши три кнопки теперь должны выглядеть так:

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

Все три кнопки с различными эффектами
Теперь добавьте кнопкам свой текст, сделав это в группе слоев «Above color» .

Добавляем нужный текст на кнопкиНапишите в центре название и, применив к тексту эффект Drop Shadow (Тень) с параметрами Distance (Смещение) и Size (Размер) по 1, просто скопируйте его на две другие кнопки, а на последней измените угол падения тени на -90°.

Изображение элементов: "кнопоки"

На данный момент кнопки готовы. Если вы хотите изменить размер кнопок, очень важно знать, как это сделать. Это не просто нажать клавишу V и перетаскивать объект по холсту… Вы должны включить Direct Selection Tool (Стрелка), (A) и, выбрав одновременно (с нажатой клавишей Shift) четыре нужных опорных точки, перетащить их на новое место.

Шаг 4

Переходим к созданию кнопок, призывающих к действию.

На новом слое внутри группы «Colored elements» (Цветные элементы) нарисуйте скругленный прямоугольник (Rounded Rectangle) с такими параметрами:

начало создание второй группы кнопок

Скопируйте (cmd/ctrl+J) фигуру дважды и расположите дубликаты рядом друг с другом. Если вы создали и сохранили набор стилей для трех ранее сделанных кнопок, вы можете применить эти три стиля к текущим кнопкам, в противном случае сделайте то же самое вручную, повторив действия шага 3.

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

Результат:

Итоговое изображение второй группы кнопок

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

Мы поместим эти кнопки в неглубокие «ниши» такой же формы. Чтобы реализовать это, потребуется еще одна группа слоев, поэтому создайте ее и назовите «Call to Action» (Призыв к действию), а затем, убедившись, что она не попала в одну из уже существующих двух папок, поместите под ними.

А сейчас немного математики, но не волнуйтесь, это не сложно.

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

Поэтому мы воспользуемся простым расчетом, добавив с каждой стороны исходной формы по 10 px. Таким образом, для создаваемого прямоугольника нужно указать в окне настроек размеры 200 x 50 px и радиус закругления 25 рх. Выбрав такой #202529 цвет, щелкните на холсте, чтобы вставить фигуру.

Размещая «нишу» за кнопкой, включите направляющие для точного совмещения центров фигур.

Затем добавьте следующие стили слоя:

Настройка теней - вторая группа кнопок

Настройка внутренней тени - вторая группа кнопок

настройка внутреннего свечения - вторая группа кнопок

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

Результат:

внутренняя тень с кнопками

Шаг 5

Переходим к созданию кнопок «Buy» (Купить), и они должны выглядеть почти так же эффектно, как кнопки «Call to Action», потому что вы, конечно, хотите, чтобы посетители кликали по ним.

На новом слое внутри группы «Colored elements» возьмите Ellipse Tool (Эллипс) и нарисуйте круг с такими параметрами:

Создаем кнопку "купить"
Как и в предыдущих случаях, сделаем две копии этой кнопки, чтобы одну из них использовать для эффекта «rollover», а вторую для кнопки в нажатом состоянии. Используйте тот же набор стилей слоя, который мы уже применяли, но размер текста снова нужно изменить, подогнав под габариты кнопки. Я написал на кнопке «BUY» (Купить), выбрав такие параметры шрифта:

Настройки шрифта для кнопок: "Купить"

Не забудьте, что все текстовые слои должны быть внутри группы «Above color» .

Эти кнопки мы также поместим внутри круглых «ниш», как и предыдущие. Это означает, что для новых форм нужно создать очередную, отдельную группу слоев и поместить ее ниже всех других групп (но выше фона, естественно). Нарисуйте круг размером 120 x 120 px и, выбрав такой #383d43 цвет, добавьте следующие эффекты:

эффекты для кнопок купить - тень

эффекты для кнопок купить - внутренее свечение

эффекты для кнопок купить - внутреняя тень

Результат:

Готовое изображение кнопок "купить"

Шаг 6

На очереди горизонтальное меню с вкладками. Поскольку мы не будем делать его столь же красочными, как другие элементы, можно будет все наши слои сложить в одну папку, поэтому создайте новую группу с именем «Tabs» (Вкладки) и перетащите ее в самый низ в палитре слоев. Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) с радиусом 5 рх и создайте фигуру с размерами 300 x 30 px, затем добавьте ей следующие стили слоя:

 горизонтальное меню с вкладками - внутренее свечение

 горизонтальное меню с вкладками - внутреняя тень

 горизонтальное меню с вкладками - тень

 горизонтальное меню с вкладками - наложение градиента

Теперь включите Rectangle Tool (Прямоугольник) и снова проведите «математические расчеты». Наше меню размером 300 x 30 px будет состоять их трех вкладок, следовательно, если мы выделяем, например, среднюю кнопку, нужно создать прямоугольник с размерами 100 x 30 px. Поместите его в центре, включив для этого направляющие. На этом шаге очень важно придерживаться выбранных параметров стиля меню, чтобы цвета выделенной вкладки гармонично вписывались в панель. Если у вас есть свои соображения по этому поводу, смело выбирайте собственные цвета, или убавьте высоту прямоугольника на 2px, чтобы он не влиял на эффект цветового выделения.

А тем, кто аккуратно и строго повторял все действия на текущем шаге урока, предлагается добавить прямоугольнику следующие стили слоя:

горизонтальное меню с вкладками - дополнительно

Теперь напишите свои названия вкладок, выбрав, как и прежде, белый шрифт Myriad Pro размером 13 рх и добавив такую же тень (Drop Shadow), как на всех предыдущих надписях, изменив лишь ее угол на -90° для средней вкладки.

Результат:

Итоговое изображение горизонтального меню

Шаг 7

Создайте новую группу слоев с именем «Sliders» (Слайдеры).

Возьмите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и, выбрав такой #383e45 цвет, нарисуйте фигуру с параметрами: высота — 8px, ширина 225px, радиус — 25px, которая будет изображать полосу регулятора.

Затем добавьте следующие стили слоя:

Начальные параметры для элементов: "Слайдер"

Теперь скопируйте этот слой трижды, чтобы в итоге получилось четыре полоски.

Затем включите Ellipse Tool (Эллипс) и, выбрав размер 12 x 12 px, нарисуйте на первых двух полосах по одному кружочку, которые будут представлять ползунки, указывающие степень заполнения.

К первому кружочку добавьте следующие стили слоя:

Основные настройки для ползунка

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

Теперь мы сделаем пару ползунков остроконечной формы для регулятора точной настройки.

Нарисуйте маленький скругленный прямоугольник с параметрами: высота и ширина — 10px, радиус — 2px.

Сохраняя объект активным, установите посредине направляющую, затем выберите Direct Selection Tool (Стрелка) и кликните по светлому контуру фигуры, вызвав появление опорных точек, из которых нас интересуют две нижние, определяющие кривизну каждого угла. Выберите ту, что ближе к центру, и тащите вниз, склоняясь к направляющей, пока не сомкнетесь с ней. То же самое проделайте и с другой опорной точкой, закончив точно в том же месте, куда притащили первую.

Оцените, не слишком ли низко вы переместили опорные точки, сравнив свой результат с рисунком ниже, как с примером для подражания, на котором, однако, фигура тоже излишне вытянута. В идеале заостренная часть должна превышать исходный размер на 5px, что составляет половину высоты прямоугольника.

Ползунок слайдера

 

 

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

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

Возьмите для этого Pencil Tool (Карандаш) размером 1px и жесткостью (hardness) 100%.

Затем, максимально увеличив масштаб третей панели и выбрав такой #a0a0a0 (или немного ярче) цвет, проведите снизу одну вертикальную линию высотой 2 рх.

«Забейте» ее, насколько можно, в угол полосы, затем скопируйте и сдвиньте дубликат на 10 рх, выбрав комбинацию клавиш Shift + стрелка вправо. Заполнив, таким образом, линиями-делениями панель до конца, скопируйте шкалу целиком и поместите дубликат на последнюю панель 4.

Результат:

Итоговое изображение слайдеров

Шаг 8

Далее следует индикатор загрузки (или индикатор процесса) с процентным указателем на отметке 85%. Создайте для этого элемента новую группу слоев ниже всех остальных.

Выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами) и, выбрав такой #383e45цвет, нарисуйте фигуру с  параметрами: высота — 14px, ширина — 504px, радиус — 25px.

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

Теперь в группе Colored Items нарисуйте скругленный прямоугольник с размерами 425 х 10 px, соответствующий заполнению индикатора на 85%. Расположите его внутри предыдущей фигуры и добавьте стиль слоя, который мы использовали для первой их трех обычных кнопок в начале урока. Заливка (Fill) должна быть на 0%, а внутреннее свечение (Inner Glow) можете отключить.

Переходим к процентному указателю. Нарисуйте скругленный прямоугольник параметрами: высота — 15px, ширина — 30px, радиус — 15px.

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

Поверните прямоугольник на 45° и затем добавьте две направляющих, пересекающихся в центре фигуры:

Индекатор загрузки - началоТеперь возьмите Rectangle Tool (Прямоугольник) и выберите на панели настроек опцию Add to shape area ().

Добавить к области фигурыНачав с точки пересечения направляющих и удерживая клавишу Shift, растяните фигуру, как на рисунке ниже:

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

Индекатор загрузки - настройки слоя

И наконец, добавьте текст, выбрав белый шрифт с методом сглаживания (anti-aliasing) «Резкое» (Sharp) и размером 10 рх.

Результат:

Финальное изображение индекатора загрузки

Шаг 9

Следующие элементы — это переключатели с двумя вариантами выбора, типа

ВКЛ. и ВЫКЛ. или ДА и НЕТ.

Добавьте очередную группу слоев с именем Switches (Переключатели) и, выбрав такой #383e45 цвет, создайте внутри нее скругленный прямоугольник (гнездо переключателя) с указанными ниже параметрами:

кнопки вкл. и выкл.

Затем примените те же стили слоя, которые мы использовали для полос индикатора загрузки и ползункового регулятора (Шаг 8).

Выберите Ellipse Tool (Эллипс) и на новом слое нарисуйте кружок (головку переключателя) диаметром 16 px. Поместите его внутри гнезда и добавьте стили, которые мы применили к серебристому, круглому ползунку на шаге 8.

Теперь скопируйте головку и гнездо, но копию головки поместите в группу «Above color» а копию гнезда в группу «Colored items». Проверьте, чтобы заливка (fill) для гнезда бала выставлена на 0%.

Результат:

Теперь создайте очередную, новую группу слоев ниже всех остальных и назовите ее «Radio Buttons» (Радио-кнопки).

Возьмите Ellipse Tool (Эллипс) и сделайте кружок диаметром 20 рх, затем добавьте следующие стили слоя:

настройки для radio buttonТеперь внутри (выше в палитре слоев) нарисуйте круглую кнопку диаметром 12 рх. Затем скопируйте оба слоя и расположите дубликаты рядом. Добавьте кнопке голубовато-темно-серый и серебристый стили слоя, какие мы использовали для ползунков слайдера.

radio button

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

Следующий шаг долго объяснять, потому что нужно нарисовать галочку и сделать это с помощью Pen Tool (Перо). Попробуйте скопировать эту, уже готовую фигуру, или поищите в интернете.

check box

Шаг 10

Переходим к выпадающему меню, поэтому создайте новую группу слоев с названием «Dropdown» (Выпадающее), а внутри нее еще одну группу с именем «Standard» (Стандартное).

Внутри этой (вложенной) группы нарисуйте скругленный прямоугольник с указанными ниже параметрами:

Переходим к выпадающему меню, поэтому создайте новую группу слоев с названием «Dropdown» (Выпадающее), а внутри нее еще одну группу с именем «Standard» (Стандартное).

Внутри этой (вложенной) группы нарисуйте скругленный прямоугольник с указанными ниже параметрами:

Создаем выпадающее меню

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

Теперь возьмите (Карандаш) размером 1 рх и, выбрав черный цвет, проведите с правой стороны кнопки вертикальную линию, ориентируясь на рисунок ниже. Затем рядом с ней добавьте такую же, но белую линию и убавьте ее opacity (непрозрачность) до 12%.

линия на выпадающем меню

Включите Custom Shape Tool (Произвольная форма) и откройте палитру со всеми предустановленными фигурами, нажав на иконку фигуры с маленьким треугольником справа.

Выберите треугольник с острыми углами и, поместив в документ, поверните его на 90°.
Расположив его справа от разделительной линии и, выбрав такой #383e45 цвет, добавьте следующие стили слоя:

настройи для drop down menuНаконец напишите название кнопки, выбрав белый цвет шрифта Myriad Pro размером 13pt, затем добавьте Drop Shadow (Тень) с параметрами Distance (Смещение) и Size (Размер) по 1 и углом 90°.

раскрывающееся меню

Мы не станем ограничиваться кнопкой с надписью » Dropdown…» (Раскрывающееся…), поскольку меню пока не раскрыто.

Скопируйте группу слоев «Standard», перетащив ее на иконку new layer (создать новый слой), и переименуйте в «Open» (Открытое). Расположите дубликат кнопки меню справа от оригинала.

А сейчас нужно инвертировать цвета, использованные в стилях для кнопки в папке «Open», заменив тень (Drop shadow) на белую, внутреннюю тень (Inner shadow) на черную, и поставить галочку в чекбоксе Reverse (Инверсия) для наложенного градиента. Треугольник тоже нужно повернуть на 90°.

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

На новом слое ниже кнопки «Dropdown…» в палитре слоев нарисуйте скругленный прямоугольник с размерами 140х112 px, выбрав такой #35393e цвет, и добавьте ему такую #25282b обводку (stroke) снаружи размером 1 рх.

Желательно, чтобы элементы меню немного различались, поэтому мы изменим цвет каждой второй кнопки. Выбрав такой #3f444a цвет, нарисуйте прямоугольник (не скругленный) с размерами 140 х 28 рх и поместите его в середине раскрытого меню.

Для большей привлекательности добавим линии между кнопками. Возьмите Pencil Tool (Карандаш) с таким #51575f цветом и, до предела увеличив масштаб, проведите пунктирную линию со штрихами 2 рх через один. Затем скопируйте ее и передвиньте дубликат на вторую границу.

раскрытое drop down меню

Теперь добавьте, выровняв по центру кнопок, свой текст с настройками шрифта, которые мы использовали для предыдущих надписей (Myriad Pro 13pt + drop shadow/тень).

Осталось преобразить одну из кнопок, «наведя не нее курсор». Для этого просто скопируйте группу слоев «Open» и, расположив дубликат на холсте рядом с оригиналом, добавьте среднему (второму) элементу раскрытого меню «серо-голубой стиль», который мы создали для первой кнопки на шаге3, удалив затем отдельные эффекты, за исключением Inner Shadow (Внутренняя тень) и Gradient Overlay (Наложение градиента).

Общий результат:

Complect drop down menu

Шаг 11

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

Создайте новый слой прямо под группой слоев «Colored Items» и выше всех остальных групп, затем залейте его сине-серым цветом (#51575f).

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

Сейчас мы можем либо долго и вручную продолжать, либо завершить все быстро и автоматически. Сохраните свой файл на случай непредвиденного отключения Photoshop, что может случиться фактически в любой момент. Затем скопируйте группу слоев «Colored items» и объедините копию с оригиналом в один слой (правый клик мышкой, последний пункт).

Теперь, когда сине-серый слой нейтрализован, наш документ, возможно, выглядит законченным, но это не так. Нажав клавишу Ctrl/Cmd, кликните на миниатюре слоя объединенных групп в палитре слоев, чтобы все элементы на холсте оказались выделенными. Затем активируйте сине-серый слой, кликнув по нему, и нажмите на иконку Add layer mask…(Добавить слой-маску) в нижней части палитры слоев. И, наконец, отключите видимость слоя объединенных групп (это важно).

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

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

Результат:

Все web - элементы

Оставить комментарий

Ваш e-mail не будет опубликован.