Як навчитися красиво малювати починаючому дизайнерові інтер'єру.
У цьому уроці ви побачите як створюється професійний psd-макет для веб-сайту в фотошопі.
І так перейдемо до самого уроку:
Створюємо в фотошопі професійний psd-макет для веб-сайту
Матеріали для уроку:
Крок 1: Макет
Перш ніж приступити до розробки дизайну, ми повинні спланувати його зовнішній вигляд і функціональність. Потім потрібно придуману ідею макета виконати візуально, створити каркас.
Вони можуть мати більш-менш творчі завдання. Використовуючи специфікації, вони беруть на себе відповідальність за рекламні або маркетингові кампанії компанії і об'єднують необхідні засоби комунікації. Цими фахівцями керують всі етапи створення візуального, від його складу до його експлуатованої версії.
Творчість в цьому полі не має обмежень, крім того, що встановлено клієнтом або його ієрархією. Графічний дизайнер гармонізує і підкреслює повідомлення або багатомовний контент компанії, для якої він працює. Володіння графічними правилами є перевагою при створенні візуальних ефектів.
Я для відтворення первісного макета використовую тільки сірі тони. Відсутність яскравих кольорів допомагає сконцентруватися на плані в цілому, і ретельно все продумати. Це дає велику свободу дій, можна швидко змінювати і переставляти блоки місцями.
Крок 2: Налаштування Полотна
Давайте створимо дизайн разом, крок за кроком! Отже, ширина макета нехай буде в 960 пікселів. Створіть новий документ розміром 1200 х 1500 пікселів.
Тому ми не будемо перераховувати ці різні програми, які настільки ж ефективні, як і дорогі. Вони дають огляд версії для друку і пропонують оптимізувати цифрову версію. Інструментарій графічного дизайнера в галузі перекладу. Зображення витягуються з документа, переробляються на цільовому мовою і реінтегріруются в макет. Це ідеальний інструмент компонування документів. . Нарешті, через службу макетів перекладацькі агентства і їх перекладачі пропонують отримати ваші документи і візуальні зображення мовою оригіналу і відправити їх на мову перекладу.
Макет в 960 пікселів досить широкий, тому нам необхідно визначити робочу область. Натисніть комбінацію клавіш Ctrl + А, Щоб виділити весь полотно цілком.
Перейдіть в меню виділення\u003e (Select > TransformSelection). Змініть ширину виділення до 960 пікселів. Розмістіть виділення по центру полотна.
Поетапне управління проектами
Ми тісно співпрацюємо з партнерською службою для ваших інституційних документів.
Інтерв'ю з нашим менеджером графічного дизайну
В цілому, дизайнери та дизайнери вважають за краще рухатися до Креамо, більш корисним і вигідним, ніж виконавча. Які основні фактори успіху в цій професії?Флоренс: Без сумніву, що дає можливість досягти успіху в усьому світі: ви повинні бути дуже доступними для швидкого реагування на запити клієнтів, строго виконувати цю роботу і відкривати для обговорення, розуміння очікувань і пояснення, а також, можливо, обмежень кожного документа в Кожна мова.
Додайте напрямні лінії для виділеної області справа і зліва.
Тепер нам потрібно створити невеликі відступи між кордоном і змістом макета, яке ми додамо пізніше! Знову перейдіть в меню Виділення\u003e Трансформувати виділену область (Select > TransformSelection) І змініть розмір виділення до 920 пікселів в ширину. Тим самим відступ з кожної зі сторін складе по 20 пікселів.
Флоренс: Байдуже. Для яких типів проектів ви запитуєте? Флоренс: Загалом, розташування документів з однієї мови на іншу. Ви зіткнулися з будь-якими труднощами в проектах макета? Флоренс: «Так, але немає нерозв'язною труднощі». З деякими мовами легко впоратися, тому що їх поширення істотно ідентично. Коли вихідний текст є французьким, а переклад - на голландський, цільової текст довший, тому необхідно буде зіграти шрифт і розмір символів, щоб текст відображався на сторінці однаково.
Якщо так, чи приймаєте ви всі проекти, чи може мовна пара? Флоренс: Так, всі мови подбали. Все, що вам потрібно зробити, це мати правильні шрифти і знання мов, над якими ми працюємо. Тепер, коли у нас є наш ескіз під очима, ми зможемо почати нашу модель.
Додайте напрямні лінії.
Крок 3: Створення шапки макета (хедера)
Давайте створимо шапку для нашого макета! Зробимо виділення висотою в 465 пікселів
Ми почнемо з введення текстів. Виберіть текстовий інструмент на панелі інструментів. Перемістіть курсор на ліве поле. Ви помітили, що курсор змінюється, з'являється маленький трикутник. Ви можете спробувати з усіма полями, межами документа і втраченим фоном, він робить це кожен раз. Тому не потрібно плакати в очі з максимальним збільшенням, щоб спробувати зіставити кордон вашого блоку тексту з краєм. Тому почніть малювати прямокутник з лівого краю і переходите на правий край. Коли ви наближаєтеся до правильного краю, магнетизм автоматично прилипає до краю, і маленький покажчик з'являється знову на курсорі.
Залийте виділення сірим кольором і надалі використовуйте стилі шару, щоб додати кольору і градієнти. Використовуйте подібні конструкції для підтримки візуальної ієрархії макета.
Тепер додамо градієнт для нашої шапки. Двічі клацніть на піктограмі шару. Оберіть накладення Градієнта (Gradient Overlay). Створіть градієнт, використовуючи налаштування, показані на зображенні нижче. Застосуйте настройки.
Відпустіть кнопку миші, миготливий курсор з'явиться в щойно створеному прямокутнику. Вітаємо, ви простежили свій перший блок тексту !: Майстер. 
Ваш перший блок тексту! Якщо ви пропустили це і відпустили кнопку миші занадто рано, не хвилюйтеся. Виберіть блок і використовуйте один з маленьких квадратів, розташованих у кутах текстового блоку, щоб змінити його розмір до кордонів полів. Знову ж таки, ви помітите магнетизм, який дозволить вам зробити прямокутник точно збігається з полями, не замислюючись.
Градієнт повинен виглядати наступним чином.
Далі потрібно додати світла пляма в шапку. Створіть новий шар, натиснувши комбінацію клавіш Ctrl + Alt + Shift + N. Візьміть м'яку кисть діаметром 600 пікселів. встановіть колір # 19535a для кисті. І просто один раз натисніть на центр верхньої частини шапки.
Якщо миготливий курсор все ще видно, ви можете ввести текст безпосередньо, в іншому випадку за допомогою інструменту виділення двічі клацніть всередині текстового блоку, щоб зробити його знову доступним для редагування. Не турбуйтеся про розмір тексту та шрифту.
Попутно ви, мабуть, помітили, що в міру наближення до розміру першого блоку тексту магнетизм приводить вас до точного розміру цього блоку, а подвійна зелена стрілка говорить вам, наскільки далека від того, ширина або висота два. 
Подвійні зелені стрілки показують, що ширина і висота нового блоку рівні розмірам першого блоку. Саме ці дрібниці допомагають і полегшують вам життя.
Створіть зверху виділену область висотою в 110 пікселів.
натисніть Delete, Щоб видалити виділену частину. У вас повинно вийти так само, як на зображенні нижче.
Створіть останній блок тексту в два рази вище, ніж попередні, а також набагато ширше. Якщо ваш текстовий блок занадто малий, щоб утримувати введений текст, ви побачите червоний символ, який означає, що є прихований текст. Текстовий блок занадто малий. Вам потрібно буде збільшити текстовий блок, щоб переглянути весь текст. Ця помилка також сигнализируется в нижній частині робочої області червоним світлом.
Форматування текстових блоків
Правильно, коли щось не так. Якщо ви двічі клацніть по червоному світлі, відкриється вікно, в якому пояснюється помилку. 
Ось що ви повинні в значній мірі мати. 
Ми почнемо з застосування правильного шрифту до наших текстових блоків. Візьміть інструмент виділення і намалюйте прямокутник навколо всіх текстових блоків, щоб вибрати все відразу.
Стисніть світла пляма по вертикалі, натиснувши комбінацію клавіш Ctrl + T.
Тепер нам потрібно переконатися в тому, що світла пляма ідеально центрировано в шапці макета. Виділіть шар з плямою і натисніть клавішу " V"Для перемикання на інструмент переміщення (Move Tool). на ( Options) натисніть кнопку ( Align Horizontal Centers).
Коли це буде зроблено, виберіть текстовий інструмент. Зліва від панелі налаштувань ви можете побачити ім'я поточного шрифту. Діюча поліція. Ви також можете побачити під ім'ям шрифту поточний шрифт, правий, розмір символу і ведучий. Тепер, коли шрифт однаковий для всіх блоків, ми будемо відформатувати кожен блок.
Виберіть із списку шрифт «жирний» замість «звичайний». Ми також змінимо розмір тексту. Блок імені контакту залишається таким, яким він є. Для функції ми помістимо розмір тексту в 8 пт і легкий шрифт. Відкрийте палітру «Символ». Ви можете включити його в свій бар, ми будемо часто його використовувати.
Створіть новий шар, За допомогою інструменту олівець(Pencil Tool) Намалюйте горизонтальну лінію товщиною в 1 піксель і кольором # 01bfd2.
Тепер сховаємо краю лінії за допомогою маски градієнта. Виберіть інструмент градієнт (Gradient Tool), На панелі управління обраним інструментом (Options) Оберіть редактор градієнтів і створіть градієнт як показано на зображенні нижче.
Встановіть підхід до 100, ви відразу побачите ефект. 
Модифікація текстового підходу Блок координат буде змінений на світлий, з розміром тексту 6 пунктів. Тепер ви бачите, що блоки занадто великі. Ви також можете двічі клацнути по будь-якому кутку текстового блоку.
Повторіть все блоки. 
Тому текст повинен бути вирівняний вправо. Це не є незручним для блоків, які мають тільки один рядок, але для блоку координат це важливо. Щоб вирівняти текст вправо, виберіть блок і відкрийте палітру «Абзац». 
Палітра абзаців. Потім натисніть кнопку, оточену червоним кольором, що призведе до вирівнювання тексту вправо.
Застосуйте створений градієнт.
Крок 4: Створення текстури шаблону
Тепер створимо простий шаблон текстури і застосуємо його до шапки. Візьміть інструмент олівець (Pencil Tool), Встановіть розмір кисті в 2 пікселя і додати дві точки, які торкаються один одного кутами. Вимкніть фон і виділіть точки. Виберіть пункт меню Редагування\u003e Визначити візерунок (Edit\u003e Define Pattern).
Потім перемістіть координатний блок, щоб вирівняти його з правим краєм, а нижнє поле - між двома рядками тексту. 
Дві подвійні стрілки, що символізують середину. Це означає, що середина виділення знаходиться точно в середині між блоками імен компаній і координатним блоком.
Наші тексти розміщені на нашій візитній картці. Ви вже можете переглянути, як він буде виглядати. Ми могли майже залишити цю картку. Але ви побачите, що невеликі деталі, які ми додамо, дійсно змінять вплив візитної картки. Бажано, щоб він був приклеєний до краю, щоб уникнути проблем під час різання, він буде виступати на дно. Простіше зробити це в цьому сенсі, щоб використовувати магнетизм краю з одного боку і втрачене дно іншого.
Створіть новий шар і помістіть його під виділений шар. Виділіть область, до якої ми хочемо застосувати текстуру. натисніть Shift + F5, Щоб завантажити текстуру. Заповніть діалогове вікно. Виберіть текстуру, яку тільки що створили, натисніть ОК.
Змінити колір шрифту
Заповніть блок чорним. Щойно створений блок поміщається перед текстом. Тепер ми бачимо схему текстового блоку над чорним блоком. 
Текстовий блок тепер знаходиться над чорним блоком. За допомогою інструменту виділення виберіть текстовий блок і двічі клацніть його, щоб зробити його редагується.
Подивіться на верхню частину палітри, а не на квадрати. Це означає, що текст обраний, і що це його колір, який ми змінимо. Ви також можете змінити колір контуру тексту за допомогою. Коли ви вибираєте повний текстовий блок, ви можете вибрати, чи хочете ви змінити колір самого блоку або текст в блоці за допомогою цих двох кнопок.
Виділення заповнилося текстурою. Наблизьте зображення, щоб розглянути ближче.
Змішування текстури плавно переходить в шапці. Додайте маску шару до шару з текстурою. Візьміть кисть з великою м'якістю. Виберіть білий ( #FFFFFF) Колір для кисті. зменшіть непрозорість (Opacity) Кисті до 60% і малюйте. Якщо ви занадто сильно завдасте фарбу, то потім можна буде налаштувати прозорість шару окремо.
Розташований у верхній частині палітри «Зразки». На даний момент вибраний колір є чорним. 
Щоб відокремити елементи в координатах, було б непогано покласти маленький чорний квадрат. Наприклад, між факсимільними і телефонними номерами. 
Потім двічі клацніть в блоці координат, щоб відредагувати його. Якщо вам потрібно додати або видалити текст, він буде переміщатися разом з іншою частиною тексту.
Прекрасно вийшло.
Крок 5: Додавання логотипу
Створення фону шапки більшою мірою завершено. Тепер додамо логотип. Але перед цим в те місце, де він буде знаходитися, додамо невелику світле плямочка. Візьміть м'яку кисть, встановіть колір # 19535a. Додайте світла пляма.
Додамо текст логотипу. Я використовував шрифт "Bebas Font". Завантажити його можна абсолютно безкоштовно.
Додамо деякі ефекти до логотипу. Дивіться зображення нижче.
Крок 6: Навігація
Створіть навігаційні кнопки. використовуйте інструмент прямокутник (Rectangular Marquee Tool). Заповніть будь-яким кольором. Далі зробимо нижню частину прямокутника повністю прозорою.
Двічі клацніть на піктограмі шару, виберіть накладення градієнта (Gradient Overlay). Використовуйте налаштування, показані на зображенні нижче.
Крок 7: Контент-слайдер
Створіть виділення розміром в 580 х 295 пікселів.
Залийте виділену область сірим кольором.
Відкрийте зображення, яке ви хочете використовувати. Додайте його в шар, який ми створили вище.
Тепер додамо ефект тіні під слайдер. Створіть новий шар. Виберіть інструмент Пензлик (Brush Tool), Встановіть діаметр до 400 пікселів. Відкрийте палітру кистей (Brushes palette), І в ній використовуйте наступні настройки.
Встановіть колір кисті #000000 і намалюйте їй в потрібному місці.
застосуйте фільтр Розмиття по гаусу (Gaussian Blur), Щоб пом'якшити краю.
Виділіть нижню половину тіні і видаліть її.
Помістіть тінь трохи вище слайдера з середини.
Зменшіть її по вертикалі. Далі необхідно центрувати тінь зі слайдером. Виберіть обидва шари і на панелі управління обраним інструментом (Options) Натисніть на кнопку За центрами по горизонталі (Align Horizontal Centers).
Зробіть дублікат шару з тінню і розгорніть його вертикально. Помістіть його на нижній край слайдера.
встановіть непрозорість (Opacity) Кнопки в 50%.
Виберіть інструмент довільна фігура (Auto shapes) І на панелі управління обраним інструментом (Options) Виберіть стрілку. Додайте її в кнопки.
Додаємо смужку в нижній частині слайдера. Заливаємо її чорним кольором ( #000000 ).
робимо непрозорість (Opacity) Смужки в 50%.
Тут ми можемо додати опис картинки.
Крок 8: Додавання опису
Тепер додамо вітання та короткий опис сайту.
Крок 9: Закінчуємо з шапкою
Ми майже закінчили шапку. Давайте додамо тонкий ефект тіні щоб завершити шапку! Створіть тінь так само, як ми створювали її раніше для слайдера, використовуючи інструмент Пензлик (Brush Tool).
Залиште розрив в 1 піксель між шапкою і тінню.
Крок 10: Створення градієнта для фону
Створіть градієнт від світло-сірого до білого кольору.
Створіть новий шар нижче шапки і застосуєте градієнт.
Крок 11: Додавання елементів керування обертанням слайдера
Створіть елементи слайдера.
Щоб вказати поточний активний елемент управління в слайдері застосуєте до нього внутрішню тінь (Inner Shadow).
Крок 12: Створення роздільник
Виберіть інструмент олівець (Pencil Tool) І намалюйте лінію в 1 піксель. Колір візьміть світло-сірий ( #aaaaaa).
Сховайте краю лінії використовуючи градієнт маски.
Крок 13: Додавання основного вмісту
Настав момент створити основну частину макета, місце для контенту. Нам потрібно створити три рівних стовпці з невеликими відступами між ними. Я зробив простий розрахунок і розділив наявний простір на 3 рівні частини за допомогою прямокутників і відступом між ними в 25 пікселів.
Додайте напрямні лінії для стовпців. Потім приберіть прямокутники. У вас залишаться просто стовпці.
Додайте послуги, які буде надавати майбутній сайт. Підберіть іконки з набору функціональних значків. Додайте текст.
Тепер створимо просту кнопку "Подробнее". Виберіть інструмент Прямокутник з округленими кутами (Rounded Rectangle Tool). Намалюйте кнопку на новому шарі.
Нанесіть на кнопку градієнт і зробіть обведення.
Дублюйте кнопку.
Додамо ще деякі функціональні елементи. Я намалював три прямокутника для зображень і зробив обведення в 3 пікселі.
Додайте кліпи зображень в прямокутники.
Під кожним зображенням зробіть тінь, як ми це робили для слайдера.
Додайте трохи описів до картинок.
Давайте створимо іконку для твіттера. Знайдіть значок синьої пташки.
Додайте анонс для твіттера.
Створимо кнопку для прочитання повного твітти.
Застосуйте стилі, показані на зображенні нижче.
Додайте текст на кнопку.
Крок 14: Створення підвалу і заключні штрихи
Виділіть область для футера і залийте її сірим кольором.
перейдіть в накладення кольору (Color Overlay) І змініть колір.
Preview of Final Results
Автор уроку: Nikola Lazarevic
Перекладач уроку: Ірина Шипілова
При створенні сайту виникає питання як саме буде виглядати ваш сайт, точніше як саме має воно виглядати. Помилкою багатьох початківців веб-дизайнерів є таке поняття як «потужна графіка», тобто таке поняття чим більше графіки тим краще. На одній графіку не зупиняються підключають всякі jQuery і Ajax бібліотеки. Навантаженість такої графіки погано позначається на ваш сайт, сторінки вантажаться довго що призводить до втрати відвідувача ще і пошуковики теж недолюблюють такі сайти. Повернемося до макету сайту.
макет- це розмітка документа, що характеризує його структуру, тобто скелет дизайну сайту. Ще простіше кажучи це те як буде виглядає ваш сайт.
Типи макетів:
- гумовий - ширина такого макета залежить від ширини вікна браузера. Є кілька способів зробити його: всі структурні елементи задати у відсотках або задати бічним колонкам фіксовані ширини, а центральна частина буде роз'їжджатися. Такий макет дозволяє використовувати більше простору. Використовувати його можна для створення сайтів з великою кількістю специфічної інформації, що вимагає багато місця, для розміщення великих таблиць з даними, для сторінок з двома бічними колонками і так далі. Для моніторів з великою роздільною здатністю можна встановити максимально можливу ширину, щоб «сильно не роз'їжджатися», якщо ви використовуєте гумовий макет для невеликого контенту.
- адаптивний - такі макети більш універсальні через свою адаптації під будь-який дозвіл монітора, в тому числі і мобільних пристроїв. Адаптивним може бути будь-який з розглянутих макетів.
- фіксований - задається певна ширина зазвичай 960-1000 пікселів (приклад). Ширина макета ні від чого не залежить, нічого не роз'їжджається. На всіх дозволах виглядає однаково, простий у верстці, дотримується правильна типографіка. До недоліків можна віднести те, що на моніторах з широким дозволом сайт буде візуально виглядати вузьким, в поширеному варіанті верстки не підганяє під мобільні пристрої, картинки і таблиці обмежених розмірів. Для адаптації такого макета під всі дозволи варто спиратися на максимальну ширину всіх елементів, певні скрипти і плагіни. Через це дуже складно верстати такий макет під IE6 та IE7.
- еластичний - при такому макеті дизайн зменшується або збільшується пропорційно. Через те, що всі величини задаються не px (пікселях), а в em (відносна одиниця), дизайн збільшується або зменшується в залежності від дозволу так, як якщо б ви затиснули Ctrl і покрутили коліщатко мишки.
Знаючи про типах макетів, наступним кроком буде вибір того чи іншого варіанту. Для цього, перш за все, потрібно знати про майбутню аудиторії вашого сайту, статистики дозволів моніторів.
Дозволи моніторів:
За даними GoStats ми маємо таке положення справ.