Як створити дизайн сайту за допомогою Photoshop

Є багато способів створення веб-сайтів і робота в Photoshop - один з них.

Кроки

1. 

   1

   Завантажте та встановіть Photoshop.

2. 

   2

   Запустіть Photoshop на вашому комп`ютері і створіть новий документ з обраної вами висотою і шириною (ширина зазвичай 800-900 пікселів, висота - 1200-1500 пікселів).

3. 

   3

   Створіть шапку (header) для вашого сайту (з барвистої картинки або з нуля), вставивши в шапку логотип вашого сайту.







4. 

   4

   Створіть кнопки меню (форму, колір, відстань між ними, як для верхнього меню, так і нижнього меню, правого або лівого, або комбінованого з двох-трьох наборів меню).

5. 

   5

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

6. 

   6

   А тепер складна частина: в Photoshop поріжте і експортуйте ваш готовий сайт, задавши ім`я кожної відрізаною області перед експортом (наприклад: виділіть область шапки, відріжте інструментом «Раскройка» і назвіть його «header», виділіть область кнопки Головна і назвіть її «кнопка Головна» і так далі з кожним окремим об`єктом сайту).

7. 

   7

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





8. 

   8

   Експортуйте результат роботи в окремий файл на робочому столі, при експорті буде створений HTML сторінку (ваша сторінка ще не отцентрирована і без контенту), файл CSS, і окремо папку з малюнками кожній області, відрізаною вами.

9. 

   9

   Відкрийте файл HTML за допомогою програми OneNote або Notepad і внесіть правки в HTML (відцентруйте всю сторінку, встановіть колір фону, вставте контент в блок Div, в якому знаходиться картинка вашого контенту, створіть метатеги ключових слів, контент і т.д.).

10. 

    10

    Скопіюйте і вставте ту ж HTML сторінку стільки разів, скільки вам необхідно сторінок, а потім перейменуйте сторінки (Головна, Про нас, Контакти і так далі).br>

11. 

    11

    Створіть внутрішні посилання для сторінок в файлах HTML (або зробіть це до створення копій сторінок - так ви не будете повторюватися) там, де є код картинок кнопок, створюючи діви (Divs) і вказуючи посилання на сторінки.

12. 

    12

    Завантажте готові файли на хостинг.

Поради

• Photoshop не складний, просто гарненько вивчіть його, і ви зможете створювати просто відмінні роботи.