Як зробити сайт у фотошопі

Як зробити сайт у фотошопі

У фотошопі можна зробити макет сайту, за яким його вже створюють в html. Процес цей відносно нескладний.

Вам знадобиться

Програма Adobe Photoshop

Інструкція

  1. Відкрийте фотошоп і створіть у ньому документ розміром 1020 на 1200 pic. Встановіть колір фону # a8a995. Якщо сайт буде присвячений якій-небудь фірмі, то можна помістити її логотип зліва вгорі в рядку навігації. Залиште справа місце для посилань для навігації по сайту.
  2. Візьміть інструмент Rectangle Tool і створіть прямокутник 80 на 54 pic в рядку навігації по сайту. Він означатиме активний пункт меню в навігації по сайту.
  3. Зайдіть в меню Layer-Layer Style, поставте там галочку Color Overlay, там же колір # ADAE9E, Opacity — 100%, і галочку Stroke, там же Size — 1 px, Position — Outside, Opacity — 100%, колір # CED0BB.
  4. Поверх прямокутника, що у вас вже є, додайте ще один з розмірами 71 на 50 pic, зафарбуйте його кольором # cfbe28. Зайдіть в меню Layer-Layer Style, виставте наступні параметри для цього прямокутника: Drope Shadow: Blend Mode — Multiply, колір # 000000, Opacity — 27%, Angle — 90, Distance — 1, Spread — 0, Size — 5; Inner Shadow : Blend Mode — Multiply, колір # 000000, Opacity — 27%, Angle — 90, Distance — 1, Choke — 0, Size — 18; Stroke: Size — 1, Position — Outside, Opacity — 100, Fill Type — Color, Color # D6C72C.
  5. Додайте тінь для посилань, що знаходяться в рядку навігації. Для цього виділіть шар з текстом цих посилань, зайдіть в меню Layer-Layer Style і виставте наступні параметри: Drope Shadow: Blend Mode — Multiply, колір # 000000, Opacity — 75%, Angle — 90, Distance — 1, Spread — 0, Size — 1. Повторіть ці дії з кожним шаром, на яких буде текст посилань.
  6. Тепер потрібно зробити ознайомлювальну частина шаблона. Виберіть інструмент Rectangle Tool і зробіть прямокутник під логотипом, залийте його білим кольором, зменшіть прозорість до 20%.
  7. Виберіть інструмент Ellipse Tool і зробіть овал під цим прямокутником. Зайдіть в меню Filter> Blur> Gaussian Blur і поставте значення радіуса 7,8.
  8. Візьміть інструмент Rectangular Marque Tool і виділіть нижню частину прямокутника і розмитий овал. Видаліть її.
  9. Після цього впишіть текст в прямокутник-кнопку. Створіть лінію прямо над ним з наступними параметрами: 866 на 1 pic.