Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





5 самых лучших техник Photoshop для веб дизайнеров

Если вы наблюдаете за современным веб дизайном, то в нем нет ничего сложного. Иногда необходимы дополнительные знания Photoshop, чтобы добиться того, что задумали. Этот поэтапный урок покажет, как создать 5 убийственных эффектов для сайта. Когда я подбирал примеры для данного урока, я посетил несколько дизайнерских галерей и нашел скриншоты дизайнерских элементов, которые используются (а иногда злоупотребляются) в веб дизайне. Я не заставляю вас следовать тенденциям, но достаточно улучшить ваш собственный стиль. Тем не менее, всегда полезно немного обновить ваши навыки Photoshop. Давайте начнем! Отличная кнопка Что это за сайт с кнопкой “Призыв к действию”? Дизайнерский стиль и цвета будут зависеть от вашего общего стиля и важности каждой кнопки. Вот один пример простой, но эффективной кнопки, которую мы попытаемся воссоздать (взято с www.transmissionapps.com).

Откройте новый документ размером 470x350 пикселей. Создайте новый слой и нарисуйте фигуру с помощью Rounded Rectangle Tool с радиусом 80 пикселей.

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

Inner Shadow сделает кнопку более объемной. Обратите внимание, что это лишь эффект.

Наконец добавьте немного Stroke. Вы можете заметить, что Gradient Stroke с теми же цветами, что и Gradient Overlay. Единственное отличие, что направление -90, что противоположно настройке Gradient Overlay. С помощью этого маленького трюка мы придадим красивый эффект кнопке и сделаем ее более выделяющейся.

Покончив с эффектами, добавим немного блеска. Создайте новый слой над всеми остальными.

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

Выберите Marquee Tool. Нажмите Alt и отрежьте половину выделения.

Выберите черно-белый градиент Gradient Tool, установите layer mode на Screen и потяните вверх от низа выделения до точки, примерно на 30 пикселей выше выделения. Вот, что вы получите! Красивую блестящую кнопку.

Добавьте текст, как это сделал я. Нарисуйте круг и разместите его как на рисунке. Добавьте Gradient Overlay с настройками как на рисунке. Наконец, добавьте внутренний контур белого цвета, размером 2 пикселя.

Выберите Shape Tool. Из списка фигур возьмите Arrow. Поверните ее с помощью Ctrl+T.

Направление стрелки должно быть вниз как на рисунке.

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

Вот, как это будет выглядеть. Вы также можете увидеть структуру слоя.

Навигационное меню Самая важная часть сайта – навигация. Я выбрал пример, который использует некоторую прозрачность и эффект растворения (взят с http://legacylocker.com/).

Откройте новый документ таким же размером, что и в предыдущем примере. Создайте новый слой и залейте его с помощью Gradient Overlay с цветами как на рисунке.

Для этого конкретного примера я добавил несколько облаков.

Нарисуйте прямоугольник с помощью Rectangle tool цветом #6bb9ec и Opacity 65%.

Добавьте быструю маску (нажмите Q) для этого слоя. Выберите мягкую кисть размером 200px, установите черный цвет и замаскируйте края прямоугольника как на рисунке.

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

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

Теперь мы можем немного поэкспериментировать с прямоугольником и добавить немного света и теней. Ctrl + клик по маленькому прямоугольнику, чтобы загрузить выделение. Зайдите в Select>Modify>Contract и введите значение 1px. Создайте новый слой и установите Mode на Overlay. Выберите мягкую кисть размером 200px белого цвета и щелкните несколько раз в верхней части прямоугольника как на рисунке.

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

Вот, что получиться. Это действительно тонких эффект света и тени, который увидеть везде, где захотите.

С помощью Line Tool нарисуйте линию по ширине маленького прямоугольника цветом #8dd1fe.

Замаскируйте концы линии так же как и концы маленького прямоугольника. Копируйте эту линию и переместите ее вниз маленького прямоугольника.

Наконец, я добавил несколько заголовков навигации и все готово!

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

Тот же новый документ залейте цветом #aa8e5c.

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

Выберите Type Tool, установите шрифт Times New Roman. Напишите текст цветом #591e0d.

Добавьте Inner Shadow со следующими настройками:

Добавьте внешнюю обводку размером 2 пикселя и цветом #bc9f6c.

Готово! Что, это? Да, это! Просто и эффективно.

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

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

Нарисуйте белый прямоугольник.

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

Примените Filter>Blur>Gaussian Blur с радиусом 12px.

Добавьте быструю маску к слою. Выберите мягкую кисть размером 300px и аккуратно замаскируйте все.

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

Глубина и 3D пространство Больше и больше интересных 3D элементов начинают использоваться в веб дизайне. Здесь вы можете увидеть, как с помощью нескольких слоев, вы можете создать иллюстрацию 3D пространства. Этот пример с mosaiko.com.

Новый документ залить черным цветом.

С помощью Rectangle Tool нарисуйте прямоугольник цветом #21262a.

Тем же инструментом нарисуйте прямоугольник поменьше цветом #191b1d. Эти два прямоугольника будут создавать пространство изображения.

Ctrl + клик по большому прямоугольнику, чтобы загрузить выделение. Создайте новый слой. Выберите мягкую кисть размером 300px черного цвета и щелкните несколько раз в верхней половине выделения.

Проделайте то же с маленьким прямоугольником, но на этот раз щелкните по середине снизу прямоугольника.

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

Нарисуйте прямоугольник размером 85×20 px и цветом #555759.

Добавьте следующие эффекты. Drop Shadow – Color: черный, Opacity: 25%, Angle: 90, Distance: 1px, Size:4px. Inner Shadow – Color: белый, Opacity: 7%, Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay с настройками как на рисунке.

Выберите Pen Tool и нарисуйте фигуру как на рисунке цветом #555759.

С помощью небольшого использования быстрой маски и кисти мы создадим иллюстрацию 3D пространства. Сначала добавьте быструю маску к слою и с помощью мягкой кисти размером 100 px замаскируйте стороны полосы.

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

Я добавил несколько навигационных ссылок, скопировал несколько полос, изменил перспективу (Ctrl+T) и все готово.

5 самых лучших техник Photoshop для веб дизайнеров

Источник: carsonified.com
Просмотров: 12912

  Коментарии (2)
 1 Написал(а) ДимончеГ, в 19:48 25.10.2010
долго но интересно спасибо =)
 2 Написал(а) Оскар, в 06:07 19.02.2013
Спасибо! :grin

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама