В тази статия ще разгледаме как да направим бутони за оформлението на сайта за автомобили от статията „Създаване на оформление на сайта за автомобили във Photoshop CS6“.
Създаване на големи бутониПърво, нека направим големи бутони като „Детайли“.
Да започваме. Създайте нов документ с размери 121 x 34 px с прозрачен фон, след което го запълнете с черно. По-късно ще изтрием фоновия слой, но сега ни трябва за по-голяма яснота.
В палитрата с инструменти изберете инструмента Rounded Rectangle Tool:
В панела с опции посочете вида на контура - „Форма“ (Форма) и радиуса на заобляне - 2 пиксела, цвета на запълване - всеки, в този пример имам светло сиво. След това създаваме форма с размера на нашия документ, 121 на 34 пиксела, за по-голяма яснота можете да увеличите мащаба на дисплея:
Това ще бъде основата на бутона. Сега трябва да го направим да изглежда като бутон, т.е.Всъщност Photoshop CS6 ви позволява да създавате сложно или дори градиентно запълване, както и щрих, като използвате опциите за форма, но в този случай ще използваме добрите стари стилове на слоеве, така че този материал е подходящ не само за CS6, но също и за версиите по-долу.
И така, нека да дадем стилове на слоя с формата "Stroke» (Stroke)" и "Gradient overlay" ; (Gradient Overlay) със следните настройки:
Всъщност бутонът е почти готов:
Сега остава само да добавите желания текст. За текста използвах шрифт Arial Regular 14 pt в бяло:
Не забравяйте да изтриете фоновия слой!
Създаване на бутони за добавяне към социалните мрежи
Създайте нов документ с размери 95 x 17 px с бял фон, след което го запълнете с черен. Както в първия случай, фоновият слой е необходим за яснота, след което ще го изтрием.
Изберете отново „Инструмент за заоблен правоъгълник“, в панела с опции посочете вида на контура - „Форма“ (Shape) и радиуса на заобляне - 8 пиксела, цвят на запълване - всеки. След това създаваме форма с размера на документа, 95 на 17 пиксела, за по-голяма яснота можете да увеличите мащаба на дисплея:
Приложете същите стилове на слоя към слоя с фигури като към първия бутон, получаваме следния резултат:
Сега трябва да изтеглите логото на социална мрежа с подходящи размери, има много от тези неща в интернет.За моя пример изтеглих лого на Twitter с размери 24px на 24px, плъзнах го върху нашия документ и го намалих малко с помощта на инструмента Free Transform. Увеличих отново:
Както виждате, десните ъгли на логото стърчат отвъд заоблените ъгли на бутона, което не е добре. За да коригирате този недостатък, първо растеризирайте стиловете на слоя на формата. За да направите това, щракнете с десния бутон върху слоя с формата в палитрата на слоевете и изберете елемента Rasterize Layer Style от контекстното меню, което се отваря. Сега приложете изрязваща маска към слоя с логото:
Както можете да видите, сега логото не излиза извън ръбовете на бутона:
Остава само да добавите текст с размер 12 pt, шрифт Myriad Pro, цвят - бял:
И изтрийте фоновия слой.