Як створити дизайн сайту за допомогою photoshop
Є багато способів створення веб-сайтів і робота в Photoshop - один з них.
Зміст
кроки
Відео: Урок 8. Створення дизайну сайту в Adobe Photoshop. (Частина 1)
1
Завантажити та встановити Photoshop.
2
Запустіть Photoshop на вашому комп`ютері і створіть новий документ з обраної вами висотою і шириною (ширина зазвичай 800-900 пікселів, висота - 1200-1500 пікселів).
3
Створіть шапку (header) для вашого сайту (з барвистою картинки або з нуля), вставивши в шапку логотип вашого сайту.
4
Створіть кнопки меню (форму, колір, відстань між ними, як для верхнього меню, так і нижнього меню, правого або лівого, або комбінованого з двох-трьох наборів меню).
5
Створіть область для контенту, для підвалу (футера, footer), місце для банера, для фотогалереї і так далі, поки у вас не вийде в цілому закінчений макет сайту.
6
А тепер складна частина: в Photoshop поріжте і експортуйте ваш готовий сайт, задавши ім`я кожної відрізаною області перед експортом (наприклад: виділіть область шапки, відріжте інструментом "Раскройка" і назвіть його "header", Виділіть область кнопки Головна і назвіть її "кнопка Головна" і так далі з кожним окремим об`єктом сайту).
7
Радимо залишити область контенту порожній і зберегти просто як область малюнка. Якщо ви збережете разом з текстом, то текст буде відображатися малюнком, а коли область контенту порожня, то ви можете додати вміст кожної сторінки окремо.
8
Експортуйте результат роботи в окремий файл на робочому столі, при експорті буде створено HTML сторінку (ваша сторінка ще не отцентрирована і без контенту), файл CSS, і окремо папку з малюнками кожної області, відрізаною вами.
9
Відкрийте файл HTML за допомогою програми OneNote або Notepad і внесіть правки в HTML (відцентруйте всю сторінку, встановіть колір фону, вставте контент в блок Div, в якому знаходиться картинка вашого контенту, створіть метатеги ключових слів, контент і т.д.).
10
Скопіюйте та вставте ту ж HTML сторінку стільки разів, скільки вам необхідно сторінок, а потім перейменуйте сторінки (Головна, Про нас, Контакти і так далі) .brgt;
11
Створіть внутрішні посилання для сторінок в файлах HTML (або зробіть це до створення копій сторінок - так ви не будете повторюватися) там, де є код картинок кнопок, створюючи діви (Divs) і вказуючи посилання на сторінки.
Відео: Малюємо сайт в Photoshop. Урок 0 - Налаштування
12
Завантажте готові файли на хостинг.
Поради
- Photoshop не складний, просто гарненько вивчіть його, і ви зможете створювати просто відмінні роботи.
Поділитися в соц мережах:
Схожі
