|
Photoshop урок - Создание микробара
|
|
uSite Team
1689 сообщений
Мужчина
|
В этом уроке я покажу вам, как создать микробар для uSite.su в Adobe Photoshop. Урок довольно легкий, справится даже тот, кто ничего в фотошопе не смыслит.
Шаг 1. Запускаем фотошоп и создаем документ размерами 150x21px. Создаем новый слой с именем Background и заливаем его любым цветом.
Шаг 2. Делаем двойной клик рядом с именем слоя и выбираем Наложение градиента (Gradient overlay)
Цвета градиента: #4D6D91 и #5C82AC
Шаг 3. Добавляем обводку (Stroke) со следующими настройками (цвет указан на скриншоте)
Шаг 4. Создаем новый слой (назвать можно White Border или Белая обводка). Создаем выделение (внутри темно- синей обводки, т.е. с отступом в 1px от всех сторон) и заливаем любым цветом. Заливку ставим на 0 (регулируется на панели, находящейся над слоями). Теперь двойным кликом рядом с именем слоя выбираем Stroke (Обводка) и настраиваем по скриншоту (цвет белый)
Шаг 5. Создаем новый слой с именем Glass или Стекло, или Стеклянный эффект. Создаем выделение, как в предыдущем пункте, только высота в 2 раза меньше, т.е. граница залитого проходит горизонтально через центр изображения. Если непонятно то на скриншоте все видно
Теперь устанавливаем заливку на 5-10% (на ваш выбор).
Шаг 6. Создаем новый слой, выбираем белый цвет и пишем следующий текст: Уникальные скрипты. Надпись помещаем слева. Теперь двойной клик рядом с именем слоя и выбираем первый пункт - Тень (Drop Shadow).
На новом слое пишем следующий текст: uS и помещаем справа. Выполняем то же самое, что и с текстом "Уникальные скрипты".
Шаг 7. В панели меню выбираем Image ---> Canvas Size (комбанация Alt+Ctrl+C) и выбираем высоту документа в 29px. Жмем ОК. Создаем новый слой с именем Shadow. Берем мягкую кисть черного цвета с радиусом в 20px и пару-тройку раз тыкаем в центр изображения (на этом новом слое). Перемещаем слой в конец (под слой Background) и растягиваем, да так, чтобы ширина слоя была раза в 1,5 - 2 больше ширины документа и перемещаем в нужное место. Заливку ставим на 20-40% в зависимости от интенсивности нужной вам тени.
Шаг 8. Дополнительно. Если хотите поставить на фон узор - то качайте кисти, текстуры или что-либо еще. Допустим у меня уже есть какой то узор. Создаем новый слой. Вставляем в него наш узор, регулируем высоту, ширину, перемещаем в нужное вам место. Ставим непрозрачность на 0 и заливаем (через стили - двойной клик рядом с именем слоя ---> Наложение цвета (Color overlay). Цвет выбираем белый, заливку или непрозрачность на 15%. Режим наложения - Перекрытие (Overlay). Теперь Зажав Ctrl тыкаем на икноку слоя (слева от имени слоя) с белой обводкой (из шага 4). По умолчанию это слой с именем White Border и внизу справа (в самом низу программы справа) есть иконка серого прямоугольника с белым кружком в центре, т.е. мы создаем маску слоя White Border для слоя узора.
Спасибо за внимание...
|
|
|
|
|
|
Пользователь
1 сообщениий
Мужчина
|
Класный урок
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
урок - уг))) Надо как-нибудь потом видеоурок создать))
|
|
|
|
|
|
Бывалый
8 сообщений
Мужчина
|
PhoEn-X, Почему же?
Все понятно и четко написано, хоть и не так рисовался оригинал но все равно спасибо!
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
Tost1k, урок - оригинал, цвета те же. Со стеклянным эффектом пошаманить не тяжело. Стили для фона, узора, обводки и текста те же.
|
|
|
|
|
|
Бывалый
8 сообщений
Мужчина
|
PhoEn-X,Тень в МБ делается по другому а не так как в уроке.
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
То есть тень делается как-то иначе? Не через стили (Drop Shadow) ?
Тогда расскажи мне, как делается тень.
|
|
|
|
|
|
Бывалый
8 сообщений
Мужчина
|
PhoEn-X,Мы использовали Эллипс, размывали его по гауссу и сделали непрозрачность вот и получилась у нас такая тень =)
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
А кто сказал, что способы должны быть у всех одинаковыми?)) Тем более что ваш способ - оставляет резкую границу у тени. Это мне не понравилось, потому я использовал другой способ
|
|
|
|
|
|
Бывалый
276 сообщений
Мужчина
|
Спасибо за урок мне помогло !
|
|
|
|
|
|
Заблокирован
1004 сообщения
Мужчина
|
Напишы версию фотошопа)
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
По сути любая, я юзаю CS5
|
|
|
|
|
|
Premium user
682 сообщения
Мужчина
|
а мне понравился урок)
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
^^
|
|
|
|
|
|
Бывалый
489 сообщений
Мужчина
|
PhoEn-X, Мне понравился урок. Зря ты так!
|
|
|
|
|
|
Premium user
682 сообщения
Мужчина
|
урок хороший) феня как всегда молодец
|
|
|
|
|
|
Бывалый
247 сообщений
Мужчина
|
Если руки из правильного места растут, то все и так понятно.
А урок хороший 
|
|
|
|
|
|
Бывалый
489 сообщений
Мужчина
|
Урок УГ!
p.s - урок отличный!
|
|
|
|
|
|
uSite Teаm
854 сообщения
Мужчина
|
PhoEn-X, Хороший урок. Спасибо, молодца.
|
|
|
|
|
|
Beginner
3 сообщения
Мужчина
|
)
|
|
|
|
|
|
Пользователь
56 сообщений
Мужчина
|
спасибо за урок 
|
|
|
|
|
|
uSite Team
1689 сообщений
Мужчина
|
^^
|
|
|
|
|
|
Бывалый
692 сообщения
Мужчина
|
Красиво, спс)
|
|
|
|
|
|
|
Сообщение от пользователя iFrendly с отрицательной репутацией.
Вы можете просмотреть это или все сообщения данного пользователя. |
Бывалый
1721 сообщениий
Мужчина
|
PhoEn-X, Ого красиво))
|
|
|
|
|
|
|
Сообщение от пользователя Ilia с отрицательной репутацией.
Вы можете просмотреть это или все сообщения данного пользователя. |
Заблокирован
385 сообщений
Мужчина
|
Полезный урок
|
|
|
|
|
|
