Уроки Photoshop: Проектуємо сайт від початку до кінця, Програми для роботи з графікою, Програмні керівництва, статті

Цей урок про те, як створити професійний веб-дизайн. Спроектувати свій сайт правильно, від початку до кінця, гармонійно розташувати всі елементи, підібрати кольори і відтінки.

Крок 1. 960 Grid System

Відвідавши сайт 900.gs.. Це система сіток і напрямних, за допомогою неї, ми зможемо з точністю і правильно розташувати наші об’єкти на полотні, і на рівній відстані один від одного.
скачати сітчастий шаблон
Як тільки ви скачаєте файл, розархівуйте його і відкрийте файл “960_grid_12_col.psd”. , Можете знайти його тут 960_download> Templates> Photoshop. Це прекрасна правильна сітка.

Відкривши сітку ви побачите точні розміри пікселя на сітці, з 60px широкими колонами і 10px по обидва боки (і 20px між колонами). Якщо не бачите напрямних можете натиснути Ctrl + R.

Як тільки ми будемо починати працювати, вони будуть нам дуже заважатиме, тому можна буде їх вимкнути View> Extras, або просто натиснути Ctrl + H.

Розширимо полотно (Command + Alt + C) від 1400px до 1340px. Залишаємо фоновий шар, інше можна видалити, подвійним клацанням по фонового шару, щоб розблокувати його, і назвемо його “BG.”

Збережемо цей файл (Command + S), під ім’ям “my_web_tut01.psd”, і в папку “my web tut”. Можете зберігати безліч копії, з різною кількістю колонок.

Проектуємо сайт від початку до кінця *


Крок 2. Працюємо з Grid Part I

Ми маємо полотно, тепер нам потрібно зробити в фоном режимі поверх сітку.
Перетягніть напрямну з лінійки до 120px – це буде нижня межа заголовка простору.
І ще дві напрямних з лінійки 130px і 140px. Ширина простору між заголовками і змістом, як між колонками!

Використовуємо the Rectangle Tool (U), щоб намалювати прямокутник в області заголовка. Колір чорний, натиснемо D щоб скинути кольору напевно. Малюємо прямокутник, як показано нижче, і називаємо його “Header BG.”

Проектуємо сайт від початку до кінця *


Крок 3. Працюємо Grid Part II

Настав час почати блокувати сітку. Конструкція складається з трьох колонок:
ліва охоплює – три стовпці
середина – сім стовпця
права – два стовпці

Пересування об’єктів здійснюється Shift + і стрілочки або Move Tool (V). Кожен шар вибраний буде рухатися на 10px.

У конструкції будуть присутні закруглені кути у основних форм і блоків.
Не забуваємо що шрифти, градієнти, кольори теж відіграють важливу роль.
Є багато сайтів які не використовують закруглені кути. Погляньте на Psdtuts +, кожен куточок різкий і чіткий і прямий.
Додаткові матеріали можна знайти тут і тут.

Виберемо Rounded Corners Tool і поставимо радіус закруглення кутів на 8px. Малюємо бокси на правій і лівій колонці зверху.

Проектуємо сайт від початку до кінця *



Крок 4. Друкарня


Працюємо з текстом, розміщуємо в середині. Використовуємо шрифт Rockwell або інший slab-serif з 40pt з 48pt (ведуча висота лінії).
Додамо інший текст дивимося нижче, і ставимо Verdana на 12pt з 20pt (провідною лінією).
Також додамо пару заголовків, Verdana Bold на 17pt з 30pt (провідною лінією).
Тепер коли ми маємо специфіку, можна поговорити про друкарню. Одне загальне правило яке дотримуються всі веб співтовариства в світі, це використання двох шрифтової системи на сайті.
Наші шрифти: Rockwell і Verdana
Тому всі написи зі шрифтом Rockwell повинні будуть бути представлені зображеннями, якщо сайт буде в стандартах XHTML / CSS.

Це означає дві речі, завантаженість низька, і безпека шрифтів.
І друге, до тексту можна додавати тіні і стилі та ефекти.

Існує одне останнє, яке може або не може поширюватися на ваш дизайн і це з урахуванням будь-яких майбутніх Search Engine Optimization (SEO).
Всі тексти які будуть картинками, не буду скановані Google ботами.

Наступним пунктом в друкарні, а також веб-дизайну в цілому, є послідовність, узгодженість. Якщо ви використовуєте шрифт Rockwell на кнопку, використовуйте його для всіх кнопок! Якщо ви зробите деякі посилання рожевими, всі посилання рожеві і повинні бути.

На сайті ilovetypography.com припустимо що ваша лінія висоти повинна бути не менше 140% від розміру шрифту. Крім того, ви повинні знати, що текст в районі 600px представляє собою навантаження на очі, але якщо ви збираєтеся піти широким способом було б непогано збільшити висоту рядка пропорційно.
Принципи початковій друкарні – тут

Проектуємо сайт від початку до кінця *



Крок 5. Кольори


Чорно білі кольори це скукота (((Кольори цього шаблону надихнули нас Hash One WordPress theme

Я покажу вам як створити палітру кольорів. Виберіть rectangle tool, і малюйте рівні квадрати невеликі, і заповнюйте їх квітами які будите використовувати.
Колірну композицію можна підібрати тут а також відповідність всіх відтінків.
Кольори шаблону нашого:

* Dark Grays are #090909, #232323, and #4f4f4f
* Pinks are #f35455, #ff7c7d, and #ffb9ba
* Cyans are #49afe9 and #67c8ff
* Light Grays are #afe2ff, #a8bdc4, and #eaf0f1

Прибираємо ніші прямокутники в папку, і називаємо її “SWATCHES”. Створюємо папки “HEADER”, “LEFT SIDEBAR”, “Main Content” і “RIGHT SIDEBAR”. Клацніть по іконці, щоб надати їй відмітний колір. (Це знадобитися надалі, розподіліть кольору як нижче.)

Проектуємо сайт від початку до кінця *


Крок 6. Градієнти Part I.

Градієнти можуть набагато покращити дизайн сайту, сайт не буде плоским, скажімо так додамо йому “вебдванольності”, як зараз можна це говорити.



Двічі клацаємо по “Header BG”, і вибираємо Gradient Overlay. Відкриваємо Gradient Editor. Видалимо стандартні swatches, крім перших двох – фону і переднього плану для прозорою.
Тепер створюємо градієнт від темного сірого до середини сірого і натисніть New щоб додати його до Presets.
Продовжуємо також, поки не отримаємо вісім нових кольорів. Потім зберігаємо пресет, в папку “Assets.”
Розміщуємо в кореневий каталог для даного проекту.
Для “Headers BG”, використовуємо градієнт в середині, темно-сірих відтінків.

Проектуємо сайт від початку до кінця *


Крок 7. Градієнти Part II.

Для “BG” шару, знадобитися створити кілька складніших градієнтів.
Буде фактично два градієнта в “BG” градієнті.
Зауважте, невелика частина градієнта, буде мати той же колір? Це буде колір фону вашого HTML файл і дозволить веб-сторінці, градієнту вгорі знаходиться вгорі а градієнту внизу перебувати внизу.

Проектуємо сайт від початку до кінця *


Крок 8. Працюємо з Illustrator Part I

Будемо створювати різні елементи і лого.
Відкриваємо новий файл в Illustrator (у реальних проектах не починайте дизайн поки не має логотип, і подання про фірму). У лого можете використовувати і третій шрифт, але тут використовуємо Rockwell. Зберігаємо в папку “Assets”, там де і градієнт.
Перетягуємо в Photoshop, просто виділяємо весь логотип в Illustrator, і тягнемо його в Photoshop, він переміститься як Смарт-об’єкт (який можна буде в разі чого відредагувати в Illustrator).
Створимо папку “Logo”, і помістимо його туди.
І розмістимо всередині папки “HEADERS”.
Ми можемо змінювати об’єкт Transform Tool (Command + T) вільно без втрати якості.

Проектуємо сайт від початку до кінця *


Крок 9. Ефекти

Після розміщення логотипу, нам потрібно застосувати до нього стиль.
Додамо тінь. Поставимо режим змішування на Multiply – 100%. Будьте впевнені що використовуєте Global Light і поставте 120 degrees, з 1px distance, 0% spread, і 1px size. Включено Global Light. І пам’ятайте – послідовність, узгодженість, послідовність!
Затримавши Alt і перетягнувши шар, ми можемо перетягнути його з темі ж стилями.
Або зазвичай скопіювати стилі, і вставити або застосувати до іншого шару.

Проектуємо сайт від початку до кінця *


Крок 10. Графіка

Виберіть “Header BG” шар. Відкрийте ефекти і додайте 1px чорні кордону, режим встановлений на Inside. Далі, надати йому зовнішній Glow, режим змішування Multiply, Opacity -40%, Color – black, і Size 9px.
Повернемося в Illustrator, і створимо творчу форму, яка буде використовуватися для заднього фону.
Перетягнемо в ФШ, режим змішування на Screen і Opacity – 2-10%.
Створюємо чорний круг за допомогою Ellipse Tool, відкриваємо ефекти шару і додаємо білу кордон. Закриваємо ефекти, і ставимо режим змішування на Screen, міняйте ширину кордону, редагував ефекти шару.
Витратьте час і поекспериментуйте з різними прозорості та композиціями!

Проектуємо сайт від початку до кінця *


Крок 11. Маски

Виберемо всі форми і помістимо їх в папку вище шару “Header BG”. Ctrl + клік на векторну маску (сірого боксу) “Header BG” побачите вибраний заголовок на полотні. Тепер, виберіть папку, яку ви тільки що створили і натисніть на маленьку кнопку в нижній частині вікна шарів званих “Add Layer Mask”

Розглянемо, що ми зібрали прості фігури в один шар, і видалили з області наклеювання. Але потім ви хотіли б змінити деякі частини зі складу або межі на одному з кіл – маски шарів дозволяють повернутися, і вносити зміни.

Проектуємо сайт від початку до кінця *


Крок 12. Графіка Part I

У мене немає майже досвіду в брендінгу. Але я спробую пояснити вам на словах що це таке.
Бренд це все про компанії, про те що споживач відчуває – це емоції, спогади, звуки, фарби, досвід і т.д.
Але, ви не можете побудувати бренд, ви можете допомогти йому розвиватися у вигляді споживачів шляхом постійного надання візуального виду компанії.
Подивимося і згадаємо що нам говорили про цю компанію, він хотів зробити кольору грайливими та веселими, але сітка, дає сама собою серйозність і професіоналізм.
Звичайно, ні, кожна компанія повинна бути унікальною, і кожен сайт мати диференційовану ауру.

Проектуємо сайт від початку до кінця *


Крок 13. Працюємо з Background.

Приховуємо все крім шару “BG”. На тлі цього конструкція являє собою цілий округлений прямокутник.
Білий закруглений прямокутник має радіус 8px.
Працюйте з зображеннями, додайте елементи, знайдіть правильно рішення, не навантажене, легке, і в той же час правильне в композиційному плані.

Проектуємо сайт від початку до кінця *



Крок 14. Посилання, функції меню.


Навігаційне меню, з мого улюбленого сайту aviary.com.

Блок в сіро-світлих тонах, само меню має заокруглення, виглядає красиво і стильно.

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

Проектуємо сайт від початку до кінця *



Крок 15. Піксельні шрифти.


Зробимо невеликий виняток для піксельних шрифтів! і потіснимо наше основне правило!
Піксельні шрифти не мають ніякого згладжування, але піксель шрифти прекрасно функціонувати при малих розмірах. Піксельні шрифти популярні в Flash, вони швидше.
ОК, так що тепер ви знаєте про радощі піксельних шрифтів, обов’язково використовуйте їх помірковано.
Шрифти використані в прикладі можна завантажити miniml.com

Тепер, вивчимо закруглені кути з випадаючого меню. Білий фон насправді будується з трьох округлених кутових прямокутника.

Проектуємо сайт від початку до кінця *



Крок 16. Ефекти тексту


Всі тексти були організовані в ієрархії важливості і уваги.
Найбільший розмір шрифту і колір темний (виглядає: висока контрастність) зарезервовано для заголовка. Пам’ятайте, що всі кольори з swatches – послідовні, узгоджені, послідовні!

Проектуємо сайт від початку до кінця *


Крок 17. Стилі Sidebars.

Коли ми організували все бічні бокси, ми можемо почати їх стилізацію.
Додамо яскравий градієнт, використовуючи Line Tool, намалюємо смужку горизонтальну. Застосуємо до боксу яскраву падаючу тінь.
Намалюємо rectangle, вище всіх форм, і додамо Gradient Overlay, рожевий, і 1px stroke, і заллємо градієнтом горизонтальним від pink до white.
Потім задамо назву фонового шару в шар маски у вигляді бічній панелі вікна.
Повторимо ці дії для всіх боксів. Дивіться нижче

Проектуємо сайт від початку до кінця *



Крок 18. Працюємо з Illustrator Part II.


Створюємо графічні елементи в нижній частині шаблону.
Режим кольору як зазвичай CMYK, зайдемо в File> Document Color Mode> RGB Color, і поміняємо на RGB.
Тому що вся веб-графіка, в режимі RGB.
Повернемося в Photoshop, виберемо в swatches – темно сірий, рожевий і блакитний – перетягнути їх в Illustrator. Використовуємо інструмент Eyedropper Tool (I) в Illustrator. Після всього, перетягнемо наш елемент назад, можна застосувати стилі.

Проектуємо сайт від початку до кінця *



Крок 19. Графіка Part II


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

Безкоштовні іконки та значки iconpot.com

Проектуємо сайт від початку до кінця *


Крок 20. Кнопки

Найскладніше для мене це створення спеціальних кнопок, вони так сказати повинні відповідати веб 2.0 стандартам.

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

Проектуємо сайт від початку до кінця *



Крок 21. Прибираємо сітку


Найважливіше щоб весь дизайн був по сітці, всі об’єкти шикувалися по сеті, всі позиції по сітці.
Сітка запорука гарного дизайну, розміщення об’єктів, відстані між ними.

Проектуємо сайт від початку до кінця *


Крок 22.

Дизайн повинен підходити як мінімум до вирішення монітора 1024×768 рх. Повинен бути простий для верстки, і натягу на різні CMS системи.
Гарні банери для сайту я зазвичай беру з портфеля банерів rightbanners.com

Проектуємо сайт від початку до кінця *



Фінал:

Проектуємо сайт від початку до кінця *


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*