Дуже простий і стриманий дизайн із яким впорається навіть студент.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image665.jpg)
Створюємо новий документ 760x770 px із сірим тлом(#464646). Створюємо новий шар(SHIFT+CTR+ALT+N). Вибираємо інструмент Rounded Rectangle і малюємо білий прямокутник(радіус 10 px). Наступна картинка зменшена.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image666.jpg)
Додаємо стиль шару:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image667.jpg)
З тим же інструментом створюємо інший прямокутник.Я буду використовувати ясно-сірий цвіт(щоб вам було видно)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image668.jpg)
Додаємо стилі шару:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image669.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image670.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image671.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image672.jpg)
Результат
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image673.jpg)
Тепер створюємо ще три прямокутники й поміщаємо їх як на малюнку.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image674.jpg)
Як ви бачите, використані попередні стилі шару. Затисніть CTRL і натисніть на іконку шару, позначеного стрілкою:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image675.jpg)
Так ви виділили прямокутник.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image676.jpg)
Вибираємо інструмент Rectangular Marquee. Натискаємо на Subtract From Selection і видаляємо нижню частину виділення.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image677.jpg)
Коли ви відпустите кнопку миші ви побачите таке виділення:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image678.jpg)
Зменшуємо виділену область - Select > Modify > Contract і вибираємо Contract by 2 pixels. Створюємо новий шар(CTRL+SHIFT+ALT+N). Заливаємо виділення білим цвітом з інструментом Paint bucket. Тиснемо CTRL+D щоб зняти виділення.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image679.jpg)
Додаємо стиль шару:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image669.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image670.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image680.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image681.jpg)
Результат
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image682.jpg)
Тепер дублюємо цей шар два рази й поміщаємо його на інші прямокутники.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image683.jpg)
Створюємо заготівлю заливання. Створюємо новий документ 3 на 3 пикселя.Збільшуємо масштаб до 1600%. Малюємо крапку розміром в 1 пиксель у центрі документа.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image684.jpg)
Зберігаємо шаблон заливання Edit > Define Pattern. Вертаємося у вихідний документ. Створюємо новий шар(CTRL+SHIFT+ALT+N). Вибираємо інструмент Rectangular Marquee із цими настроюваннями:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image685.jpg)
І створюємо маленьке виділення:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image686.jpg)
Вибираємо інструмент Paint Bucket(вибираємо нашу заготівлю шаблона заливання) і клацаємо усередині виділення. Тиснемо CTRL+D щоб зняти виділення.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image687.jpg)
Дублюємо шар кілька разів.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image688.jpg)
Створюємо новий шар(CTRL+SHIFT+ALT+N). За допомогою інструмента Rectangular Marquee робимо вертикальне виділення:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image689.jpg)
Заливаємо його крапковим заливанням. Тиснемо CTRL+D щоб зняти виділення.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image690.jpg)
Також додаємо ще крапкових ліній, помістите їх як вам треба. Результат:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image691.jpg)
Додаємо кола:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image692.jpg)
і стилі шару
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image693.jpg)
Отдублируем кружечки:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image694.jpg)
Ви можете додати ще кружків і помістити їх на ваше бажання.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image695.jpg)
Додаємо ще прямокутник:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image696.jpg)
Міняємо настроювання Fill на 0%.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image697.jpg)
Додаємо стиль шару
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image698.jpg)
Результат:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image699.jpg)
Дублюємо цю фігуру й застосовуємо стилі шару:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image700.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image701.jpg)
Додаємо своє фото:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image702.jpg)
Тепер додаємо текст і все готово:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image703.jpg)
Джерело: photoweb.com.ua
Малюємо стильний логотип
У цьому уроці вчимося малювати стильний логотип.
Як і говориться в заголовку цей урок крок за кроком навчить вас створювати за допомогою Фотошопа стильні логотипи, на зразок цього:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image704.jpg)
Крок 1. Відкриваємо Photoshop і створюємо зображення 300x300 пикселей. Цвіт заднього тла не має значення.
Крок 2. Створюємо новий шар (Shift+Ctrl+N) і вибираємо інструмент виділення Marquee Tool (M). Затискаємо Shift для створення ідеального кола, і малюємо.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image705.jpg)
Вибираємо інструмент заливання Bucket Tool (G) і заливаємо коло усередині. Цвіт не має значення.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image706.jpg)
Натискаємо Ctrl+D для зняття виділення.
Крок 3. Вибираємо Layer > Layer Style > Blending Options. Установлюємо всі параметри як на скриншотах:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image707.jpg)
Drop Shadow
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image708.jpg)
Inner Shadow
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image709.jpg)
Inner Glow
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image710.jpg)
Bevel and Emboss
Highlight Mode Colour = Black Shadow Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image711.jpg)
Satin
Blend Mode Colour = FFC600
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image712.jpg)
Gradient Overlay
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image713.jpg)
Натискаємо ОК, і наша сфера повинна виглядати приблизно як ця:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image714.jpg)
Крок 4. Цей крок навчить малювати об'єкт на вершині сфери. Затискаємо Ctrl і клацаємо мишкою по шарі зі сферою:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image715.jpg)
у Вас повинне з'явитися виділення навколо вашої сфери:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image716.jpg)
Виберіть Eleptical marquee tool (М), затисніть Alt і малюйте коло усередині виділення. Переконаєтеся, що ці два кола перетинаються в одній крапці як на малюнку:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image717.jpg)
Намальована область вичтется з колишнього виділення й вийде така фігура:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image718.jpg)
Створюємо новий шар (Shift+Ctrl+N) поверх шару зі сферою. Вибираємо інструмент заливання Bucket Tool (G) і заливаємо наше виділення (Цвіт = #47515B)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image719.jpg)
Після цього знімемо виділення Ctrl+D.
Крок 5. У цьому кроці ми будемо створювати текстуру для виділення, що вийшло. У верхньому меню вибираємо Layer > Layer Style > Blending Options. Вибираємо Drop Shadow. Установлюємо цвіт Blend Mode = білий, і все інше:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image720.jpg)
Inner Shadow
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image721.jpg)
Inner Glow
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image722.jpg)
Bevel and Emboss
Blend Mode Colour = Black
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image723.jpg)
Тепер ми повинні встановити зразок Gloss Contour як на малюнку:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image724.jpg)
Gradient Overlay
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image725.jpg)
Pattern Overlay
Виберіть Світлий Мармур
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image726.jpg)
Підтверджуємо настроювання, натискаючи ОК. Тепер у Вас повинна бути сфера, приблизно як на малюнку:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image727.jpg)
Крок 6
Текст. Для цього лого я використовував шрифт Space Age розміром 18px, але ви можете використовувати будь-який понравившийся вам. Потім, на окремому шарі я просто надрукував кілька крапок із пробілами між ними.
У підсумку вийшло це:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image728.jpg)
Крок 7. Завершальний крок. Створимо логотипу легке відбиття для більше стильного виду. Створюємо новий шар. Вибираємо Eliptical Marquee Tool (M) і малюємо овал:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image729.jpg)
Вибираємо Gradient fill tool. Зверху ви повинні бачити цей інструмент:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image730.jpg)
Натисніть, куди вказує червона стрілка. Відкриється це вікно:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image731.jpg)
Кликніть на кожній маленькому ползуке, на який указує синя стрілка й виставте білий цвіт Потім кликніть на повзунка, на який указує червона стрілка й виставте прозорість на 0. Інструментом Gradient tool (кликаем і розтягуємо вертикально) ви можете намалювати скляне відбиття на свій смак:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image732.jpg)
Тепер установите рівень непрозорості шару на 57%
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image733.jpg)
Тепер створюємо новий шар і малюємо інший овал за допомогою інструмента виділення (Eliptical Marquee Tool). Але цього разу зробіть його менше:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image734.jpg)
І повторюємо крок з нанесенням градієнта. У підсумку одержуємо:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image704.jpg)
Джерело: photoweb.com.ua
Кнопка відправлення листа
У цьому Фотошоп-уроці ми будемо малювати кнопочку для розміщення її на сайті під формою зворотного зв'язку. Іншими словами кнопка "Відправити лист".
Створіть новий документ розмірами 281 x 129 px і залийте його 6aa3cf цвітом. Двічі клацніть по шарі й натисніть ОК.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image735.jpg)
Потім, завантажите текстуру.
У палітрі шарів знайдіть от таку кнопку /, клацніть по ній і виберіть стиль "Накладення градієнта". Установите такі ж настроювання:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image736.jpg)
Ще один додамо стиль за назвою "Перекриття візерунка/ Накладення текстури":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image737.jpg)
От що у вас повинне вийти.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image738.jpg)
Візьміть фігуру /. Установите радіус скругления кута на 5 px, цвіт - 2a425f і намалюйте основу для кнопки, як показано нижче.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image739.jpg)
Додамо стилі до кнопки.
Перший з них - це "Тінь" (режим - Множення)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image740.jpg)
"Внутрішнє світіння" (режим - Посвітління основи):
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image741.jpg)
"Накладення цвіту":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image742.jpg)
"Накладення градієнта":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image743.jpg)
"Обведений":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image744.jpg)
Результат після застосування всіх стилів:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image745.jpg)
Візьміть інструмент /- довільна фігура (Custom Shape Tool), нагорі в настроюваннях виберіть форму конверта.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image746.jpg)
Установите як основний цвіт a1c9f7 і намалюйте конвертик на кнопці.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image747.jpg)
Додамо стиль: "Зовнішнє світіння"
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image748.jpg)
І "Внутрішнє світіння":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image749.jpg)
У підсумку...
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image750.jpg)
Напишемо текст. Установите такі настроювання в палітрі "Символ":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image751.jpg)
Напишіть на кнопці "Відправити нам лист" або щось інше.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image752.jpg)
Додайте "Тінь":
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image753.jpg)
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image754.jpg)
Тепер намалюємо відблиск. Візьміть Перо /і намалюйте білим цвітом фігуру як показано нижче:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image755.jpg)
Затискаємо "Ctrl" кликнемо по шарі із кнопкою - завантажиться виділення. Переходимо в меню Виділення - Інвертувати ("Selection"- "Inverse") або просто натискаємо Shift + Ctrl + I. Поверніться до шарів, кликніть правою кнопкою по шарі з білою фігурою виберіть команду "Растрировать шар" (rasterize), а тепер вам залишилося нажати на клавішу "Delete".
Зменшите прозорість шару з відблиском до 40%.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image756.gif)
ГОТОВО!
Джерело: photoweb.com.ua
Смарагдова кнопка
У цьому Фотошоп уроці будемо робити смарагдову кнопочку для сайту.
1) Створіть новий документ 300?150 px із чорним тлом
2) Створіть новий шар. Візьміть інструмент /, намалюйте прямокутне виділення й залийте його будь-яким цвітом, наприклад, білим.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image757.jpg)
3) Натисніть на кнопочкувнизу палітри шарів і виберіть там наступні стилі:
Тиснення:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image758.jpg)
Накладення градієнта:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image759.jpg)
Цвіту градієнта: від 0a521d до 2ac553
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image760.jpg)
Ви одержите такий результат:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image761.jpg)
4) Тепер будемо малювати рамку. Створіть новий шар.
5) Снову за допомогою виділення намалюйте прямокутник, але ледве більше зеленого. Розмістите так, щоб краю однаково виступали з усіх боків.
6) Залийте виділення білим цвітом.
7) Ctrl + клич по шарі із зеленою кнопкою, з'явиться виділення.
8) Тепер перейдіть на шар з білим прямокутником і натисніть DELETE. Тепер у нас є рамочка, якою залишилося тільки додати стилі.
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image762.jpg)
9) Додаємо стилі:
Зовнішнє світіння
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image763.jpg)
Тиснення:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image764.jpg)
Накладення градієнта:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image765.jpg)
Цвіту градієнта: #598e67- #ffffff
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image766.jpg)
Обведений цвіту # 5e6270
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image767.jpg)
У результаті:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image768.jpg)
10) Створіть новий шар для відблиску на кнопці.
11) Виберіть иструмент /і намалюйте форму схожу на цю:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image769.jpg)
12) Клич правою кнопкою по шарі в палітрі шарів - виберіть команду Rasterize Layer (Растрировать шар).
13) Далі в меню Filter > Blur > Gaussian Blur (Фільтр - Размитие - Размитие по Гауссу). Установите такий радіус як вам подобається, тут 3,0 px
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image770.jpg)
От такий з'явився відблиск:
![](https://konspekta.net/infopediasu/baza12/3223717595353.files/image771.jpg)
14) У висновку, додайте який-небудь текст кнопці.