Розробка красивого веб-сайту з нуля. Як створити веб-сайт

23

Доброго часу доби, шановні читачі блогу http://www.webformyself.com

С Вами Віктор. Сьогодні я хочу надати Вашій увазі ще один цікавий переклад з сайту http://net.tutsplus.com/ . Ця стаття покаже Вам як можна намалювати красивий сайт, маючи практично нульові знання в програмі Photoshop.

Автором даної статті є Marko Prljic.

Поїхали…

Вам захотілося створити гарний сайт, але Ви навіть не уявляєте, як це робиться? Хочете дізнатися, як створити веб-сайт? Чесно кажучи, кілька років тому це і зі мною сталося. Подорожуючи по мережі, я зустрічав безліч красивих сайтів, і самому мені завжди хотілося вміти розробляти такий дизайн для сайтів. Зараз я вже вмію і готовий навчити Вас, як це зробити! В сутності, для цього потрібні деякі навички роботи в Photoshop і увага до деталей. У цьому керівництві я буду звертати увагу на ті незначні на перший погляд деталі, з яких складається красивий дизайн сайту. Запускайте Photoshop і приступимо до справи!

Привіт, мене звуть Марко, я веб-дизайнер з чудесної країни Хорватії. Я розробляю амбітні, класно виглядають сучасні сайти. Також я пишу статті для Themeforest і Graphicriver, і люблю писати різні керівництва. У вільний від створення сайтів час я просто спілкуюся зі своїми дітьми або обмірковую черговий Великий Проект. Про, як і всі інші, я веду блог на Twitter.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Крок 1 – Скачайте 960 Grid System Template

Майже всі дизайни я розробляю на основі блокової системи 960 Grid System. Тому нам спочатку потрібно завантажити ці блокові шаблони для Photoshop, які можна знайти на офіційному сайті 960.gs. Просто розпакуйте zip-архів і знайдіть в ньому PSD шаблони. Ви побачите шаблони двох типів: один – 12_col, другий – 16_col. Як видно з назви, відрізняються вони тим, що один складається з 12 колонок, а інший з 16. Щоб пояснити трохи точніше, припустимо, що Ваш дизайн буде складатися з трьох вертикальних блоків, тоді Вам потрібно взяти шаблон 12_col, так як 12 кратно 3. А якщо Ваш дизайн буде складатися з чотирьох вертикальних блоків, тоді Ви може брати в якості шаблону як 12_col, так і 16_col, тому що і 12, і 16 кратно 4. Далі у посібнику ми розглянемо це на прикладі.

Крок 2 – Визначаємо структуру

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Перед тим, як ми відкриємо наш PSD-шаблон і почнемо малювати, нам спочатку потрібно визначитися зі структурою нашого сайту. Це буде досить ускладнена структура, оскільки ми будемо використовувати шари, вкладені один в одного. Це проілюстровано на малюнку вище.

Крок 3

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Після того, як ми визначилися зі структурою сайту, можна рухатися далі. Відкрийте Ваш шаблон 16_col.psd. Перейдіть в меню «Зображення» > «Розмір полотна» (Image > Canvas size). Встановіть розмір 1200 px по ширині і 1700px по висоті. Встановіть колір фону #ffffff.

Крок 4

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Далі виберіть інструмент «Прямокутник (Rectangle) і намалюйте прямокутник по всій ширині полотна і висотою приблизно 80px. Залийте його кольором #dddddd.

Крок 5

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть новий шар над прямокутною областю і встановіть для цього шару режим «Перекриття» (Overlay). Утримуючи натиснутою клавішу Ctrl, клацніть по шару з прямокутником. Він буде виділено. Виберіть м’яку кисть (soft brush) товщиною 600px, встановіть білий колір і кілька разів клацніть, помістивши край кисті трохи вище виділеної області, як показано на рисунку. Таким чином, Ви створите красивий і легкий світловий ефект. Крім того, можна пов’язати ці два шари.

Крок 6

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Новий шар. Знову виберіть інструмент «Прямокутник (Rectangle) і намалюйте тонку темно-сірий прямокутник, як показано на рисунку.

Крок 7

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Вибравши інструмент «Прямокутник (Rectangle), намалюйте великий блок приблизно на 500px нижче верхнього прямокутника. Зробіть його висотою 575px і накладіть на нього лінійний градієнт в межах відтінків від #d2d2d0 до #ffffff, з кутом -90° і масштабом 100%.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Крок 8

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Зараз ми створимо такий же світловий ефект, який описано в Кроці 5. Ми ще не раз будемо використовувати цей прийом, тому наступного разу я просто буду відсилати Вас до Кроку 5, де описано цей ефект.

Створіть новий шар над усіма поточними шарами. Утримуючи натиснутою клавішу Ctrl, клацніть мишею по великому прямокутника. Виберіть м’яку кисть товщиною 600px, встановіть білий колір і кілька разів клацніть, помістивши край кисті трохи вище виділеної області, як показано на рисунку.

Крок 9

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть новий шар і намалюйте великий прямокутник висотою 400px. Він буде використовуватися для шапки нашого сайту. Накладіть на нього красивий блакитний градієнт від відтінку #2787b7 до #258fcd.

»Бачите, який ніжний перехід відтінків?

Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Крок 10

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Додайте темно-синю лінію товщиною 1px вздовж нижньої межі шапки, накладіть ефект тіні (Drop shadow). Для накладання тіні використовуйте режим Множення (Multiply), непрозорість (Opacity) 65%, кут (Angle) -90°, зміщення (Distance) 1px, розмір (Size) 6px. Далі створіть поверх новий шар і намалюйте під синьою лінією ще одну лінію товщиною 1px білого кольору. Таким чином, ми створимо виразну межу для нашого блоку з основним контентом. В принципі, цей прийом оформлення кордонів Ви можете застосовувати для кожного блоку Вашого проекту, тільки з іншими відтінками.

Крок 11

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть новий шар і за допомогою інструменту Прямокутник (Rectangle) намалюйте у верхній частині полотна прямокутну область висотою 50px, як показано на рисунку. Вона буде служити для панелі навігації.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Накладіть тінь, використовуючи параметри, представлені на малюнку.

Крок 12

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Настав час зайнятися навігацією. Використовуйте інструмент «Прямокутник із заокругленими кутами» (Rounded Rectangle), встановіть радіус 5px. Намалюйте прямокутник, зробіть заливку кольором #f6a836 і накладіть наступні ефекти:

— Внутрішня тінь (Inner Shadow) – колір: #ffffff, Режим: Перекриття, Прозорість: 60%, Кут: 120 °, Зміщення: 7px, Розмір: 6px.

— Внутрішнє світіння (Inner glow) – Режим: Нормальний, колір: #ffffff, Розмір: 4px, інші параметри залишіть за замовчуванням.

— Обведення (Stroke) – Розмір: 1px, Положення: Всередині, колір: #ce7e01.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Тепер виділіть цей прямокутник з допомогою Ctrl клацання миші. Перейдіть в меню «Виділення» > «Змінити» > «Згорнути» (Select > Modify > Contract), і введіть у вікні 1px.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть зверху новий шар, виберіть на «Перекриття» (Overlay) і накладіть ефект, описаний у Кроці 5, тільки в цей раз використовуючи кисть меншого розміру. Далі додайте текст для навігації. Я використовував для посилань шрифт Arial, всі літери великі і без згладжування.

Крок 13

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Тепер давайте створимо поле пошуку. За допомогою інструменту «Прямокутник із заокругленими кутами» (Rounded Rectangle) з радіусом 5px створіть поле для пошуку по правій стороні розміченій сітки шаблону, в середині верхньої сірої смуги, створеної на Кроці 4. Додайте до шару наступні стилі:

— Внутрішня тінь (Inner Shadow) – колір: #000000, Режим: Множення (Multiply), Непрозорість (Opacity): 9%, Кут (Angle): 90°, Зміщення (Distance): 0px, Розмір (Size): 6px.

— Обведення (Stroke) – Розмір (Size): 1px, Положення: Всередині (Position: inside), колір: #dfdfdf.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Я додав текст «Search» і світло-сіру кнопку «Go». Виглядати це повинно так.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

До цього моменту у нас вже багато шарів і необхідно їх трохи впорядкувати. Для цього ми створимо нову Папку шарів і назвемо її «Search». Виділіть всі шари, з яких складається поле для пошуку, і просто перетягніть їх нову папку. Надалі ми розподілимо по папках і інші елементи, щоб у нас була лаконічна, упорядкована палітра шарів.

Крок 14

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть новий шар і намалюйте кнопку «Sign Up» точно так само, як ми намалювали поле для пошуку, тільки по ширині-на половину менше. Помістіть її під пошуковим полем, по центру навігаційного блоку.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Знову створюємо ефект, описаний у Кроці 5.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Використовуйте м’яку кисть меншого розміру. Я в даному випадку виставив розмір 45px.

Крок 15

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Після додавання логотипу і підзаголовка наш сайт повинен виглядати ось так.

Крок 16

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Зараз повернемося до впорядкування шарів, про який ми згадували вище. Створіть нову порожню папку шарів і назвіть її «top_bar». Перемістити до неї всі верстви графіки з верхньої частини шаблона (логотип, підзаголовок, поле пошуку, кнопку реєстрації, панель навігації та елементи фону).

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть ще одну порожню папку шарів і назвіть її «header». У неї ми перемістимо графіком з шапки нашого шаблону. Ось так це повинно виглядати.

Крок 17

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Виберіть велику м’яку кисть розміром 600px, колір #ffffff, і натисніть кілька разів в області під навігаційною панеллю. Крім того, для одержання більш глибокого ефекту ми можемо переключити на чорний колір і зробити те ж саме в нижній частині шапки. Спробуйте!

Крок 18

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

На цьому кроці я поясню Вам, як я зробив для відображення зображень в шапці. Знайдіть пару зображень на свій вибір, я використовував скріншоти браузера Safari із зображеннями двох інших моїх шаблонів. Зменшіть один з них і помістіть під другим, який більше. Створіть дублікат обох шарів і за допомогою інструмента «Вільне трансформування» (Free Transform) переверніть спочатку одне зображення, потім друге. Посуньте обидва зображення на кілька пікселів вниз. Тепер зробіть виділення знизу з зовнішньої сторони до середини першого перевернутого зображення за допомогою інструменту «Прямокутна область» (Rectangular Marquee). Перейдіть в меню «Виділення» > «Змінити» > «Розтушовка» (Select > Modify > Feather) і у вікні введіть 30px або більше. У Вас має вийти таке ж виділення, як показано на рисунку. Натисніть кілька разів кнопку Delete, щоб вийшло гарне затишне відображення оригінального зображення. Повторіть цей крок для другого зображення.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Зараз, щоб зробити обидва зображення трохи виступаючими, створіть новий шар і встановіть для нього режим «Перекриття» (Overlay). Накладіть ефект, описаний у Кроці 5.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ось так наша шапка повинна виглядати після додавання красивого заголовка і декількох кнопок. Не забудьте згрупувати всі шари з графікою шапки в папку «header», щоб зберегти порядок на палітрі шарів Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Крок 19

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Подивившись на підсумкове превью нашого дизайну, Ви помітите красиві вкладки в блоці з основним контентом. Для створення подібних вкладок нам необхідно буде виконати ще кілька додаткових кроків, але це безумовно того варто. Спершу за допомогою інструменту «Прямокутник із заокругленими кутами» (Rounded Rectangle) намалюйте велику прямокутну фігуру висотою 70px і радіусом кутів 10px або більше, якщо порахуєте потрібним. Зараз нам треба позбутися нижніх округлених кутів і зробити їх ідеально прямими. Виберіть інструмент «Область (горизонтальний рядок)» (Direct Selection) і встановіть його на кордоні фігури. Клацніть по точці вертикальної осі і, утримуючи клавішу Shift, відтягніть її вниз, поки вона не досягне рівня горизонтальній осі. Вже непогано, але кут все ще деформований. Помітний невеликий хвостик. Натисніть на нього і посуньте вгору до рівня горизонтальній осі.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ми зробили ідеально прямий кут. Ось так це повинно виглядати. Тепер повторіть цей крок для правого нижнього кута.

Крок 20

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Виберіть інструмент «Лінія» (Line) товщиною 1px.

Крок 21

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Накресліть роздільники сірого кольору, утримуючи клавішу Shift.

Крок 22

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Розмістіть які-небудь іконки, заголовки і опис для кожної вкладки. Я використовував іконки Рея Ченга, які можна завантажити з сайту WebAppers.com. Як правило, одна вкладка завжди активна, в той час як інші залишаються неактивними. Щоб це чітко було видно в нашому дизайні, нам потрібно знайти спосіб показати. Я обесцветил інші іконки і зменшив непрозорість для заголовків і тексту, залишивши першу активну вкладку кольоровий і яскравою.

Крок 23

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ось так має виглядати виділення.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

За допомогою маленької м’якої кисті створіть білий фон.

Крок 24

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Додайте векторну маску (vector mask), натиснувши на маленьку іконку внизу палітри шарів.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Встановіть чорний колір, виберіть велику м’яку кисть і почніть видаляти прямокутник невеликими частинами, поки не вийде гарний ефект імітації тіні під нашими вкладками.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Нарешті, приділимо увагу деталям. Накресліть сіру лінію товщиною 1px вздовж нижньої межі панелі вкладок. Додайте знову маску на шар, як описано вище, і великою м’якою кистю видаліть краю лінії зліва та справа. Тепер у нас є красиво тераса лінія, яка підкреслює тінь під нашими вкладками.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ось так повинні виглядати наші вкладки.

Крок 25

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Прийшов час зайнятися дизайном основного змісту нашої першої вкладки. Нам потрібні красиво оформлене зображення, симпатичний заголовок і який-небудь текст. Спочатку займемося оформленням зображення. Мені здалося, що непогано б порушити прямолінійність нашого дизайну створенням красивого ефекту складених у стопку фотографій. Щоб цього домогтися, намалюйте білий прямокутник з рамкою сірого кольору і товщиною 1px, і накладіть на нього легкий ефект відкидання тіні.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Далі зробіть дублікат шару і поверніть його на кілька градусів за допомогою інструмента «Вільне трансформування» (Free Transform). Повторіть цей крок ще раз.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Імпортуйте підготовлене зображення і помістіть його над білими прямокутниками. Не хвилюйтеся, якщо зображення виходить за межі блоку – ми це виправимо. Виділіть верхній прямокутник, перейдіть в меню «Виділення» > «Змінити» > «Згорнути» (Select > Modify > Contract) і у вікні введіть 5px. Виділивши шар із зображенням, натисніть іконку «Швидка маска» (Quick Mask внизу палітри шарів. У Вас вийде ефект красивої картинки з рамкою, як показано на малюнку вище.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ось так у Вас повинен виглядати порядок шарів.

Крок 26

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Додаємо гарні заголовки, трохи тексту й марковані списки, і можна вважати нашу роботу над веб-дизайном завершеною. Рухаємося далі.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

І ще трохи організації шарів.

Крок 27

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Я вирішив, що цей блок повинен бути великим, тому я розмістив його в великому полі відразу після головного блоку. Спочатку малюємо великий світло-сірий прямокутник висотою приблизно 220px з рамкою сірого кольору товщиною 1px.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Далі малюємо ще один прямокутник, світліше і менше попереднього на 10px з кожної сторони. У нього також має бути світло-сіра рамка товщиною 1px.

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Додаємо який-небудь текст, і все готово!

Крок 28

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Тепер займемося нижнім колонтитулом. Намалюйте великий темно-сірий прямокутник висотою 400px.

Крок 29

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Накладіть світловий ефект точно так само, як ми описували в Кроці 5.

Крок 30

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Крок 31

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Створіть самий нижній блок, в якому буде продубльована навігація. Можна скопіювати верхній прямокутний блок з навігацією, помістити його внизу і встановити для нього висоту близько 40px. Помістіть його в самому низу Вашого полотна. Будь ласка, майте на увазі, що Вам, можливо, потрібно розширити полотно для цієї мети, щоб на ній вмістилася вся графіка. У цьому випадку відкрийте в меню «Зображення» > «Розмір полотна» (Image > Canvas size) і встановіть висоту, при якій весь проект вміщується на полотні.

Крок 32

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

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

Крок 33

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Наповнимо колонтитул змістом і красиво упорядкуємо його по нашій сітці.

Крок 34

Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Наостанок розподіліть всі Ваші шари по папках. У мене це зроблено так.

Дизайн

Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт
Розробка красивого веб-сайту з нуля. Як створити веб-сайт

Ось такий дизайн у нас вийшов в результаті, з парою змін для різних сторінок. Готові PSD-дизайни, звичайно ж, можна придбати на сайті ThemeForest.net.

Пара слів на закінчення

Сподіваюся, Вам сподобався цей урок, і Ви дізналися кілька нових прийомів. Тепер настала Ваша черга створювати нові чудові дизайни. Не забувайте, що приділяючи особливу увагу дрібних деталей, Ви зможете проектувати красиві веб-сайти, використовуючи всього два або три інструменту в Photoshop. Здорово, чи не правда?

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування