Как сделать красивый юзербар


Как сделать красивый юзербар

Урок для Adobe Photoshop "как сделать юзербар?". В данном уроке мы попытаемся, шаг за шагом, создавать свой юзербар. Вот примерно такой:

Итак...

01. Создаем новый файл File --> New\Файл --> Новый (ctrl+N) размером 350х19 пискелей (стандартные размеры для юзербара), RGB, Transparent\Прозрачный.

Вы можете сохранить данные параметры, введя название в поле Name (например, Userbar) и нажав на кнопку "Save Preset...". В следующий раз Вам достаточно будет выбрать в выпадающем меню "Preset:" свои установки.
В последнее время получил распространение формат 350х20, так что допустимо использовать и такие параметры.

02. Делаем фон нашего юзербара. Например, основной цвет: #287ec7, фоновый: #007d34. С помощью инструмента Градиент\Gradient (G) создаем фон юзербара. Для этого проводим линию сверху вниз (можно и наоборот).

Если у Вас при нажатии клавиши G выбирается Paint Bucket\Заливка, а не градиент, то нажмите shift+G
Можно использовать и однородный фон, тогда для этого используют Paint Bucket\Заливка (shift+G)

03. Теперь пришла очередь добавить в наш юзербар косые полоски. Для этого создадим заготовку для выполнения заливки - File --> New\Файл --> Новый (ctrl+N) размером 3х3, RGB, Transparent\Прозрачный.

Нажимаем клавишу D - чтобы переключить палитру на стандартные основной цвет и цвет фона (чёрно-белый). Выбираем инструмент Pencil tool\Карандаш (B). Выставите размер карандаша 1px и нарисуйте три пикселя как на картинке (для удобства увеличьте рисунок до 1600% клавишами ctrl+"+"):

Если у Вас при нажатии клавиши B выбирается кисть, а не карандаш, то нажмите shift+B
Можно рисовать полоски и в другую сторону, а так же использовать матрицы 4х4 и 5х5.

Теперь вверху нажимаем Edit --> Define Pattern\Редактирование –-> Определить узор и нажимаем Ок:

Теперь данный файл можно не сохраняя закрыть.

Создадим новый слой Layer --> New --> Layer\Слой --> Новый --> Слой (ctrl+shift+N).

Далее заливаем этот слой нашими косыми линиями. Выбираем инструмент Paint Bucket\Заливка (G), делаем установку Pattern\Узор, выбираем нашу заготовку, и выполняем заливку.

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

04. Добавим картинку в наш юзербар. Для этого откроем любой файл с изображением (Например, иконку фотошопа) File --> Open\Файл --> Открыть (ctrl+O).

С помощью Move Tool\Перемещение (V) перетаскиваем картинку на наш юзербар.

Потом придаём ей нужные размеры - Edit --> Free Transform\Редактировать --> Свободное трансформирование (ctrl+T), уменьшая до нужных нам размеров. При этом лучше зажать клавишу shift, чтобы сохранить пропорций при масштабировании.

Если картинку невозможно перенести, то наверняка она находится не в режиме RGB (особенно если это файлы в формате png или gif). Чтобы перейти в данный режим, нужно выполнить Image --> Mode --> RGB Color.

05. Пора придать эффект объемности нашему юзербару. Создаём новый слой Layer --> New --> Layer\Слой --> Новый --> Слой (ctrl+shift+N).

Выбираем инструмент Elliptical Marquee\Овальное выделение (M), и в верхней части юзербара делаем овально выделение.

Вместо инструмента Elliptical Marquee\Овальное выделение можно использовать Rectangular Marquee\Прямоугольное выделение (shift+M).

С помощью заливки (G) закрашиваем выделенную область белым цветом.

Выбираем прозрачность слоя в пределах 20-40%. После этого снимаем выделение (Ctrl+D)

06. Пришло время добавить надпись на наш юзербар. Для этого нужно воспользоваться инструментом Text\Текст (T) и, с его помощью пишем нужный нам текст. Например - "Photoshop User". Для этого лучше всего использовать шрифт Visitor (скачать) размером в 14 пикселей, но можно использовать и любой другой шрифт на Ваше усмотрение.

Далее делаем обводку текста: для этого идём в Layer --> Layer Style... --> Stroke...\Слой --> Стиль слоя --> Обводка Выбираем чёрный цвет и размер обводки в 1 пиксель. Жмем ок и юзербар готов.

Теперь осталось его только сохранить - File --> Save for Web\Файл --> Сохранить для Web. Стоит отметить, что для юзербаров лучше использовать форматы png8\png24 или gif.




Как сделать красивый юзербар

Как сделать красивый юзербар

Как сделать красивый юзербар

Как сделать красивый юзербар

Как сделать красивый юзербар

Похожие новости:

   Схема включения электродвигателя стиральной машины
   Заварные пирожные белковым кремом рецепт
   Дизайн педикюра лето 2018
   Схема сестринской истории болезни
   Маргарита королева рецепты блюд