Створюємо прайс-таблицю у Photoshop

Photoshop часто використовується для створення різної графіки та макетів веб-дизайну. У цьому уроці ми розповімо, як створити прайс-таблицю для дизайну компанії, використовуючи прості фігури та стилі шару. Давайте почнемо!

Софт: Adobe Photoshop CS6
Складність: Intermediate
Час: 1 год

Кінцевий результат

Вихідники до туторіалу

Наступний вихідник буде використовуватися для створення уроку

Почнемо зі створення нового файлу (Command/Ctrl+N) розміром 800 пікселів × 600 пікселів.

Додаємо коригуючий шар Adjustment Layer із кольором #f7f8eb, який використовуватиметься як шар фону.

Візьміть безкоштовний візерунок зі скачаного вихідного коду PSDfreemium. Двічі клацніть на коригуючому шарі Adjustment Layer, щоб додати Pattern Overlay, використовуючи завантажений шаблон.

Додаємо новий шар та заливаємо його чорним кольором. Натисніть Filter> Noise> Add Noise.

На панелі шарів встановіть режим накладання Screen.

Намалюйте прямокутник із закругленими кутами з радіусом 10 пікселів. Встановіть для заливання світло-блакитний колір без обведення.

Двічі натисніть на шарі, щоб додати шар Layer Style. Застосовуємо обведення та Inner Shadow, використовуючи наступні параметри.

Копіюємо форму і змінюємо її колір. Додаємо прямокутник до нижньої частини та встановлюємо для нього режим Subtract Тепер ми маємо поле для заголовка.

Додаємо Stroke, Inner Glow та Gradient Overlay, використовуючи наступні параметри.

Нижче ви можете побачити результат.

Додаємоназви. Використовуємо текст Drop Shadow.

Додаємо текст сірого кольору із ціною. Застосовуємо Inner Shadow та Drop Shadow, щоб додати ефект Emboss.

Нижче ви можете побачити різницю до та після додавання стилів Layer Styles.

Додати ще інформацію нижче за текст з ціною.

Дублюємо початкову таблицю та встановлюємо колір #f0f0f0. На вершину верхнього прямокутника додаємо коло та вибираємо режим Subtract.

Додати стилі шару Stroke, Inner Glow та Gradient Overlay.

У верхній частині форми додаємо новий шар і заливаємо його білим кольором. Натискаємо Command/Ctrl + Alt + G, щоб перетворити слів у відсічну маску. Під формою створіть новий шар і залийте його чорним, щоб таким чином додати тінь до форми.

Додаємо список із необхідного тексту, використовуючи інструмент Type tool.

Між кожним елементом списку додаємо лінію розміром 1 піксель.

Переконайтеся, що лінії, як і раніше, вибрані, натисніть кнопку More Options, а потім змініть опцію Stroke, вибравши пунктирну лінію.

Додаємо маску шару до шару з лініями і зафарбуйте ліві та праві краї чорним кольором, щоб створити плавний перехід.

Намалюйте прямокутник із закругленими краями із кольором #a7bed5.

Додаємо стилі шару Stroke, Inner Glow та Gradient Overlay.

Дублюємо кнопку та поміщаємо копію за оригінальним шаром. Зміщуємо копію на кілька пікселів униз.

Використовуйте ті ж стилі шару,але цього разу потрібно збільшити Gradient Overlay Opacity, щоб зробити його більш темною.

Ми також додаємо Drop Shadow додати м'які тіні навколо кнопки.

Кнопка матиме такий вигляд.

Додаємо текст із білою тінню (Drop Shadow).

Виберіть усі шари прайс-таблиці та натисніть Command/Ctrl+G, щоб об'єднати їх у групу. Дублюйте групу двічі.

Звичайно ж, ми не хочемо, щоб усі таблиці були ідентичні. Тому потрібно змінити їхній текст.

Ми хочемо виділити одну із таблиць. Розміщуємо її трохи вище за інших.

Ми також хочемо переконатися, що елементи списку все вирівнюється.

Переставляємо кнопку у відповідну позицію таблиці.

Змінюємо розміри базової форми, щоб зробити таблицю вищою.

Додайте кілька елементів списку.

Перейдіть на другу таблицю і витягніть трохи праву сторону на першу таблицю, як показано нижче.

Нижче ви можете бачити результат до та після редагування форми.

Для того, щоб додати до таблиці ефект того, що вона розміщена вище за інші, додаємо до неї тіні. Утримуючи Command/Ctrl. натискаємо на формі таблиці, щоб створити виділення.

Створіть новий шар та заповніть виділення чорним. Пом'якшити його, додавши Gaussian Blur.

Зменшіть непрозорість шару.

Створіть новий шар та намалюйте чорну лінію, використовуючи м'яку кисть.

Натисніть Command/Ctrl+T, а потім натисніть кнопку Warp. Доячи його режимувиберіть Arch.

Поверніть викривлену лінію та позначте її, як показано на скріншоті нижче.

Зменшіть його непрозорість.

До іншого боку теж додаємо тінь.

Утримуючи Command/Ctrl створіть виділення нижніх таблиць. Позначте шари з тінями у групі шарів. Натисніть кнопку Add Layer Mask, щоб додати маску до шарів групи.

Щоб створити контраст між таблицями, змінюємо колір верхньої. Змінюємо колір назви на помаранчевий. Щоб кольори нормально поєднувалися, потрібно також змінити налаштування стилів шару Layer Styles.

Змінити колір назви на білий та тінь на чорний.