Як намалювати сайт в Фотошопі

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

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

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

зміст

1 Трохи про створення сайтів
2 макет
3 Як перетворити макет в html-файл?
4 конструктори

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

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

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