Вход
Архивы
Меню для сайта

Урок рассчитан для начинающих и не займёт более десяти минут.

Меню для сайта

Начнём с создания нового документа размером 800 на 477 пикселей (можно изменить на любой удобный для вас):

Меню для сайта

Залейте фон цветом: # e9f1f6 используя инструмент “Заливка — (G)”:

Меню для сайта

Для получения результата как на нашей картинке ниже:

Меню для сайта

На новом слое, с помощью инструмента “Прямоугольная область – (M)”, нарисуйте прямоугольник нужного вам размера и залейте его таким цветом: # 52A1C4

Меню для сайта

Применим следующие настройки стиля слоя:

Меню для сайта

Получим:

Меню для сайта

Добавим немного глянца нашей кнопки, для этого зажав (Ctrl) щёлкните левой кнопкой мыши на миниатюру слоя для его выделения, после чего создаём новый слой, на котором идем в Выделение – Модификация – Сжать…:

Меню для сайта

В появившемся окне установите размер сжатия в 3 пикселя:

Меню для сайта

На новом слое инструментом “Градиент” от белого цвета к прозрачному, залейте кнопку с верху вниз:

Меню для сайта

А теперь немного с низу в верх:

Меню для сайта

Измените режим наложения слоя на “Перекрытие” с непрозрачностью слоя примерно в 90%:

Меню для сайта

Используя инструмент “Горизонтальный текст – (T)”, напишите нужный вам текст. Мы выбрали стандартный шрифт “Tahoma” жирный, размером 48 пикселей:

Меню для сайта

Добавим небольшую тень к тексту, для этого настроим “Стиль слоя” как на рисунке ниже:
Цвет: # 52A1C4

Меню для сайта

Получаем немного более приятный текст:

Меню для сайта

На этом наш сегодняшний урок окончен, в результате мы получили вот такую “менюшку”:

Меню для сайта

PSD исходник урока: photoshopy.rar

Данный урок сделан специально для сайта PhotoShopy.Net

У вас, наконец, то появилось маленькое чудо? Поздравляем! Но чем же его кормить в начале его жизненного пути? Линейка продуктов для детей \»Бабушкиного лукошка\», с ассортиментом которой можно ознакомиться в интернет магазине \»Мерси.ру\» с доставкой по Москве всего за 99 рублей — бабушкино лукошко ассортимент.


Создание логотипа для сайта

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

Многие уроки начинаются с создания нового документа, и этот не исключение, по этому создаём документ 600 на 300 пикселей.

Создание логотипа для сайта

На новом слое с помощью инструмента “Прямоугольник” (U) и настройками соответствующие рисунку ниже, создадим треугольник с закруглёнными краями:
Цвет переднего фона: # 91D638

Создание логотипа для сайта

Перейдите в меню настроек стиля слоя с настройками как указано на рисунке:

Создание логотипа для сайта

Если вы читаете наш урок с устройства на ОС Андроид, тогда мы предлагаем вам посетить сайт нашего партнёра с огромным количеством программ для вашего устройства — андроид 4.0.4 программы скачать

На новый слой добавьте такую же фигуру, только белого цвета и меньшего размера, ровно в середину зелёной:

Создание логотипа для сайта

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

Создание логотипа для сайта

Не меняя слой, перейдите в настройки его стиля и задайте следующий параметр:
Цвет: # adff43

Создание логотипа для сайта

Цвет: # 91d638

Создание логотипа для сайта

Получиться должно так:

Создание логотипа для сайта

Объедините все видимые слои в один, кроме фонового слоя и продублируйте получившийся слой с помощью сочетания Ctrl + J. Теперь поверните верхний слой вверх ногами (Ctrl + J), для получения такого результата:

Создание логотипа для сайта

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

Создание логотипа для сайта

PSD исходник урока: photoshopy.rar

Данный урок сделан специально для сайта PhotoShopy.Net


Создание стильного логотипа в стиле «диско»

Первым делом создаем новый документ размером 500 x 300 пикселей. Выбираем какие-нибудь подходящие цвета, например #6a0037, #3f000c и создаем линейный градиент.

Создание стильного логотипа в стиле «диско»

Теперь создаем новый слой, после чего воспользуемся инструментом Polygonal Lasso Tool (Многоугольное лассо) для создания выделения, показанного на рисунке ниже, затем зальем выделение белым цветом.

Создание стильного логотипа в стиле «диско»

Снимаем выделение сочетанием клавиш Ctrl + D и применяем команду Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) со следующими параметрами:

Создание стильного логотипа в стиле «диско»

Посмотрим результат:

Создание стильного логотипа в стиле «диско»

Теперь применим другой фильтр Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении) с параметрами как на рисунке:

Создание стильного логотипа в стиле «диско»

Изменяем режим смешения слоя на Overlay (Перекрытие):

Создание стильного логотипа в стиле «диско»

Активизируем инструмент Horizontal Type Tool (Горизонтальный текст) и создаем фрагмент текста «Disc». Букву «о» пока добавлять не будем, сделаем это позже.

Создание стильного логотипа в стиле «диско»

В уроке для создания надписи был использован шрифт AG_Futura (150 пт, четкий). Если в Вашей программе Фотошоп нет такого шрифта, можете найти ему альтернативу. Затем применим к слою стили Drop Shadow (Тень) и Gradient Overlay (Наложение градиента):

Создание стильного логотипа в стиле «диско»
Создание стильного логотипа в стиле «диско»

Должно получиться что-то подобное:

Создание стильного логотипа в стиле «диско»

Следующий шаг – добавляем ослепительного блеска нашему слову. Выбираем инструмент Elliptical Marquee Tool (Овальная область) и создаем выделение, как показано на рисунке ниже. Затем активизируем инструмент Gradient Tool (Градиент), устанавливаем градиент от белого к прозрачному, создаем новый слой и заливаем выделенную область как показано.

Создание стильного логотипа в стиле «диско»

Теперь выделяем текст (удерживая Ctrl, щелкаем по миниатюре текстового слоя на палитре слоев) и с помощью сочетания клавиш Ctrl+Shift+I инвертируем выделение, затем нажимаем Delete, чтобы очистить выделенную после инвертирования область.

Создание стильного логотипа в стиле «диско»

Нажимаем Ctrl+D, чтобы снять выделение, и изменяем непрозрачность слоя до 60%.

Создание стильного логотипа в стиле «диско»

Пришло время добавить букву «о». На мой взгляд, лучшим вариантом будет добавить диско-сферу вместо буквы. Но прежде нам нужно найти подходящий клипарт. Можно воспользоваться поиском Google, или позаимствовать картинку, которая использована в данном уроке
Затем добавляем выбранное изображение в наш документ и изменяем его размер. Ваш логотип после этого должен выглядеть так:

Создание стильного логотипа в стиле «диско»

.
Добавляем к этому слою стиль Drop Shadow (Тень):

Создание стильного логотипа в стиле «диско»

Должно получиться как на рисунке:

Создание стильного логотипа в стиле «диско»

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

Начнем добавлять на пол блики от диско-сферы. Сначала создаем новый слой, затем с помощью инструмента Elliptical Marquee Tool (Овальная область) создаем выделение, как показано на рисунке ниже и заливаем его белым цветом:

Создание стильного логотипа в стиле «диско»

Снимаем выделение клавишами Ctrl+D, нажимаем Ctrl+T, чтобы трансформировать белый кружок:

Создание стильного логотипа в стиле «диско»

Дублируем круг с помощью сочетания клавиш Ctrl+J, а затем снова нажимаем Ctrl+T, чтобы выполнить трансформирование. Перемещаем круг немного вправо:

Создание стильного логотипа в стиле «диско»

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

Создание стильного логотипа в стиле «диско»

Объединяем все эти кружки в один слой и дублируем результирующий слой сочетанием клавиш Ctrl+J. Затем перемещаем его, как показано на рисунке и немного изменяем размер, щелкнув Ctrl+T.

Создание стильного логотипа в стиле «диско»

Выполним те же действия еще три раза.

Создание стильного логотипа в стиле «диско»
Создание стильного логотипа в стиле «диско»
Создание стильного логотипа в стиле «диско»

Теперь объединяем все слои с кругами в один и меняем режим наложения этого слоя на Overlay (Перекрытие). После этого перемещаем слой под слой, содержащий диско-сферу.

Создание стильного логотипа в стиле «диско»

Используя инструмент Polygonal Lasso Tool (Многоугольное лассо) с параметром Feather (Растушевка) 3 пикселя, создаем выделение как показано и дублируем выделенную область с помощью Ctrl+J:

Создание стильного логотипа в стиле «диско»

Применяем к новому слою стиль Overlay (Перекрытие):

Создание стильного логотипа в стиле «диско»

Заметили разницу:

Создание стильного логотипа в стиле «диско»

Чтобы завершить работу с логотипом, добавим немного текста. С помощью инструмента Horizontal Type Tool (Горизонтальный текст) напишем что-то вроде «Style» цветом #fe7390:

Создание стильного логотипа в стиле «диско»

Сделаем дубликат слоя сочетанием клавиш Ctrl + J и переместим его над текстом. Изменим цвет второго слова на #e71866:

Создание стильного логотипа в стиле «диско»

Еще раз дублируем этот слой и перемещаем его над текущим текстом. Изменяем цвет слова на #87023d:

Создание стильного логотипа в стиле «диско»

Мы практически закончили урок. Остается добавить пару маленьких звездочек на логотип. Создаем новый слой, выбираем инструмент Polygonal Lasso Tool (Многоугольное лассо) и создаем выделение, как на рисунке ниже, после чего заливаем выделение белым цветом:

Создание стильного логотипа в стиле «диско»

Снимаем выделение сочетанием клавиш Ctrl + D, затем дублируем слой с помощью Ctrl + J и уменьшаем звезду, нажав Ctrl + D.

Создание стильного логотипа в стиле «диско»

Объединим эти два слоя в один, снова уменьшим изображение и сделаем несколько дубликатов слоя:

Создание стильного логотипа в стиле «диско»

Урок окончен. Я доволен результатом, надеюсь Вы тоже!

Создание стильного логотипа в стиле «диско»

Автор перевода: Jerry


Изготовление иконки пирамиды

Этот урок, посвященный веб-дизайну в Фотошоп, научит Вас пользоваться инструментом Pen Tool (Перо) для создания несложной иконки на основе треугольников, которая может быть использована как веб-логотип или просто иконка. Кроме того, из этого урока Вы узнаете, как создавать освещение и тени с помощью инструментов Burn / Dodge Tool (Затемнение / Осветление).

Приступим к подготовке документа; Вы можете использовать заранее созданный фоновый слой, размещенный ниже.

Изготовление иконки пирамиды

Начнем с создания одной из сторон пирамиды. Параметры инструмента Pen Tool (Перо) указаны на рисунке под превью.

Изготовление иконки пирамиды
Изготовление иконки пирамиды

Отлично. Одна сторона готова. Теперь начнем создавать треугольную выемку внутри. Используя те же установки инструмента Pen Tool (Перо), создадим форму, подобную той, что на рисунке.

Изготовление иконки пирамиды

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

Изготовление иконки пирамиды

Добавим глянец основной стороне пирамиды. Выбираем инструмент Dodge Tool (Осветление), устанавливаем Size (Размер) 180 и Exposure (Выдержка) 50% и начинаем закрашивать, как показано ниже:

Изготовление иконки пирамиды

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

Изготовление иконки пирамиды

Вернемся к выемке и добавим немного теней на основание. Установим размер (size) инструмента Burn Tool (Затемнение) равным 40 и начнем закрашивать, следуя рисунку:

Изготовление иконки пирамиды

Выглядит неплохо. Снова будем работать с исходным слоем изображения пирамиды – создадим его дубликат. Затем используем команду меню Edit / Transform / Flip Horizontal (Редактирование / Трансформирование / Отразить по горизонтали).

Изготовление иконки пирамиды

И снова пришло время деталей. Выберем инструмента Burn Tool (Затемнение), установим Size (Размер) 180 и Exposure (Выдержка) 50% и закрасим, как показано ниже:

Изготовление иконки пирамиды

Затем уменьшим непрозрачность до 70% и у Вас должно получиться что-то подобное:

Изготовление иконки пирамиды

В верхней точке тени также нужно установить свет. Для этого используем инструмент Dodge Tool (Осветление) с параметрами Size (Размер) 180 и Exposure (Выдержка) 50% и закрасим, как показано на рисунке:

Изготовление иконки пирамиды

Применим тот же режим наложения, что и несколько шагов назад. После этого дублируем треугольную выемку и выполняем команду меню Edit / Transform / Flip Horizontal (Редактирование / Трансформирование / Отразить по горизонтали). Вот мы и закончили. Посмотрите, как должна выглядеть готовая пирамида:

Изготовление иконки пирамиды

Урок завершен. Надеюсь, он оказался для Вас относительно не сложным.

Автор перевода: Jerry

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


Создание коммуникативного макета в Фотошоп

Вы в поиске профессионального макета, который удовлетворит требованиям сервис-провайдеров к дизайну?
Воспользуйтесь этим простым уроком по созданию макета сайта Интернет сервис-провайдера. В данном уроке мы будем использовать узоры, которые помогут кардинально изменить вид этого дизайна.

Создание коммуникативного макета в Фотошоп

Для создания этого макета Вам понадобятся:
1) 200 пиксельных узоров
2) 325 иконок указателей и стрелок
3) 30 минут Вашего драгоценного времени

Приступаем к созданию макета: создаем новый документ с размерами сторон 960 x 900 пикселей. Я использовал темный цвет для фона. Для тех, кто не знает, как изменить цвет фона, – расскажу – это очень просто: двойной щелчок на иконке рабочего цвета на панели инструментов и в диалоговом окне Color Picker (Палитра цветов) устанавливаем цвет по своему вкусу.

Создание коммуникативного макета в Фотошоп

Для нашего урока я выбрал цвет фона #101318.

Создание коммуникативного макета в Фотошоп

С помощью инструмента Paint Bucket Tool (Заливка) одним щелчком мыши в рабочей области нашего документа заливаем фон выбранным цветом. Пожалуйста, обратите внимание на то, что фоновый слой должен быть выделен перед тем как Вы будете использовать инструмент Paint Bucket Tool (Заливка). Теперь начинаем наполнять урок, используя некоторые основные технические приемы.
Для начала с помощью инструмента Brush Tool (Кисть) создаем белую точку в верхнем левом углу.

Создание коммуникативного макета в Фотошоп

Выделяем слой на палитре слоев и изменяем величину непрозрачности до 30%.

Создание коммуникативного макета в Фотошоп

Выбираем инструмент Rounded Rectangle Tool (Скругленный прямоугольник) и создаем форму как на рисунке. Для этой формы я использовал цвет: #313841.

Создание коммуникативного макета в Фотошоп

Выделяем слой на палитре слоев и нажимаем Ctrl + J (это самый быстрый и простой способ дублировать выделенный слой, при этом новый слой будет создан над предыдущим). Щелкаем правой кнопкой мыши на новом слое и в контекстном меню выбираем Rasterize Layer (Растеризация Слоя).

Создание коммуникативного макета в Фотошоп

Затем выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение) и создаем выделение как на рисунке:

Создание коммуникативного макета в Фотошоп

Нажимаем клавишу Delete на клавиатуре, а затем сочетание клавиш Ctrl + D, чтобы снять выделение.
Применяем к данному слою стиль Layer > Layer Style > Inner Glow (Слой > Стиль слоя > Внутреннее свечение) и задаем параметры эффекта как на рисунке:

Создание коммуникативного макета в Фотошоп
Создание коммуникативного макета в Фотошоп
Создание коммуникативного макета в Фотошоп

Получается такой результат:

Создание коммуникативного макета в Фотошоп

Аналогичным образом добавляем еще одну форму внизу. Щелкните по картинке, чтобы увидеть ее в полный размер.

Создание коммуникативного макета в Фотошоп

Теперь Вам нужно будет скачать набор «200 узоров Фотошоп».

Если Вы не имеете доступа к этим VIP-файлам, то Вы наверняка сможете найти другие бесплатные узоры в Интернете. Загрузите набор узоров в Фотошоп.
Создаем новый слой (нажимаем Ctrl + Shift + Alt + N) и с помощью инструмента Rectangular Marquee Tool (Прямоугольное выделение) выполняем выделение как на рисунке:

Создание коммуникативного макета в Фотошоп

Активизируем инструмент Paint Bucket Tool (Заливка) и выбираем следующий узор:

Создание коммуникативного макета в Фотошоп

Щелкаем 1 раз внутри выделенной области, а затем нажимаем Ctrl + D, чтобы снять выделение.

Создание коммуникативного макета в Фотошоп

Изменяем значение непрозрачности до 30%.

Создание коммуникативного макета в Фотошоп

Выбираем инструмент Eraser Tool (Ластик) и гладкую кисть большого диаметра и стираем узорчатую часть посередине.

Создание коммуникативного макета в Фотошоп

Добавим справа 4 кнопки с помощью инструмента Rounded Rectangle Tool (Скругленный прямоугольник). Легче всего создать одну кнопку и затем дублировать этот слой и, используя инструмент Move Tool (Перемещение), разместить кнопки по своему усмотрению. Пойдем этим путем и создадим несколько потрясающих кнопок.

Создание коммуникативного макета в Фотошоп

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

Создание коммуникативного макета в Фотошоп
Создание коммуникативного макета в Фотошоп
Создание коммуникативного макета в Фотошоп

Узор взят из набора: Seamless pixel patterns

Создание коммуникативного макета в Фотошоп
Создание коммуникативного макета в Фотошоп

Так будет выглядеть макет после добавления текста на кнопки:

Создание коммуникативного макета в Фотошоп

С помощью Horizontal Type Tool (Горизонтальный текст) наполним макет текстом.

Создание коммуникативного макета в Фотошоп

Добавим несколько изображений в верхней части макета, а также кнопку.

Создание коммуникативного макета в Фотошоп

Выбираем слой, содержащий изображение глобуса, на нашей палитре слоев и с помощью сочетания клавиш Ctrl + J создаем дубликат слоя. Затем используем команду меню Edit > Transform > Flip Vertically (Редактирование > Трансформация > Отразить по вертикали).
С помощью инструмента Move Tool (Перемещение) поместим глобус как показано на рисунке.

Создание коммуникативного макета в Фотошоп

С помощью инструмента Eraser Tool (Ластик) сотрем нижнюю часть глобуса – получится очень красивое отражение. Обратите внимание, что для стирания Вам понадобится гладкая кисть.

Создание коммуникативного макета в Фотошоп

То же самое можно сделать и для синей кнопки.

Создание коммуникативного макета в Фотошоп

Скачаем следующий набор – пиксельных кистей

На новом слое (нажмите Ctrl + Shift + Alt + N) добавим несколько одинаковых стрелок из набора.

Создание коммуникативного макета в Фотошоп

И вот готовый макет перед Вами!

Создание коммуникативного макета в Фотошоп

Автор перевода: Jerry

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


Создание плавных линий в фотошопе

Когда вы начинаете работу, над какой либо частью вашего изображения время от времени у вас возникают мысли о том, что здесь нужно сделать плавные линии. Изящные линии, которые плавно перетекают из стороны в сторону выглядят очень интересно и заманчиво. В таких случаях вы используете инструмент «Перо» — да, это в полнее уместно, но часто новички не могут сделать свои движения настолько красиво и изящно как они это себе представляют. Для этого мы и создали этот фотошоп урок, в нём вы узнаете, как можно сделать плавные линии, которые завораживают. Фотошоп уроки это то, что действительно нужно вам, они обучают вас самому интересному и изысканному.

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

Создание плавных линий в фотошопе

Удерживая клавишу Ctrl кликните левой кнопкой мыши по миниатюрке слоя, на котором располагается ваша фигура. После этого откройте вкладку каналов. Если у вас такой вкладки нет, то откройте её с помощью функции: Окно > Каналы – после этого вы увидите закладку каналы. В этой вкладке нажмите на «Сохраняет выделенную область в новом канале» (Save selection as Channel) Это действие создаст новый канал. Чтобы открыть это, просто нажмите на название \»Альфа-1\»

Создание плавных линий в фотошопе
Создание плавных линий в фотошопе

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

Создание плавных линий в фотошопе

Перейти к Фильтр> Размытие > Размытие по Гауссу (Filter>Blur>Gaussian Blur)и в зависимости насколько гладкой или круглой вы хотите, чтобы ваши края были, примените определенную сумму.

Создание плавных линий в фотошопе

Теперь нажмите CTRL + L для того чтобы открыть уровни. Нажмите и перетащите черный и белый ползунок ближе друг к другу. Убедитесь, что они фактически не прикасаться, потому что это приведет к весьма неприятным последствиям в плане пикселей. Когда вы закончите, нажмите ОК и нажмите CTRL+ клик на слой еще раз, чтобы выбрать эту форму.

Создание плавных линий в фотошопе
Создание плавных линий в фотошопе

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

Создание плавных линий в фотошопе
Создание плавных линий в фотошопе
Создание плавных линий в фотошопе

Автор перевода: Ревтов Игорь

Устранить те или иные проблемы в работе вашей кампании вы сможете с помощью услуг специалистов — it аудит


Уроки фотошоп — 3D эффект меню для сайта

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

Шаг 1

Создайте новый документ (Ctrl+N) размером 1000х750 пикселей. Сделайте двойной щелчок на фоновом слое и в окне «Стиль слоя» (Layer Style) отметьте «Наложение цвета» (Color Overlay), в качестве цвета выберите темно-коричневый.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 2

Включите линейки в меню Просмотр>Линейки (View>Rulers – Ctrl+R) и добавьте несколько направляющих (нажмите V, затем мышью с зажатой кнопкой перетащите указатель с линейки на рабочее поле). Направляющие расположите так: 2 горизонтальные, первая – на уровне 30 пикселей, вторая – 250 пикселей, и 2 вертикальные, на отметке 100 и 900 пикселей.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 3

С помощью инструмента Прямоугольник (Rectangle Tool — U) нарисуйте прямоугольник (включите режим Слои фигуры / Shape Layers в верхней панели), ориентируясь по направляющим. Новый слой назовите «Шапка».

Уроки фотошоп - 3D эффект меню для сайта

Шаг 4

Установите черный цвет на передний план (нажмите D). Выберите инструмент «Эллипс» (Ellipse Tool — U) и создайте фигуру, которая будет нашей тенью. Нарисуйте овал так, чтобы он немного выходил за верхнюю и нижнюю границы прямоугольника (как на рисунке). Перед рисованием убедитесь, что выбран слой «Шапка», а не его векторная маска (щелкните на основном изображении слоя в окошке со слоями). Новый слой назовите «Тень» и поместите его ниже слоя «Шапка».

После этого конвертируйте его в «Умные фильтры» (Smart Filters) и примените фильтр «Размытие по Гауссу» (Фильтр>Размытие>Размытие по Гауссу / Filter>Blur>Gaussian Blur) (параметр радиус подберите по своему усмотрению, примерный диапазон – от 40 до 70 пикселей). Непрозрачность (Opacity) слоя с тенью установите на 60%.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 5

Выберите слой «Шапка» и сделайте двойной щелчок на нем, чтобы открыть окно «Стиль слоя» (Layer Style) отметьте «Наложение градиента» (Gradient Overlay). Стиль градиента (Style) укажите как радиальный (Radial), затем щелкните на поле «Градиент» и укажите цвета – я использовал оттенки темно-красного. Смотрите, что получилось:

Уроки фотошоп - 3D эффект меню для сайта

Шаг 6

Теперь выберите инструмент «Линия» (Line Tool — U) и возьмите светлый оттенок из центральной части градиента нашей шапки. Проведите горизонтальную линию, а потом поменяйте цвет на черный и проведите еще одну линию на 1 пиксель выше уже нарисованной. Теперь сгруппируйте два новых слоя в группу с именем «Горизонтальный разделитель».

Далее исполните команду Слои>Слой-маска>Показать все (Layer>Layer Mask>Reveal All). Затем с помощью градиента (Gradient Tool — G), тип радиальный (Radial), от черного к белому (Black, White) сделайте заливку на маске группы с разделителем. Начинайте градиент из центра группы.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 7

С помощью инструмента «Горизонтальный текст» (Horizontal Type Tool — T) белым цветом напишите пункты меню. Поместите все слои с надписями в одну группу и назовите ее «Белые ссылки».

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

Уроки фотошоп - 3D эффект меню для сайта

Шаг 8

Повторите шаг №6, чтобы создать вертикальные разделители для ссылок как показано на рисунке. Нарисуйте инструментом «Линия» (Line Tool — U) красную линию, а потом черную, на 1 пиксель слева от красной. Сгруппируйте эти два слоя, а группу продублируйте несколько раз и разместите линии в нужные места.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 9

Соедините все группы-разделители в одну и назовите ее «Вертикальные разделители». Затем исполните команду Слои>Слой-маска>Показать все (Layer>Layer Mask>Reveal All). С помощью градиента (Gradient Tool — G), тип в этот раз линейный (Linear), от черного к белому (Black, White), сделайте заливку на маске группы.

Уроки фотошоп - 3D эффект меню для сайта

Шаг 10

Откройте файл с узором. Используйте такой, как в этом уроке или любой другой. Идите в меню Редактировать>Определить узор (Edit>Define Pattern) и назовите его «ВебУзор».
Сделайте копию слоя «Шапка» (выберите слой, затем Ctrl+J) и назовите копию «Узор». Перейдите в его «Стили слоя» (Layer Styles), отключите эффект «Наложение градиента» (Gradient Overlay) и включите «Перекрытие узора» (Pattern Overlay), в настройках укажите наш узор «ВебУзор», режим наложения (Blend Mode) установите как «Наложение цвета» (Color Overlay).

После этого примените градиент (черно-белый, радиальный) к маске слоя «Узор».

Уроки фотошоп - 3D эффект меню для сайта

Шаг 11

Теперь можно добавить логотип и ложку.
Впечатайте текст (инструмент Горизонтальный текст / Horizontal Type Tool — T) “PSDTUTS”, “PSD” – жирным шрифтом, “TUTS” – обычным. В настройках стиля (Layer Styles) примените эффекты «Тень», «Наложение градиента» и «Обводка» (Drop Shadow, Gradient Overlay и Stroke) как на рисунке. Это часто используемые текстовые эффекты.

Уроки фотошоп - 3D эффект меню для сайта

Заключение

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

Уроки фотошоп - 3D эффект меню для сайта

Переводчик: Фирстов Александр

Все новости и обзоры продукции не безызвестной корпорации Apple вы сможете прочитать на специализированном сайте – Apple


Как нарисовать Веб 2.0 иконку в фотошоп

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

Как нарисовать Веб 2.0 иконку в фотошоп

Создайте новый документ 600х300 с белым фоном. Инструментом Ellipse нарисуйте круг на новом слое и назовите его “иконка_фон”. Я также советую удерживать клавишу Shift — в таком случае ваш круг получится именно кругом, а не овалом. Примените к слою следующие стили:

Как нарисовать Веб 2.0 иконку в фотошоп

Как нарисовать Веб 2.0 иконку в фотошоп

Как нарисовать Веб 2.0 иконку в фотошоп

Как нарисовать Веб 2.0 иконку в фотошоп

Как нарисовать Веб 2.0 иконку в фотошоп

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

Как нарисовать Веб 2.0 иконку в фотошоп

Создайте новый слой и выделите на нем похожую область:

Как нарисовать Веб 2.0 иконку в фотошоп

Заполните ее белым цветом и примените фильтр Filter > Blur > Gaussian Blur:

Как нарисовать Веб 2.0 иконку в фотошоп

Установите непрозрачность этого слоя до 50%

Как нарисовать Веб 2.0 иконку в фотошоп

Создайте слой, выберите слой “иконка_фон” и выделите на нем область как на рисунке ниже. Залейте ее белым цветом:

Как нарисовать Веб 2.0 иконку в фотошоп

Создайте еще один слой и выделите на нем область по форме, как видно на рисунке ниже. Заполните ее белым цветом и уменьшите непрозрачность слоя до 25%

Как нарисовать Веб 2.0 иконку в фотошоп

Теперь добавьте любую иконку и текст на свой вкус

Как нарисовать Веб 2.0 иконку в фотошоп

Сейчас давайте создадим простое отражение. Скопируйте все слои, кроме фонового. Выделите все эти копии в панели слоев и нажмите CTRL+E, чтобы слить их в один. Отразите слой вертикально Edit > Transform > Flip Vertical. Расположите получившуюся картинку под имевшейся иконкой. Создайте на этом слое маску и залейте ее градиентом, чтобы убрать часть отражения, и наш шедевр готов

Как нарисовать Веб 2.0 иконку в фотошоп

Вот еще пример:

Как нарисовать Веб 2.0 иконку в фотошоп

Перевод: Ревтов Игорь

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


Уроки Photoshop — Черно-голубая панель навигации
Уроки Photoshop - Черно-голубая панель навигации

Этот урок научит Вас, как совмещать несколько стилей слоя для создания красивой и простой панели навигации.

Шаг 1
Во-первых, создайте новый документ – я использовала размер 540 на 220 пикселей. Задний фон я залила черным цветом. Для этого сделайте Edit > Fill (Редактирование > Выполнить заливку) цветом #0d0d0d.

Уроки Photoshop - Черно-голубая панель навигации

Шаг 2
Второе наше действие – это создание заднего фона для навигационных кнопок. Создайте новый слой Layer > New > Layer (Слой > Новый > Слой) и выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U). Задайте фиксированный размер 480 на 50 пикселей с радиусом 5 пикселей.

Уроки Photoshop - Черно-голубая панель навигации

Заполните это выделение Линейным градиентом (Linear Gradient)от цвета #151515 до цвета #050505
Используя инструмент Градиент (Gradient Tool), отмените выделение — Ctrl + D. Задайте Заливку (Fill) слоя 60% (настройка находиться под Прозрачностью (Opacity) в окне слоев). Разница между Прозрачностью (Opacity) и Заливкой (Fill) заключается в том, что Прозрачность (Opacity) изменяет прозрачность целого слоя, а Заливка (Fill) изменяет прозрачность всего за исключением стилей слоев.

Уроки Photoshop - Черно-голубая панель навигации

Шаг 3
Теперь мы будем добавлять несколько стилей слоя к навигационному заднему фону.
Layer > Layer Style > Outer Glow (Слой > Стиль слоя > Внешнее свечение)

Уроки Photoshop - Черно-голубая панель навигации

Layer > Layer Style > Stroke (Слой > Стиль слоя > Обводка)

Уроки Photoshop - Черно-голубая панель навигации

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

Уроки Photoshop - Черно-голубая панель навигации

Хотите обои с таким рисунком как на картинке выше? Нет? Тогда выберите более симпатичную картинку на свой вкус — магазин обоев для стен

Шаг 4
Следующим шагом будет добавление кнопок. Создайте новый слой и, используя инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) (U), создайте выделение 150 на 40 пикселей (опять с радиусом 5 пикселей) на левой стороне навигационной панели.

Уроки Photoshop - Черно-голубая панель навигации

Заполните это выделение Линейным градиентом (Linear Gradient) от #323232 до #161616 используя градиентный инструмент. Установите Заливку (Fill) этого слоя на 50%.

Уроки Photoshop - Черно-голубая панель навигации

Шаг 5
Я применила 3 стиля слоев для этих кнопок, чтобы придать им глубины и более красивого вида.
Layer > Layer Styles > Inner Glow (Слой > Стиль слоя > Внутреннее свечение)

Уроки Photoshop - Черно-голубая панель навигации

Layer > Layer Styles > Gradient Overlay (Слой > Стиль слоя > Наложение градиента)

Уроки Photoshop - Черно-голубая панель навигации

Layer > Layer Styles > Stroke (Слой > Стиль слоя > Обводка)

Уроки Photoshop - Черно-голубая панель навигации

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

Уроки Photoshop - Черно-голубая панель навигации

Шаг 6
Выберите текстовый инструмент и добавьте текст – я использовала шрифт Bell Gothic Std, Полужирный (Bold), 20 pt, Четкое (Crisp), #ffffff.

Уроки Photoshop - Черно-голубая панель навигации

Шаг 7
Теперь повторите шаги для создания кнопок с двумя следующими кнопками – я решила сделать среднюю кнопку другого цвета для выделения. Голубые используемые цвета — #14b9ef и #054573.

Уроки Photoshop - Черно-голубая панель навигации

Шаг 8
Так как мы установили Заливку (Fill) слоев 50-60%, то мы можем отрегулировать задний фон, и он будет полупрозрачным – внизу я поместила Радиальный градиент (Radial Gradient) с цветами, что используются в теме Vista.

Уроки Photoshop - Черно-голубая панель навигации

Автор: Natasha


Уроки фотошоп — Создание кнопки Web 2.0

На новом слое нарисуйте скругленный прямоугольник любого цвета (сейчас он роли не играет, в дальнейшем мы будем его менять)

Уроки фотошоп - Создание кнопки Web 2.0

Примените к этому слою следующие стили:

Уроки фотошоп - Создание кнопки Web 2.0

Уроки фотошоп - Создание кнопки Web 2.0

Уроки фотошоп - Создание кнопки Web 2.0

Уроки фотошоп - Создание кнопки Web 2.0

Уроки фотошоп - Создание кнопки Web 2.0

На новом слое выделите инструментом Elleptical Marquee такую область

Уроки фотошоп - Создание кнопки Web 2.0

Залейте выделение РАДИАЛЬНЫМ градиентом от белого к прозрачному и смените режим смешивания для слоя на Soft Light, a парметр Fill понизьте до 40%.

Затем CTRL+клик по иконке слоя в палитре слоев, далее Select>Modify>Contract 2px, потом Select>Inverse и нажимаем DELETE. Снимаем выделение (CTRL+D)

Уроки фотошоп - Создание кнопки Web 2.0

Уроки фотошоп - Создание кнопки Web 2.0

Добавьте свой текст на кнопку (я использовал шрифт Segoe 25pt)

Уроки фотошоп - Создание кнопки Web 2.0

К текстовому слою примените стиль Drop Shadow

Уроки фотошоп - Создание кнопки Web 2.0

Всё готово! Ниже приведены 2 варианта

Уроки фотошоп - Создание кнопки Web 2.0

Перевод: Ревтов Игорь
Источник