Створення привабливого сайту-портфоліо для фотографа

33

Від автора: у цьому уроці ми створимо з нуля макет фото-портфоліо. Макет не буде відрізнятися строкатістю фарб і колосальним наявністю графіки. Головне тут – лаконічність, потрібно правильно подати те, заради чого сайт і створюється: демонстрацію портфоліо.

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

Якщо Ви готові, то приступимо!

План уроку

1. Створення документа, розмітка напрямними.

2. Робота з фоном, градієнтом.

3. Створення логотипу.

4. Робота з шапкою.

5. Робота з основною областю, оформлення слайдера і каталогів.

6. Робота з футером.

Деталі підручника

Програма: Adobe Photoshop

Версія: CS 4

Приблизний час виконання: 1 година

Складність: середня

автор

Автор: Макс Дивиани

Захоплююся плівковою фотографією, живописом. Живу в місті Луганськ, Україна. Працюю 4 роки веб-дизайнером і радий ділитися своїм досвідом. Завжди Ваш, Макс Дивиани.

скачать исходникискачать урок

Скріншоти уроку у гарному якості представлені в текстових (pdf, doc, docx) версіях уроку, які Ви зможете викачати по посиланню вище.

Крок 1. Створення документа

Створюємо новий файл розміром 1280 точок в ширину на 1400 у висоту. Насправді, сайт буде працювати від дозволів старих моніторів (1024х768) до дозволів 1280х720 і вище.

Крок 2. Відсікаємо основну частину

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

Щоб не плутатися, будемо додавати напрямні по мірі необхідності.

Також, варто перевірити налаштування (Редагування – Встановлення Одиниці виміру і лінійки). Початкова настройка для пункту Лінійки – міліметри. Нам же потрібно пункти.

Крок 3. Працюємо з фоном

Для початку, заллємо фон чорним кольором, щоб підкреслити майбутні фотографії та не відволікати увагу користувача. (Шар — Новий шар-заливка — Колір), погоджуємося, колір RGB: 000

Далі, виділимо нашу майбутню шапку сайту. Встановлюємо основний колір #cb0060

Створюємо вертикальну напрямну посередині документа (640 вт). Вона потрібна, щоб рівно застосувати градієнт в наступному етапі уроку.

Отже, вибираємо інструмент Градієнт (гаряча клавіша G). Налаштування інструменту з випадаючого набору вибираємо Від основного до прозорого.

Тип градієнта: радіальний

Не будемо чіпати вже наявний шар, створимо новий. Тепер, за нашою центровий направляючої, дамо градієнт зверху, з-за полотна, приблизно на третину шару. Отримаємо таку картину:

Вітаю, робота з фоном закінчена!

Крок 4. Початок роботи з шапкою, створення логотипу лаконічного

Дамо горизонтальні напрямні в 30 пт і 140 пт, це будуть кордони нашої шапки

Особисто я вибрав класичні друкарські шрифти для логотипу і заголовків на сайті – MS Serif і MS Sans Serif, досить популярні у використанні веб-дизайнерами. Ви, звичайно ж, можете поексперементувати зі шрифтами.

Приступаємо до логотипу. Для фотографа важливо ім’я, на нього ми й дамо акцент.

Створимо текстовий шар з ім’ям фотографа – max diviani. Шрифт MS Serif, розмір шрифту – 18, колір білий. Збільшимо відступ між літерами, для цього при редагуванні тексту потрібно викликати панель символів і абзаців і встановити значення трекінгу для виділених символів: 830

Далі, праворуч знизу вкажемо рід діяльності – photographer, шрифтом MS Sans Serif, розміром 12. Трекінг – 25

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

Тепер, слід візуально відокремити ім’я від прізвища. Для цього, зробимо підкладку під ім’я – створюємо новий шар, вибираємо інструмент Овальна область, і одночасно з затиснутими Shift+Alt, виділяємо ім’я з центру і заливаємо чорним кольором (інструмент Заливка). Встановлюємо непрозорість шару в 18%

Логотип готовий!

Крок 5. Продовжуємо працювати з шапкою

Я думаю, доцільно буде встановити статус зайнятості фотографа Зайнятий Приймаю замовлення/У відпустці тощо)

Для цього, створюємо текстовий шар, в якому буде відображатися статус і розмістимо його ближче до правого краю нашої шапки, тим самим урівноважимо ліву частину. Шрифт тексту – MS Serif, колір білий, розмір 18, трекінг 150.

Подсветим нашу напис. Для цього, копіюємо шар з текстом(в меню Створити дублікат шару…) і розміщуємо його в списку під оригіналом. Застосовуємо Фільтр – Розумієте – Розумієте по Гаусу, погоджуємося на растрування тексту. У налаштуваннях фільтра вказуємо радіус розмиття в 5 пікселів.

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

Крок 6. Основне фото і відображення

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

Копіюємо шар з фото. Отзеркаливаем його за допомогою меню Редагування – Трансформація – Відобразити по вертикалі. За допомогою інструменту Переміщення (гаряча клавіша V) розміщуємо на полотні рівному під оригіналом шару.

Далі, злегка застосовуємо інструмент Редагування – Трасформирование – Перспектива

Застосовуємо чорний градієнт, від основного до прозорого. Заливаємо їм отзеркаленный шар — знизу вверх (за центральної вертикальної напрямної!)

Крок 7. Заголовок для фото

Підказка: не забувайте час від часу зберігати документ! Бажано, в різні файли. Це в рази збільшить шанси відновити макет зависаниях і вильотах програми!

Створюємо горизонтальну лінійку 205 пунктів. Тим самим, ми відсікли нашу майбутню підкладку розміром 980 на 65.

Створюємо новий шар, виділяємо Прямокутною областю утворене направляючими простір і заливаємо виділення чорним кольором. Непрозорість шару встановлюємо на 40%.

Созадем текстовий шар ближче до лівого краю підкладки, шрифт MS Serif, розмір 30, трекінг 150, колір білий. Вказуємо назву фотографії

В правій стороні підкладки ми вкажемо деякі технічні дані – назва галереї(або фотосесії), в якій лежить фотографія, і дату зйомки. Шрифт – MS Serif, колір білий, розмір 18, трекінг 140.

Крок 8. Оформлення слайдера

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

Для початку створимо напрямні для зменшених копій фотографій(попередня-наступна). Фотографії будуть йти рівно по центру основний фотографії, збоку.

Напрямні: 331 і 611 по горизонталі, 110 і 1170 по вертикалі(з урахуванням того, що наші фотографії будуть мати розмір 420х280, стандартна класична пропорція фотографій 3:2)

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

Щоб бічні фотографії не відволікали увагу від центральної, встановимо значення непрозорості 40%. Ось, що у нас є на даному етапі уроку:

Кнопку паузи намалювати досить легко – на новому шарі створюємо 2 рядомстоящих прямокутника. Я ввів розмір кожного: 10х34 білого кольору, всередині — прямокутник чорного кольору розміром 8х32.(Інструменти Прямокутна область і Заливка). Це не принципово, ви можете поекспериментувати з вашої кнопкою.

Непрозорість шару 40%. Розміщуємо в правій нижній частині фотографії

Спробуйте самі в тому ж стилі намалювати кнопку Play!

Крок 9. Каталоги з фотографіями

Візуально оформимо наші каталоги за подобою головного фото. Взявши за розмір однієї обкладинки 300х200 пікселів, ми легко уместим їх 3 в одному ряду, з урахуванням відступів в 40 пунктів. На цій підставі і зробимо напрямні:

Знову поміщаємо фотографії на полотно, як робили на попередніх етапах уроку(меню Файл — Помістити):

Робимо основу для наших каталогів. В ширину підкладка дорівнює ширині кожного фото, а у висоту – 40 пунктів. Після завдання нової направляючої у нас вже є блоки для підкладки, які потрібно буде обвести і залити чорним на новому шарі:

Підказка: щоб виділити кілька областей відразу, потрібно натиснути Shift при використанні інструмент Прямокутна область

Встановлюємо непрозорість шару з чорною підкладкою 40%

Тепер, підпишемо наші каталоги. Ближче до лівого краю підкладки розмістимо текстові шари з назвами. Параметри тексту: шрифт MS Serif, розмір 24,колір білий, трекінг 100

Крок 10. Створення футера

Спочатку,відокремлюємо наш футер направлящими. Вертикальні вже є, залишилися горизонтальні:

Виділяємо отриману область, заливаємо на новому шарі кольором #460021 (близький до кольору шапки):

Поміщаємо на ліву сторону футора текстовий шар, в якій вкажемо адресу студії фотографа та контактний номер телефону. Параметри текстового інструменту: шрифт MS Serif, розмір 14, колір білий, трекінг 80

В правій стороні футера ми розмістимо іконки соціальних мереж і твіттера. Розіб’ємо їх напрямними. Напрямні побудовані за тим принципом, що іконки будуть розміром 24х24, з відступами в 10 пікселів:

Тепер, з помозью пункту меню Файл Помістити… розміщуємо іконки на полотні (іконки додаються в матеріалах до уроку)

Сайт містить багато графічної інформації у вигляді фотографій, але мало тексту. Це погано позначиться на індексацію в пошукових системах. Для цього, під футером ми створимо текстову область, не відволікає увагу, але містить деяку інформацію. Параметри тексту: MS Serif, розмір 12, колір #460021, трекінг 120

Крок 11. Продовжуємо роботу над шапкою і закінчуємо наш макет!

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

Створюємо текстовий шар під шаром зі статусом фотографа. Налаштування тексту: шрифт MS Sans Serif, розмір 15, колір білий, трекінг 250

Створюємо новий шар, розміщуємо його в списку під нашим меню. Обводимо Прямокутною областю активний пункт меню (в даному випадку — home), заливаємо чорним (інструмент Заливка).

Непрозорість шару 17%

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

Вітаю Вас! Робота над макетом завершена! Ви створили своє портфоліо фотографа!