Вверх страницы
Вниз страницы
Неожиданно, правда? Спустя 4 года молчания, Стайл Веб снова открывает свои объятия. You are welcome =)


StyleWeb

Объявление

       





! АКТУАЛЬНО на февраль 2016!

Кто всё - таки  заинтересован в восстановлении SW FORUM`а, с радостью ждём вас в ЛС у ПтичьеМолоко

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » StyleWeb » Архив SW » Урок 74 Необычный бигбар


Урок 74 Необычный бигбар

Сообщений 1 страница 4 из 4

1

взят от сюда

Итак, в этом уроке будем создавать бигбар с картинкой, которая выходит за рамки полоски размером 350х40 (напомню, что это стандартный размер бигбара, принятый в нете).

Как создать бигбар стандартного размера - читаем здесь

Итак, создали мы бигбар размером 350х40 пикселей. Пусть у меня он будет таким:

http://s39.radikal.ru/i085/0807/f7/55b41f9353a4.gif

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

http://s60.radikal.ru/i168/0807/9f/07817bee79e1.jpg

Теперь я хочу справа в рамочке вставить вот такую ромашку таким образом, чтобы бигбар-полоска была снизу, а рамочка с ромашкой возвышались над ней:

http://s40.radikal.ru/i087/0807/87/4617ef28ca2d.jpg

Для этого нам необходимо увеличить размер холста нашего документа (напомню, что сейчас размер бигбара - 350х40, а принятый размер бигбара с рисунком 350х80). Если мы сейчас просто применим Image-Canvas Size (Изображение-Размер холста) и пропишем нужный нам размер:

http://s61.radikal.ru/i174/0807/bc/27222fa492b8.jpg

то вот какой кошмар мы увидим:

http://s53.radikal.ru/i141/0807/ea/0099b852702c.gif

Почему? Все потому, что мы просто перенесли фон в наш документ. Не пугаемся, смело нажимаем Ctrl+Z и берем на вооружение инструмент Crop (Обрезка)http://s59.radikal.ru/i165/0807/af/f4887028145b.jpg Выделяем всю область нашего бигбара (абсолютно не важно какой слой сейчас активный):

http://s61.radikal.ru/i174/0807/31/a5e343822ab2.jpg

Правой клавишей мышки кликаем на изображении и в появившемся меню выбираем Crop (Обрезать):

http://s39.radikal.ru/i083/0807/71/f4731e4887f9.jpg

Внешне никаких изменений вы не увидите, но зато теперь, когда вы примените Image-Canvas Size (Изображение-Размер холста), то конечный результат будет таким, какой нам и нужен:

http://s61.radikal.ru/i174/0807/bc/27222fa492b8.jpg

http://s61.radikal.ru/i172/0807/e7/ac6bfccaa014.gif

А теперь одна важная деталь: для обводки и рамочки нельзя использовать тени или свечения. Они подразумевают распыление и при сохранении в формате *.gif, вы получите вот такое некрасивое выползание за рамку:

http://s40.radikal.ru/i088/0807/3a/4c4fe129376b.gif

Итак, теперь перенесем нашу замечательную ромашку и с помощью Edit-Free Transform (Правка-Свободная трансформация) подгоним размер ромашки:

http://s53.radikal.ru/i139/0807/31/4aa9044a987e.gif

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

http://s45.radikal.ru/i109/0807/d5/d1a09508aabc.jpg

Проверяем, чтобы был активным инструмент Rectangular Marquee Tool (Прямоугольное выделение)http://s53.radikal.ru/i141/0807/ae/9fd00e3e2fa5.jpg и кликаем правой клавишей мышки на выделенной области. В появившемся меню выбираем Stroke (Обводка) и указываем нужные параметры:

http://s45.radikal.ru/i108/0807/45/ca06bf9752d6.jpg

Вот и все )

http://s55.radikal.ru/i147/0807/34/0596f2a7fd7a.gif

+1

2

прикольно ща попробую

0

3

не понял а как там ту ромашку или чтото другое вставить

0

4

Стасик
вырезаешь  любую картинку размера по высоте больше чем сам бигбар, потом вставляешь на бигбар и готово  :yep:

0


Вы здесь » StyleWeb » Архив SW » Урок 74 Необычный бигбар