Дизайн на чисто и елегантно оформление на блога В Photoshop CS6

В този урок ще ви покажа процеса на създаване на прост и чист блог за дизайн използване на най-новия Photoshop. Ще използваме новото Стилове на символи и Стилове на абзаци да ни помогне да рационализираме процеса.

За да следвате този урок, ще са ви необходими следните ресурси:

Безплатен шрифт Sansation от Bernd Montag.
26 Повторен шаблон на пиксели от PSDfreemium.
Икони на безплатни социални медии от Даниеле Селвителла.

Демонстрация

Подготовка на платното

Етап 1

В този дизайн ще използваме 960 gs. Изтеглете шаблона от главната му страница и вътре в zip файла, потърсете файла на photoshop. Отворете файла "12 колона таблица" в Photoshop.

Щракнете върху иконата на очите за слоя от 12 Col Grid, за да го скриете; няма да имаме нужда от нея за сега.

Стъпка 2

Текущият размер на платното е твърде малък. Кликнете Изображение> Размер на платното (или Ctrl + Alt + C). Добавете по-голям размер и се уверете, че сте поставили точката на закрепване към центъра.

Стъпка 3

Натиснете Ctrl + R, за да разкриете владетеля. Кликнете Изглед> Ново Ръководство за създаване на ново ръководство, което ще ни помогне да проектираме точно. Изберете вертикален и на позиция: 185 px направете вертикален водач 185 px от горния ляв ъгъл на платното.

Стъпка 4

Начертайте друг вертикален водач на позиция 150 px, 1095 пиксела и 1130 px.

По-долу е нашето последно ръководство вътре в платното.

Подготовка на цветна тема

Стъпка 5

За този дизайн ще използваме хубава цветова комбинация от Colorlouver. Кликнете върху връзката Преглед, за да отворите цветовата комбинация като JPEG файл.

Запазете цветовата комбинация и я поставете във файла на Photoshop. Чрез поставяне на изображението директно в платното можем да пробваме цвета му по-бързо и по-лесно.

Подготовка на фона

Стъпка 6

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

Кликнете върху втория цвят, # 948371, , за да го изберете.

Стъпка 7

Начертайте правоъгълна форма върху платното. Това ще бъде вторият фон.

Стъпка 8

Запазете избраната форма. В Бар с опции, отворен Напълнете цвят и след това щракнете върху икона на цветно колело. Когато се отвори диалоговият прозорец Избор на цвят, щракнете върху първия цвят, за да го изберете. За неговото Удар изберете цвят Нито един.

Стъпка 9

Направете нов слой и след това изберете горното платно, като използвате инструмента с правоъгълна рамка. Активирайте инструмент за градиент и я попълнете радиален градиент от бяло до черно. Уверете се, че градиентът е центриран върху горната част на платното.

Променете неговото Blend вид да се екран и да намали непрозрачност да се 37%.

Стъпка 10

Направете нов слой и го наречете "shadow".

Начертайте правоъгълна селекция в долната част на вторичния фон, както е показано. Кликнете Редактиране: Попълване. Комплект употреба да се черно. Кликнете Добре за запълване на селекцията с черно.

Стъпка 11

Омекотете го с Gaussian Blur. Кликнете Филтрирайте> Blur> Gaussian Blur.

Стъпка 12

Задръжте Alt и след това поставете курсора между тях сянка и горен фон слой. Без да отпускате клавиша Alt, щракнете върху конвертирайте слоя в Clipping Mask. Чрез превръщането му в Clipping Mask, сянката сега отива вътре в горната част на фона.

Стъпка 13

Донесете сянка непрозрачност да се 50% да го направим коварен. По-долу можете да видите резултата с 100% увеличение.

Стъпка 14

Винаги е добра идея да сложите тези слоеве в една група. Да го направя, изберете всички слоеве и след това щракнете върху Ctrl + G.

удар с глава

Стъпка 15

Начертайте правоъгълник върху горното платно, както е показано.

Стъпка 16

В Бар с опции, комплект Удар цвят # af9f8e.

Стъпка 17

За неговото Напълнете цвят, изберете линеен градиент от # d0c4b9 до # a89c91.

По-долу е показан резултатът от 100% изглед.

Име на сайта

Стъпка 18

Добавете името на сайта от лявата страна на дизайна. Спазвайте разположението, както е показано по-долу. Кликнете два пъти върху текста и добавете Бъдете сянка. За неговия шрифт използвайте Sansation.

Активирате Инструмент за многоъгълници и настройте Sides да се 3. Начертайте триъгълна форма Попълнете: # 3d3123 и Ход: Няма. Добави Стил на слоя > Пуснете сянка.

Стъпка 22

Нека подчертаем активното меню, като добавим линия под нея. Активирайте Инструмент за линия и да определи тежестта си 5 px. Изберете # f76b6a за неговото пълнене, без удар.

Поставете линията точно под активното меню и добавете 1 px пространство в долната част на лентата с менюта.

Използване на стилове на символи

Стъпка 23

Да запазим настройката на символите като стил на символи. Тази функция е опростена версия на стилове на символи в InDesign. За да го запазите, активирайте текста и след това кликнете върху иконата „Нов стил на символите“.

Щракнете двукратно върху новия стил на символи и използвайте следната настройка.

Стъпка 24

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

Стъпка 25

Повторете предишната стъпка, за да създадете нов стил на символи за активното меню.

Стъпка 26

И така, какъв е смисълът от използването на стилове на символи? Стиловете на символите ни помагат да централизираме настройката на символите. Можем просто да редактираме стила на знаците, за да редактираме всеки текст, използвайки този стил. Вижте пример по-долу. Ако редактираме типа на шрифта в Character Style Главно меню - Нормално към Corbel, цялото нормално меню автоматично се променя на Corbel.

Стъпка 27

Направете нов слой и го поставете под лентата с менюта. Ctrl-кликнете върху лентата с менюта, за да направите нов избор въз основа на неговата форма. Напълнете го с черно.

Стъпка 28

Премахване на селекцията с помощта на Ctrl + D. Омекотяване чрез добавяне Gaussian Blur, Филтрирайте> Blur> Gaussian Blur.

Slider

Стъпка 29

Начертайте правоъгълна форма с ширина от 10 колони (вижте по-долу).

За неговото Цвят на запълване изберете # dfd1c2. За неговото Удар изберете # c8baac с размер 10 pt. Кликнете върху малката стрелка надолу до прегледа на линията и се уверете, че Подравняване отвътре е избрано.

Стъпка 30

Поставете снимка върху рамката. Конвертирайте го Маска за подстригване чрез натискане на Ctrl + Alt + G. Картината автоматично преминава в рамката на плъзгача. Ако е необходимо, можете да премествате и преоразмерявате картината, без да засягате рамката.

Стъпка 31

Начертайте друга правоъгълна форма зад плъзгача със същия цвят. Уверете се, че сте го прикрепили към най-крайния водач. Добави Стил на слоя> Наслагване на шаблон използване на пикселен шаблон от PSDfreemium. Тон надолу непрозрачност да направим нейния фин.

Стъпка 32

Начертайте правоъгълна форма над формата с Попълнете: # b3aca5 и няма инсулт. Натиснете Ctrl + T и след това завъртете го на 45 °. Конвертирайте формата на слоя Маска за подстригване.

Стъпка 33

Дублирайте формата и я преоразмерете. Променете неговото Напълнете до по-тъмен цвят. Конвертирайте формата на слоя Маска за подстригване.

Стъпка 34

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

Стъпка 35

За да направите нов избор, натиснете Ctrl и кликнете върху кадъра. Направете нов слой и го конвертирайте в a Маска за подстригване. Попълнете селекцията с черно.

Стъпка 36

Отменете (Ctrl + D) след това размеквам използвайки Gaussian Blur.

Можете да намалите непрозрачността на сянката, ако е необходимо.

Стъпка 37

Начертайте заоблен правоъгълник на ъгъла на плъзгача Попълнете # c8baac.

Стъпка 38

Начертайте кръг във формата. Задайте своя Удар да се черно с размер 1 pt и премахнете Fill.

Стъпка 39

Изберете кръг използвайки пътя Избор на път инструмент. Shift + Alt - плъзнете пътя, за да го дублирате.

Повторете това, за да нарисувате повече кръгове.

Стъпка 40

Изберете една от пътеките в кръга. Натиснете Ctrl + Shift + J, за да го отрежете на нов слой.

Стъпка 41

В Бар с опции, премахнете Удар и я смени Напълнете към a радиален градиент от # e38989 до # bb5c5c. Добави Стил на слоя> Външно сияние и Бъдете сянка.

Стъпка 42

Начертайте елиптична селекция под плъзгача. Направете нов слой и го напълнете с черно.

Стъпка 43

Премахнете отметката (Ctrl + D). Омекотете го с помощта на Gaussian Blur.

Долен фон

Стъпка 44

Начертайте друга правоъгълна форма за дъното. Използвайте същото Напълнете и Удар цвят като форма на плъзгача.

Както винаги, бъдете много предпазливи при поставянето му. Искаме тя да покрие всяко ръководство на платното.

Добави Стил на слоя> Наслагване на шаблон.

Резултатът е 100% увеличение.

Стъпка 45

Изберете неговата зона нагоре, като използвате инструмента Rectangular Marquee.

Стъпка 46

Направете нов слой, поставете го зад формата. Попълнете селекцията с черно. Натиснете Ctrl + T, щракнете с десния бутон и изберете перспектива.

Плъзнете горните ъгли навън.

Отново кликнете с десния бутон и изберете мащаб. Плъзнете горната дръжка надолу.

Кликнете с десния бутон и изберете основа. Плъзнете ляв и десен сегмент навътре.

Омекотете го с помощта на Gaussian Blur.

Тон надолу непрозрачност да се 20%.

Стъпка 47

Начертайте бял корем в рамките на фона. Това ще бъде фон за основното съдържание на сайта.

Добавете интервал от 10 px към лявата, дясната и горната страна на фона. Разстоянието трябва да е лесно, защото направихме ръководството в ранните стъпки. Добави Стил на слоя> Външно сияние.

Стъпка 48

Добавете ново ръководство, 25 px от горната страна на формата.

Заглавие на раздел

Стъпка 49

Добавете нов стил на символи за заглавието на раздела на страницата и неговото описание.

Добавете заглавието на раздела и неговото описание с помощта на инструмента за тип. Прилагайте стилове, които сме направили по-рано. Уверете се, че сте добавили 25 пиксела пространство от горната страна на неговия фон с помощта на по-рано направеното ръководство.

Стъпка 50

Начертайте 5 пиксела линия под описанието на сайта с Попълнете: # 938270 и Ход: Няма.

Блог пост

Стъпка 51

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

Стъпка 52

Добавете заглавие на пост и приложите предишния стил на знака.

Стъпка 53

Начертайте правоъгълна форма под заглавието с 4 ширини на колони. Комплект бял за неговото Напълнете и #bebebe за неговото Удар. Добави Стил на слоя> Ход.

Стъпка 54

Поставете изображение върху формата. Преобразуване в маска за отрязване (Ctrl + Alt + G).

Стъпка 55

Начертайте заоблен правоъгълник с Попълнете: # 8e8380 и Ход: Няма. Конвертирайте го Маска за подстригване.

Стъпка 56

Направете нови стилове за символи за метаданните на блога.

Стъпка 57

Добавете текст с метаданни в горната част на формата и приложите стила на символите, който сме направили по-рано.

Стъпка 58

Активирате Тип и щракнете с мишката, за да направите текстово поле. Задайте неговата ширина на 4 колони. Кликнете Тип> Постави Lorem Ipsum да я запълни с автоматично генериран Lorem Ipsum от Photoshop.

Стъпка 59

Направете нов стил на абзац за съдържанието на знака. Кликнете върху новата икона в панела Стилове на абзац.

Щракнете два пъти върху стила на абзаца и използвайте следната настройка.

Стъпка 60

Приложете този стил към съдържанието на публикацията. Можете също да експериментирате с неговите настройки за отстъп и разстояние.

За уеб дизайн деактивирайте раздела.

Стъпка 61

Начертайте заоблен правоъгълник с Попълнете: # 8e8380 и Ход: Няма. Добави Стил на слоя> Наслагване на шаблон. За последователност използвайте същия модел като в плъзгача.

Стъпка 62

Добавете етикет на бутон. Предлагам ви да го запазите като стил на символи. По този начин, ние можем да го използваме лесно за други бутони.

Стъпка 63

Предишният бутон е за нормално състояние. Нека го дублираме и сменим цвета му # f76b6a. Също така настройте типа на етикета му да бъде удебелен.

Стъпка 64

Поставете публикацията в група и натиснете Ctrl + J, за да я дублирате. Натиснете Alt, за да дублирате групата.

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

Стъпка 65

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

Стъпка 66: Долен колонтитул

Нека започнем да работим по долния колонтитул. Добавете заглавие на притурката и нейното описание.

Стъпка 67

Добавете връзка и начертайте 1 пикселна линия под нея. Комплект Попълнете: Няма и Ход: # 8e8380.

Стъпка 68

Кликнете Повече опций и изберете прекъсната линия.

Стъпка 69

Добавете още връзки в приспособлението.

Стъпка 70

Дублирайте приспособлението.

Стъпка 71

Също така трябва да добавим условието за навъртане. Задайте една от връзките за получер.

Под тази активна връзка добавете 5 пиксела. Настройте цвета си на # f76b6a. За последователност, външният вид на тази връзка е подобен на активното меню в лентата с менюта.

Стъпка 72

Добавете още един правоъгълник в долната част. Задайте своя Напълнете да се # 3d3123.

Информация за долния колонтитул

Стъпка 73

Добавете инфо с помощта на информация Тип инструмент. Дай му тъмно Бъдете сянка да добавите контраст към неговия фон.

Социална мрежа

Стъпка 74

Добавете икони от социалните медии от Daniele Selvitella. Добави Стил на слоя> Външно сияние.

Стъпка 75

Задайте нормална икона на 50%. За състоянието на навиване, нека да запазим неговото непрозрачност при 100%.

Стъпка 76

Вземете иконата на курсора за свободна ръка и поставете най-малката ръка над активната връзка или връзката с мишката.

Краен резултат

Това е нашият краен резултат. Можете да видите, че най-новата версия на Photoshop има някои интересни функции за проектиране на уеб оформление. Стилове на символи и стилове на абзаци е значително подобрение за всеки уеб дизайнер.

Демонстрация
Изтеглете Източник