В тази статия ще разгледаме създаването на шаблон за уебсайт за автомобили във Photoshop CS6, въпреки че стъпките, описани в материала, ще работят и за версиите по-долу.

Това е готовият темплейт (тема) на сайта, който ще получим като резултат:

Първо създайте нов документ 1200 на 850 пиксела и го запълнете с черно.

Лого на уебсайт за автомобили

Да започнем с логото. Създайте нова група слоеве, наименувайте "Лого" и в нея нов слой, наименувайте го "Лого Glow" . Това ще бъде фонът под текста.

Изберете обикновена кръгла четка и задайте следните параметри:

  • Размер на четката: 400px
  • Твърдост: 0%
  • Непрозрачност: 100%
  • Поток: 40%
  • Цвят: бял (ffffff)

Направете петно в горния ляв ъгъл с четка:

След това, като използвате инструмента за преместване, повдигнете слоя с петното малко нагоре и задайте непрозрачност на слоя 70%:

В лентата с инструменти изберете инструмента "Текст" , в лентата с опции щракнете върху иконата за активиране на панела със символи, където задаваме следните стойности:

  • Семейство шрифтове: Avanti Regular (изтеглете шрифта от връзката по-долу)
  • Размер на шрифта: - 59pt
  • Проследяване: 5
  • Хоризонтален мащаб - 115%
  • Цвят: 91d4f5

За удобство включете линеалите (Ctrl+R) и задайте водачите, хоризонтално 92 пиксела, вертикално - 104 пиксела, в мерника на водачите ще има началната позиция на текста на логото на сайта. Пишем логото "Автомобили" или нещо подобно, фигурата показва мащаба на документа в пълен размер:

Задайте следните параметри за шрифта на слогана:

  • Семейство шрифтове: Avanti Regular
  • Размер на шрифта: - 19pt
  • Проследяване: -35
  • Хоризонтален мащаб - 100%
  • Цвят: cdcdcd

Начална позиция - 104 пиксела ширина и височина:

В горния ляв ъгъл, използвайки текст от семейството Arial в бял цвят и височина 20pt, напишете формата за регистрация и формата за влизане:

Хоризонтално меню

Създайте нова група слоеве "Главно меню" , където ще бъдат поставени всички елементи от хоризонталното меню.

Създайте векторна фигура с ширина 980 и височина 44 пиксела с радиус на заобляне 5 пиксела, цветът на запълване е черен. Позиционирайте горния ляв ъгъл на фигурата съответно 140 пиксела под и 110 пиксела под и вляво от краищата. Това ще бъде рамката на менюто:

Добавете стил на слой Stroke към формата със следните параметри:

  • Размер - 1 пиксел
  • Цвят на щриха - 656565
  • Позиция - вътре (вътрешно)
  • Непрозрачност (Непрозрачност) - 75%

Активирайте инструмента Text, задайте параметрите:

  • Семейство шрифтове: Arial Regular
  • Размер на шрифта: - 14pt
  • Хоризонтален мащаб - 110%
  • Цвят: Бял

И напишете елементите от менюто. Ето как ще изглежда в пълен размер:

Сега трябва да разграничите елементите от това меню. Създайте нов слой, наречете го „меню разделител“, вземете инструмента „Молив“ (Pencil Tool) с диаметър 1 пиксел и същия цвят като рамката,656565, задръжте клавиша Shift и нарисувайте вертикална лента от горния край на рамката до дъното:

След това копирайте слоя и използвайте Move Tool, за да плъзнете надясно, за да ограничите следващите елементи. Повторете това действие толкова пъти, колкото е необходимо.

Маркирайте активния елемент от менюто. За да направите това, под слоя "разделител на менюто" създайте нов слой и го наречете "активен" .

За да осветите само елемента от менюто, използвайте инструмента Rectangular Marquee Tool, за да го изберете. Границата на селекцията трябва да минаваinside удара на пънкарите! След това вземете инструмента Brush със следните параметри:

Размер на четката: - равен на ширината на точката
Твърдост: 15%
Непрозрачност: 100%
Натиск: 100% Цвят: 60c0f0

И поставете отпечатъка така:

Това е всичко с хоризонталното меню на шаблона на сайта. Нека започнем да създаваме персонализирано блоково меню.

Меню за персонализиран блок

Създайте нова група слоеве и я наименувайте "Users-block-menu" . Задайте две вертикални водачи на разстояние 110 и 1090 px от левия край (така че да докосват краищата на рамката на менюто) и две хоризонтални на разстояние 211 и 513 от горния ръб:

Вземете инструмента Line Tool, задайте режим Shape, цвят на запълване на 656565, дебелина на 1 px и начертайте две хоризонтални линии от мерника към мерника на водачите, както е показано от оранжевите стрелки на фигурата :

Премахнете водачите, като натиснете Ctrl+H и ще видите две хоризонтални успоредни сиви линии:

Този блок трябва да показва снимки на коли. Нека направим малка украса, за да покажем снимката.

В групата "Users-block-menu" създайте нов слой, наречете го "Checkers" и използвайте Rectangular Marquee Tool, за да направите фигура от квадрати. Те трябва да бъдат запълнени с бяло, но при запълване задайте различна непрозрачност, аз използвам 25 и 7 процента.Черните квадратчета, разбира се, не са запълнени с нищо и са празни области на слоя "Плакове" :

Резултат:

Сега можете да поставите снимка на кола под слоя „Плакове“ и да направите някакъв вид подпис. За подписа използвах шрифт Avanti Regular в светло сив цвят f8f8f8 и 30pt височина:

Сега нека създадем персонализирано меню. В групата "Users-block-menu" създайте нова група слоеве и я наименувайте "Menu" и в нея създайте нов слой с име, за например "Назад -меню" .

Задайте вертикален водач на разстояние 750 пиксела от десния край и хоризонтален водач на разстояние 220 пиксела от горния край. Създайте селекция 341 x 285 px и я запълнете с произволен цвят, в моя пример взех сиво, но в този случай цветът няма значение:

Премахнете отметката, като натиснете Ctrl+D и скрийте водачите, като натиснете Crrl+H. Сега приложете стил на слой Gradient Overlay към слоя "Back-menu" със следните настройки:

Сега квадратът трябва да изглежда така:

Нека се погрижим за елементите от менюто. Първо, нека направим няколко хоризонтални линии, по същия начин, както направихме линиите тук, горният ред ще бъде 289px от върха, разстоянието между линиите ще бъде 40px.

Подравнете линиите хоризонтално в центъра на квадрата, методите за подравняване са описани подробно тук.

В резултат на това получаваме този вид:

След това въведете съдържанието и елементите от менюто. За заглавие използвайте шрифт Arial Regular с цвят 6699cc и размер 22 pt, за абзаци същият шрифт в бяло и размер 16 pt:

След това добавете два бутона под елементите на менюто. Как да направите бутони за това оформление на автомобилния сайт е описано в този материал. Сега този блок изглежда така:

Преминете към последната част - създаване на раздели.

Тематични раздели на автосайта

Първо, нека създадем нова група слоеве и я наименуваме „Подкутии“. Нека създадем друга група в нея и да я наречем "Box1" . В групата "Box1" създайте фигура със следните параметри:

  • Тип - Фигура
  • Цвят на запълване - черно
  • Височина - 243 пиксела
  • Ширина - 315px
  • Кръгъл радиус - 5 пиксела

И го маркирайте на разстояние 538 пиксела от горния край и 110 от левия край. Добавете стил на слоя Stroke към формата със следните параметри:

  • Цвят на щриха - 656565
  • Позиция - вътре (вътрешно)
  • Размер - 1 пиксел
  • Непрозрачност (Непрозрачност) - 75%

Ето как трябва да изглежда този правоъгълник на оформлението:

В панела със слоеве щракнете върху групата "Box1" , за да премахнете отметката от правоъгълната форма. След това, на разстояние 42 пиксела под горния ръб на правоъгълника, начертайте хоризонтална разделителна линия с дължина 297 пиксела, подравнете я към центъра на правоъгълника, като използвате опциите за подравняване. Добавете стил на слоя Stroke към линията със същите настройки като формата. Сега квадратът изглежда така:

Напишете заглавието на раздела с шрифт Arial Regular, височина 16 pt, цвят 91d4f5.
За да оживите дизайна, можете да вмъкнете картина, в този случай изображение от 100 на 75 пикселите ще свършат работа.
И остава да добавим съдържанието на самия блок. За да направим това, ще използваме блоков текстИзберете инструмента за текст (Type Tool), щракнете с левия бутон върху полето за фигура и плъзнете курсора наляво и надолу, за да създадете рамка с желания размер. След това изберете шрифта Arial Regular 14 pt бяло и въведете желания текст:

Всъщност първият блок е готов. Дублирайте групата "Box1" , преименувайте я на "Box2" и я плъзнете 332px надясно.

За промяна ще направим този блок без изображение, но със списък, прости векторни фигури се използват като списъчни маркери, тяхното създаване е описано тук.

По същия начин създаваме третия блок, за промяна добавете бутона "Подробности" към него, създаването му също е описано тук.

Мазето на обекта остава. Но тук мисля, че не трябва да има въпроси, тук се създават бутони за Twitter.

Е, това е всичко, вижте отново оформлението на автомобилния сайт:

Изтеглете готов PSD файл и Avanti Regular шрифт:Изтеглете от Depositfiles.com

Категория:

Photoshop