Създавайте графика на Photoshop със стилове на слоеве и интелигентни обекти

Автор: John Stephens

Дата На Създаване: 22 Януари 2021

Дата На Актуализиране: 17 Може 2024

Създавайте графика на Photoshop със стилове на слоеве и интелигентни обекти - Творчески

Съдържание

1. Презентационната зона
2. Създаване на бутон за поръчка
3. Направете страхотни сепаратори
4. Проектиране на персонализиран медиен плейър
Ресурси

В този урок ще проектираме графики за уебсайта за 8izz, фиктивно приложение за iPhone. Ще проуча как да използвам Photoshop’s Layer Styles и Smart Objects за създаване на изчистени, корпоративни графични елементи, които бихте могли да преназначите за вашите собствени дизайнерски проекти, включително областта за представяне на сайта и бутона за неговата поръчка; разделители за разделяне на съдържанието на сайта; и мултимедиен плейър с персонализирани заоблени ъгли.

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

1. Презентационната зона

Ще започнем, като създадем сивата презентационна зона в горната част на макета. Също така ще създадем фалшива персонализирана сянка за графиката на iPhone.

Нека започнем оформлението си, като отворим нов документ на Photoshop. Изберете Файл> Ново или използвайте или Cmd + N или Ctrl + N, в зависимост от това дали работите в Mac OS X или Windows.

Задайте Width на 1200 пиксела и Height на 1800 пиксела (ще използваме пиксели за всички слоеве, с изключение на текста, за който ще използваме точки). Настройте мрежа от 12 колони: Препоръчвам ви да използвате шаблона на мрежата 960 на Nathan Smith, който можете да изтеглите безплатно от уебсайта му. (Инструкциите за инсталиране са включени в изтеглянето.) Можете да активирате или деактивирате мрежата чрез Cmd / Ctrl +; пряк път.

Следващата стъпка е да добавите фонов модел в областта на презентацията. Използвам безплатния образец vertical_cloth от уебсайта Subtle Patterns, но можете да използвате един от вашите. Отворете изображението, изберете> Всички, изберете Редактиране> Определяне на шаблон и щракнете върху OK.

Сега добавете шаблона към фоновия слой, като отидете на Layer> Layer Style> Pattern Overlay или като просто щракнете двукратно върху слоя в палитрата Layers и изберете опцията Pattern Overlay от диалога Layer Style. (Забележка: ако не виждате опцията Layer Style, може да се наложи да конвертирате Background в нормален слой, като щракнете с десния бутон върху него в палитрата Layers и изберете Layer от Background). Ще трябва да изберете модела vertical_cloth в диалоговия прозорец, което можете да направите, като кликнете веднъж върху графиката Pattern (показана по-долу), за да отворите набор от мостри.

Създайте нова група слоеве, като отидете на Слой> Групови слоеве или чрез натискане Cmd / Ctrl + G. Поставете го над заглавката и го кръстете Главно съдържание (щракнете с десния бутон върху палитрата Layers и изберете Group Properties, за да го преименувате). Вътре в него създайте друга група с име Презентация.

Сега изберете инструмента за закръглени правоъгълници (U). От лентата с настройки в горната част на екрана го задайте на 10px Radius и # 606060 Color. Начертайте 960 x 430px форма, дайте й име Презентационна база и добавете следния стил на слоя:

Drop Shadow: Нормален режим на смесване, 40% непрозрачност, 120 ° ъгъл, използване на глобална светлина, 1px разстояние, 3px размер (оставете всички останали настройки на стойностите по подразбиране)
Вътрешна сянка: Нормален режим на смесване, 50% непрозрачност, ъгъл 93 °, разстояние 2px, размер 3px
Градиентно наслагване: режим на наслагване, 20% непрозрачност, градиент 100% непрозрачност от # 000000 до #ffffff (можете да редактирате тези настройки, като щракнете върху градиентната графика, за да отворите редактора на градиента), линеен стил и подравняване със слой, ъгъл 145 °
Ход: 1px размер, външна позиция, нормален режим на смесване, 100% непрозрачност, # 1f1f1f цвят

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

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

Не забравяйте да приведете презентационната област в решетка!

Сега добавете макета на iPhone 4s (можете да го изтеглите безплатно от Pixeden). Отворете iPhone-4S-black-3views-mockup.psd от изтеглянето, изберете групата iPhone 4S (черен) и го плъзнете и пуснете и подредете в базата за презентации, оставяйки 90px ляво поле и 45px по-ниско поле.

Ще създадем нова сянка за iPhone, така че изтрийте слоевете Shadow и Reflex от групата iPhone 4S (черна) (можете да направите това, като щракнете с десния бутон върху тях в палитрата Layers и изберете Delete Layer). Сега изберете инструмента Ellipse Tool (U) и създайте фигура с размерите 220px на H: 7px, като Color е зададен на # 00000. Преобразувайте този слой в Smart Object, като щракнете с десния бутон върху слоя и изберете опцията Convert to Smart Object. Отидете на Филтър> Размазване> Размиване по Гаус и задайте Radius на 6px, за да изглежда като сянка.

Ако искате да добавите текста в областта на презентацията, можете да създадете заглавието с инструмента за хоризонтален тип (T), зададен на Myriad Pro Semibold, 48pt, Sharp. От диалоговия прозорец Стил на слоя приложете Drop Shadow, зададен на Normal Blend Mode, 40% Opacity, 120 ° Ъгъл, Use Global Light, 1px Distance, 3px Size, # f5f5f5 Color. Подравнете текста с мрежата, оставяйки 30px ляво поле и 20px горно поле.

Сега напишете основния текст, като го поставите 40px под заглавието, като използвате DejaVu Sans Book, Sharp, 12pt. (Можете да изтеглите шрифта безплатно оттук.) Задайте водещите на 18pt (щракнете върху иконата в горната лента, за да превключите панелите Символ и Абзац или изберете Прозорец> Символ) и използвайте Color # f5f5f5.

За да добавите Layer Style, изберете текстовия слой на заглавието, щракнете с десния бутон върху него и изберете Copy Layer Style, след това отидете до текущия текстов слой, щракнете с десния бутон върху него и изберете Paste Layer Style. Друга възможност е да създадете нов стил на слоя ръчно, по същия начин, както преди.

Попълнената презентационна зона трябва да изглежда по следния начин:

2. Създаване на бутон за поръчка

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

Започнете, като създадете нова група в групата за презентации и я наименувате Бутон. С инструмента за закръглени правоъгълници, зададен на радиус 10px и # 262626 Color, нарисувайте фигура с размерите 90 x 70px и го наименувайте Етикет. От диалоговия прозорец Стил на слоя добавете Вътрешна сянка с нормален режим на смесване, 45% непрозрачност, ъгъл 50 °, разстояние 2px и размер 5px.

Добавете текста, показващ цената, като използвате Myriad Pro Bold, Sharp, 24pt и Color, зададени на # f5f5f5. От диалоговия прозорец Стил на слоя приложете следните настройки:

Drop Shadow: Нормален режим на смесване, 40% непрозрачност, ъгъл 120 °, използване на глобална светлина, 1px разстояние, 3px размер
Вътрешна сянка: нормален режим на смесване, 25% непрозрачност, ъгъл 120 °, използване на глобална светлина, 1px разстояние, 2px размер
Вътрешно сияние: режим на нормално смесване, 15% непрозрачност, градиент от 100% до 0% непрозрачност и цвят #ffffff, размер 1px

За да създадете частта от бутона „Налично в iPhone App Store“, използвайте инструмента за закръглени правоъгълници, зададен на радиус 10px и цвят # d4e945. Начертайте фигура с размерите 240 x 80px и я наименувайте Бутон.

Сега ще ви покажа точен начин за промяна на заоблените ъгли на този правоъгълник. Изберете миниизображение на маска за бутон Vector (кликнете върху нея в палитрата Layers, за да я изберете или отмените избора). С помощта на инструмента Rectangle с Shape Layers и Add to Path Area (+), избрани, както е показано по-долу, създайте квадрат, който ще запълни ъгъла, правейки го идеално остър. Приложете тази промяна към двата десни ъгъла.

За този бутон ще създадем нов шаблон, така че натиснете Cmd / Ctrl + N за да създадете нов файл с ширина 5px и височина 5px. Изберете Pencil Tool (B) с размера зададен на 1px и твърдостта на 100% и нарисувайте диагонална наклонена черта, както е показано по-долу.

Сега отидете на Edit> Define Pattern и дайте име на модела си, след което се върнете към предишния файл, за да добавите следните ефекти на стила на слоя към бутона „Наличен в iPhone App Store“:

Капка сянка: Режим на многократно смесване, 15% непрозрачност, ъгъл 90 °, 1px разстояние, 1px размер
Вътрешна сянка: нормален режим на смесване, #ffffff цвят, ъгъл 90 °, разстояние 1px, размер 1px
Наклон и релеф: Вътрешен стил на скосяване, плавна техника, 100% дълбочина, размер 2px, ъгъл 90 °, режим на подчертаване 0%, режим на сянка 10%
Градиентно наслагване: Режим на умножение, 30% непрозрачност, градиент 100% непрозрачност от # 000000 до #ffffff Цвят, 150% скала
Наслагване на шаблон: Режим на многократно смесване, 10% непрозрачност и изберете шаблона, който току-що сте направили от образеца Pattern
Ход: Размер 1px, Вътрешна позиция, Нормален режим на смесване и Тип запълване, зададени на Градиент със 100% непрозрачност от # 8a8a8a до # 767676 Избран цвят и обратна линия, линеен стил, ъгъл 90 °

Плъзнете и пуснете Available_on_the_App_Store_ (сиво) .png (достъпно от Wikipedia) в горната част на формата на бутона и редактирайте Smart Object, както следва: отидете в Select> Color Range, задайте Fuzziness на 200 и изберете фона сив цвят и го променете на # d4e945. Използвайки същата техника, изберете белия цвят и го променете на # 272827.

Преоразмерете значката на App Store, като натиснете Cmd / Ctrl + T или като отидете на Редактиране> Безплатна трансформация и намаляване на значката до 80%, като въведете тази стойност както в полетата W, така и в H. Центрирайте го. Приложете трансформацията, когато бъдете подканени. За да накараме значката да се слее добре с основата на бутона, ще я направим отрязваща маска. Щракнете с десния бутон върху слоя със значката на App Store и изберете Създаване на маска за изрязване.

Сега нека дадем на бутона приятен ефект на градиент, като изберете инструмента за градиент (G). От редактора на градиента задайте неговия цвят на #ffffff и направете лявата страна 100% непрозрачност, а дясната 0% непрозрачност. Изберете иконата Angle Gradient от лентата с инструменти Gradient в горната част на екрана и задайте Opacity на 10%. Създайте нов слой, като натиснете Shift + Cmd / Ctrl + N. С избрания слой задръжте Cmd / Ctrl и кликнете върху миниизображението Vector Mask на слоя Button, за да ограничите действията на слоя градиент до тази конкретна форма. Сега плъзнете градиента от долния десен ъгъл към горния ляв ъгъл. Резултатът трябва да изглежда по следния начин:

И накрая, позиционирайте бутона по подходящ начин, оставяйки десен и долен поле от 20px.

3. Направете страхотни сепаратори

След това ще създадем няколко линейни сепаратора, за да разделим различни части от дизайна, както е показано на изображението по-долу:

Създайте нова група слоеве и я наименувайте Разделители.

Ще започнем да проектираме разделител, като създадем хоризонтална линейна форма с Line Tool (U). За кратък вертикален разделител използвайте размерите 1 x 960px (можете да използвате настройка за тегло от 1px) и Color задайте на # 585858. Подредете го на 40 пиксела под текстовите полета и от диалоговия прозорец Стил на слоя приложете настройките за градиентно наслагване, показани по-долу:

Дублирайте слоя, променете цвета на фигурата и настройките за градиентно наслагване на # 101010 и поставете този нов ред под първия.

Изберете двата слоя и ги конвертирайте в Smart Object, като ги наименувате Сепаратор 1.

За по-дълъг хоризонтален разделител дублирайте слоя Separator 1 (щракнете с десния бутон в палитрата Layers и Duplicate Layer), преоразмерете копието до 1 x 200px, завъртете го на 90 ° (отново можете да използвате Редактиране> Път за безплатна трансформация) и дублирайте и това. По-долу можете да видите тези разделители в готовия макет. (Тук няма да навлизаме в това как да създадем текста и иконите.)

4. Проектиране на персонализиран медиен плейър

След това ще създадем персонализирана графика на медиен плейър със заоблени ъгли, както е показано по-долу:

Създайте нова група слоеве, дайте й име Играч и го поставете под Основното съдържание.

За рамката използвайте инструмента за закръглени правоъгълници. Създайте фигура с размерите 550 x 355px и # c2c2c2 Color. Наименувайте слоя Кадъри приложете следните настройки за стил на слоя:

Drop Shadow: Нормален режим на смесване, 40% непрозрачност, ъгъл 120 °, използване на глобална светлина, 1px разстояние, 3px размер
Вътрешна сянка: нормален режим на смесване, #ffffff цвят, 20% непрозрачност, ъгъл 120 °, използване на глобална светлина, разстояние 2px, размер 0px
Скос и релеф: Вътрешен стил на скосяване, плавна техника, 50% дълбочина, размер 3px, ъгъл 120 °, използване на глобална светлина, режим на подчертаване 50%
Градиентно наслагване: Режим на наслагване, 20% непрозрачност, градиент 100% непрозрачност от # 000000 до #ffffff Цвят, линеен стил, 145 ° ъгъл, 100% скала
Ход: Размер 1px, Вътрешна позиция, Нормален режим на смесване, Тип цветно запълване, Цвят # 474947

За да създадете заоблените ъгли, нарисувайте правоъгълник с размерите 26 x 28px и Color # 585858. С инструмента за директен избор (A) изберете долния десен ъгъл и го преместете към центъра на правоъгълника, за да получите триъгълна форма. Използвайте инструмента за многоъгълно ласо (L), за да изрежете мащабен триъгълник вътре в съществуващия от най-дългата му страна. Направете ширината 8px и височината 9px. (Използвайте изображението по-долу като ориентир.) Приложете същите настройки за Вътрешна сянка, Градиентно наслагване и Инсулт като за рамката.

Наименувайте слоя c1 (както в „ъгъл 1“), дублирайте го три пъти, Безплатна трансформация на всеки от дубликатите, за да се побере в различен ъгъл на рамката, и ги направете всички отрязващи маски на слоя Frame.

Създайте нов Притежател на изображение слой, като се използват същите методи като преди. Това е правоъгълник 532 x 336px, с цвят # 262726 и без стилове на слоеве. Добавете изображението, което искате да се появи в плейъра (това може да е всичко, което ви харесва: не сме предоставили такова), и го направете отрязваща маска.

В долната част на държача на изображението, над изображението, добавете правоъгълник с размерите 532 x 85px, задайте непрозрачността на 60% и назовете слоя Притежател на текст.

Напишете малко насложен текст за дъното на плейъра, като използвате Myriad Pro Bold, Sharp, 14pt. Задайте водещото на 18pt, задайте Color на # f5f5f5 и го поставете над предишния слой, центрирайки го вертикално и оставяйки ляво поле от 20px. Приложете същите настройки на Drop Shadow като тези, които използвахме за ценовия етикет.

За бутона на плейъра изберете Custom Shape Tool (U), изберете Circle Thin Frame от менюто за излитане с #ffffff Color и създайте фигура с размерите 120 x 120px. От настройката Stroke на диалога Layer Style задайте Size на 1px, Position на Outside и Color на #ffffff. Със същия инструмент изберете формата на Триъгълник (може да се наложи да щракнете върху иконата на малка стрелка вдясно от менюто за излитане и да изберете Всички, преди да можете да го видите). Използвайки същите настройки и стил на слоя като за кръга, създайте триъгълник 31 x 36px. Преобразувайте тези два слоя в интелигентен обект, центрирайте ги и наименувайте слоя Стрелка на играча.

И това е нашата персонализирана графика завършена. Забавлявайте се, изпробвайки тези техники! Тествайте и ги адаптирайте към новия си дизайн и създайте нещо невероятно.