Створення дизайну сайту за допомогою Photoshop

Якщо ви хочете самостійно створити веб-сторінку, розберіться, як зробити сайт в Фотошопі. Adobe Photoshop - це графічний редактор. У ньому можна малювати макети і їх окремі елементи. Це досить довгий і складний процес. Веб-дизайнери роками вчаться оформляти шаблони і верстати по ним інтернет-сторінки. Але простий макет може зібрати будь-яка людина. Потрібні лише базові знання Фотошопа і фантазія.

В Фотошопі намалювати нескладний дизайн сайту під силу навіть новачкові

З першого разу у вас навряд чи вийде оформити сторінку, як у майстрів дизайну. Але намалювати привабливий і невичурний сервіс буде вам під силу.

Трохи про створення сайтів

Розшифровка деяких термінів.

  • CSS (Cascading Style Sheets) і HTML (HyperText Markup Language) - комп'ютерні мови, які використовуються при створенні веб-ресурсів. Якщо відкрити вихідний код будь-якої сторінки в інтернеті, там будуть HTML-теги.
  • Верстка - компоновка і монтаж матеріалів з макета, перетворення його в html-шаблон. Від цього залежить, як розташовуються об'єкти, красиво вони виглядають в загальній композиції, чи зручно читати текст тощо.
  • Шари - частини макета. Вони разом складають загальну картину. Але їх можна редагувати і переміщати окремо один від одного.
  • Тіло - місце, де знаходиться контент. Навколо нього може бути фон.
  • Фрейм (Frame) - елемент сторінки. Блок з якоюсь інформацією, картинкою, формою.

Зробити приголомшливий сайт з нуля може тільки професіонал. Для цього потрібно розбиратися в веб-дизайні і знати HTML. Так як готовий макет треба ще грамотно зверстати.

Але є і більш прості способи. Існують онлайн-сервіси та програми, які автоматично перетворять .psd (формат файлів Photoshop) в HTML і CSS. Вам залишиться лише правильно зібрати шаблон.

Для використання Photoshop необов'язково бути художником і розбиратися у всіх опціях програми. Але якщо ви вперше запустили її і не знаєте, як вставити текст, намалювати геометричну фігуру, продублювати шар, поміняти колір або виділити довільну область, варто почати з чогось простіше. Щоб зробити макет в Фотошопі, потрібні хоча б початкові навички роботи з утилітою і розуміння базових функцій (як накреслити лінію, поставити направляючу, вибрати шрифт тощо).

Загальна інформація про мережеві сервіси теж стане в нагоді. Сайт можна охарактеризувати за такими критеріями:

  • Односторінковий. Всі елементи, контент, все наповнення ресурсу знаходиться в одному місці. На одній сторінці. Щоб переглянути вміст сервісу, не треба переходити за посиланнями або відкривати нові вкладки. При цьому сам сайт може бути як завгодно великим. У ньому поміститься і маленька рекламна брошура, і величезний роман на 600 аркушів.
  • Багатосторінковий. Відповідно, включає багато сторінок. Це можуть бути, наприклад, «Головна», «Форум», «Гостьова книга», «Відповіді на типові запитання», «Контакти». Для кожної з них потрібно робити макет. Ще будуть потрібні навігація і карта сайту: окремий розділ з посиланнями на всі частини сервісу. Щоб користувач міг швидко знайти потрібну йому закладку.
  • «Гумовий». Змінює розмір в залежності від дозволу екрану. Розтягується разом з вікном оглядача. Треба заздалегідь розраховувати, як буде виглядати сайт. Якщо при ширині 1300 все відображається нормально, то в 900 пікселях частина статті може «виїхати» за межі фрейма, зображення стануть не так, як треба, а flash-анімація закриє форму для введення.
  • Фіксований. Тіло сайту не змінює розмір. Найлегший і практичний варіант. Щоб сторінка виглядала цілісною, і при розширенні вікна не було «порожнього» місця по краях, можна зробити гумовим фон.

макет

Для початку вирішіть, який дизайн вам потрібен. Недостатньо його просто «уявити», а потім оформити в Фотошопі. Повинно бути чітке уявлення. Накресліть шаблон на звичайному папері. Не потрібно перемальовувати кожну картинку. Досить схеми: кілька прямокутників і гуртків, які умовно позначають елементи веб-сторінки. Прикиньте, як будуть розташовуватися фрейми, де краще поставити логотип, куди помістити інформацію для відвідувачів.

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

  • Створіть новий документ (Файл - Створити). Розміри підбираються з розрахунком на маленькі монітори або низький дозвіл: 1024 × 720 пікселів. Це ширина «інформаційної» частини, а не всього малюнка. Якщо ви хочете сторінку в 1100 пікселів, то треба робити документ шириною від 1300 пікселів. Довжина, по суті, не фіксована - вона залежить від того, скільки контенту ви хочете розмістити на ресурсі. Це рекомендації, а не правила. Можете зібрати великий макет, якщо хочете.
  • Увімкніть лінійки. Натисніть Ctrl + R або перейдіть в меню Перегляд - Лінійки. Це вимірювальна шкала. Вона з'являється зовні малюнка. Без неї доведеться прикидати розміри і відстані «на око», що не дуже добре позначиться на кінцевому результаті. Налаштувати цю функцію можна в меню Редагування - Установки - Одиниці виміру та лінійки. Там краще поміняти сантиметри на пікселі, щоб працювати з одним параметром, а не вираховувати, скільки точок в одному дюймі.
  • Також слід активувати сітку. Перегляд - Показати - Сітка або Ctrl + Е (відключити її можна також). Це такий собі аналог зошити в клітку. В Фотошопі будуть відображатися вертикальні і горизонтальні лінії. На самому малюнку вони не з'являться. Їх можна побачити тільки при редагуванні. Ця функція потрібна, щоб рівно розставляти елементи шаблону. Кому-то зручніше працювати з сіткою, кому-то без неї. Найкраще її включити, якщо ви вперше робите сайт.
  • Щоб її налаштувати, перейдіть в Редагування - Установки - Напрямні, сітка та фрагменти. Там можна вибрати розмір клітин, а також колір і тип ліній (суцільна, пунктирна, з точок).

Приклад сучасного дизайну сайтів

  • Встановіть напрямні. Між ними буде знаходитися основний контент-ресурсу - фіксоване тіло сайту. А за ними - гумовий фон. Щоб це зробити, натисніть Перегляд - Нова напрямна. У блоці «Орієнтація» відзначте пункт «Вертикальний». В поле «Положення» напишіть, на якому відстань від лівого краю буде знаходитися об'єкт. Орієнтуйтеся за шкалою лінійки.
  • Потрібні дві напрямні - справа і зліва від тіла сторінки. Відстань між ними повинна становити максимум 1003 пікселів для дисплеїв з роздільною здатністю 1024 × 720. Можете вказати іншу ширину. Але великі ресурси незручно переглядати на маленьких моніторах.
  • Чому 1003, а не 1024 × Якщо сайт треба перегортати ( «скролл») вниз, в браузері буде вертикальний повзунок для прокрутки. Розмір цього повзунка - приблизно 21 піксель. Якщо його не враховувати, з'явиться горизонтальний скрол. І відвідувачеві ресурсу доведеться рухати сторінку вправо-вліво, щоб побачити всю інформацію.
  • Тіло повинно бути в центрі полотна.

Це підготовчі етапи роботи. Як оформити макет в Фотошопі, залежить від вашої уяви і смаку. Тому далі будуть тільки загальні рекомендації технічного характеру.

  • Для початку вашу макету потрібен фон. Його можна зробити самостійно або скачати з мережі. Існує багато ресурсів з безкоштовними текстурами. Не ставте на сайт зображення, на які поширюються авторські права. Не варто брати яскравий або контрастний фон. Краще не використовувати текстури з великою кількістю дрібних виділяються деталей. Вони будуть відволікати відвідувача від тіла сторінки.
  • Якщо просто відкрити малюнок в Фотошопі, він виявиться на новій вкладці, а не додасться в макет. Виділіть весь фон. Для цього потрібно поєднання клавіш Ctrl + A або інструмент «Виділення» (він знаходиться на панелі ліворуч). Скопіюйте його та вставте в шаблон.
  • Також ця опція доступна, якщо натиснути Редагування - Вставка.

  • У списку праворуч внизу з'явиться новий шар. Клацніть по ньому правою кнопкою миші, щоб подивитися можливі дії. В меню «Параметри шару» можна змінити його ім'я. В «Параметри накладання» знаходяться основні настройки зображення. Можна зробити йому світіння, тиснення, глянець, обведення, градієнт. Якщо виберіть якусь опцію, зміни відразу відображаються в Фотошопі. Є набір готових стилів. Так зі стандартної текстури створюються оригінальні дизайнерські рішення. І нічого додатково малювати не треба.
  • Кнопка «Фільтри» є в рядку меню. Там ви знайдете різноманітні імітації (пастель, акварель, олівці), стилізації, текстури, ескізи, відблиски, розмиття.
  • Можна вибрати однотонний фон. Колір залежить від ваших особистих переваг. Але краще не робити його чорним або отруйним. Підійдуть постільні та м'які тони або прозорі холодні (наприклад, світло-сірий, ніжно-блакитний).
  • Після текстур можна збирати сам сайт. Ось тут вам надана свобода для творчості.
  • Щоб додати якусь фігуру (відрізок, квадрат, овал), натисніть на відповідну кнопку праворуч. Вона буде мати вигляд і назву того об'єкта, який в даний момент обраний для малювання. Наприклад, «Інструмент Еліпс», «Інструмент Багатокутник». В Фотошопі кількість фігур обмежена. Але їх можна знайти в інтернеті, скачати і встановити через меню Редагування - Управління наборами. В поле «Тип» вкажіть, колекцію яких об'єктів ви завантажуєте.
  • У різних версіях програми ці фігури викликаються по-різному. Або кнопкою у вигляді маленького чорного трикутника (вона справа), або піктограмою у вигляді шестерінки, або пунктом «Форма растрової точки» (вона під рядком меню). Об'єкти можна комбінувати, групувати, робити з них композиції.
  • Щоб створити текстовий фрейм, натисніть на кнопку в вигляді великої літери «T». Потім виберіть місце, де повинні розташовуватися символи, клікніть туди і надрукуйте те, що вам потрібно.
  • Кожен елемент краще ставити на окремий шар. Так буде зручніше переміщати і редагувати, не "зачіпаючи» весь сайт. Щоб додати цей об'єкт, перейдіть в Шари - Новий.

  • Щоб спроектувати зображення в заздалегідь обрану область, спочатку виділіть її, а потім відкрийте Редагування - Спеціальна вставка. Там будуть опції «Вставити замість» і «Вставити за межами».
  • Можна частину одного малюнка перенести на новий шар. Для цього треба виділити її, клацнути по ній правою кнопкою миші і вибрати «Вирізати на новий шар».
  • З фігурами, написами і зображеннями доступні ті ж опції, що і з фоном: ефекти, фільтри і так далі.
  • В Фотошопі існує ще багато інструментів для малювання: кисті, пір'я, олівці.

Можна зробити якісний ресурс навіть з простих геометричних об'єктів.

Існують ресурси з безкоштовними макетами. Завантажте їх в Photoshop і відредагуйте, якщо треба. Це простіше і швидше, ніж малювати з нуля.

Як перетворити макет в html-файл?

Ви розібралися, як створити сайт в Фотошопі, і оформили свій перший макет. Що з ним робити далі? Адже його не можна просто завантажити на хостинг.

Його можна віддати верстальщику, який зробить якісний html-шаблон. Але є й інший варіант. Скористатися сервісами для конвертації PSD-файлу в HTML і CSS.

  • Psd2Html Converter. Платний онлайн-сервіс. Швидко конвертує формат Photoshop в шаблон інтернет-сторінки. З цим ресурсом навіть з неякісного макета можна створити пристойний сайт.
  • HTML Panda.
  • PSDCenter
  • 40 Dollar Markup.

конструктори

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

У Photoshop не тільки малюють. У ньому збирають макети для сайтів. У більшості випадків це роблять майстри. Але простий шаблон може оформити будь-яка людина. Необхідні лише базові знання про Фотошопі.