про салон
художня зйомка
рекламна зйомка
репортажна зйомка
зйомка iнтер'єрiв
весiльна зйомка
вiдеозйомка
наше портфолiо
контакти
уроки photoshop
робота з текстом
робота з фото
графіка для сайту
робота з ефектами
магія фотошопу

Кориснi статтi:

Професійний сайт


У цьому уроці ми покажемо, як за допомогою Аdobe photoshop створити професійний сайт.

Відкрийте фотошоп, створіть новий документ розмірами 800x700px і 72dpi.Установите головний цвіт - #131313, візьміть Paint Bucket Tool (G) і залийте весь документ.


Створіть новий шар, візьміть Ellipse Tool (U), спробуйте створити елемент для заголовка сайту, зробіть овальне виділення й залийте його білим цвітом.


Параметри шару: Blending Options>Outer Glow


Одержали:


Застосовуючи попередній інструмент, пробуйте зробити наступний шар, що належить до заголовка сайту. Зміна форми робимо з Convert Point Tool.


Параметри шару:

Blending Options>Inner Glow: цвіт #143453.


Blending Options>Gradient Overlay


Gradients parameters:


Одержали:


Зробіть копію нового зробленого шару й виберіть Free Transform і изменинте його так щоб було схоже на це:


Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Створіть новий документ, розмірами 20x20px і 72dpi, інструментом Rectangle Tool створіть три прямокутники й за допомогою Free Transform поверніть їх під кутом, щоб створити паттерн білого цвіту..



Збережете візерунок:


Зробіть новий шар використовуючи Rectangle Tool (U) і створіть широку смужку, що буде тлом сайту.


Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Pattern Overlay


Одержали:


Зробіть копію недавно створеного шару й виберіть Free Transform, перемістите копію в праву сторону й дивитеся на малюнок:


Візьміть Rounded Rectangle Tool (U), представте форму заголовка сайту, на якій будуть його кнопки, пофарбуйте неї в #010101.



Параметри шару: Blending Options>Outer Glow



Зробіть копію нового зробленого шару й виберіть Free Transform щоб зробити її менше небагато й змінити в цієї копії параметри:


Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Візьміть Ellipse Tool (U) і пробуйте намалювати спалах на правій стороні всіх кнопок, розташованих на заголовку сайту.


Параметри шару: Fill 0% Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


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



Зробіть копію нового зробленого шару й перемістите копію в лево, як показано на малюнку:


Виберіть Rectangle Tool (U), щоб створити й пофарбувати найнижчу частину тла сайту, цим цвітом #1A1A1A.


Параметри шару: Blending Options>Outer Glow


Blending Options>Bevel and Emboss


Одержали:


Візьміть Rounded Rectangle Tool (U) щоб створити шар де буде одна із секцій сайту.



Параметри шару: Blending Options>Drop Shadow


Blending Options>Gradient Overlay



Gradient’s parameters:


Одержали:


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


Параметри шару: Fill 0% Blending Options>Stroke


Одержали:


Потім нам оведеться вибрати два інструменти й створити один елемент, що буде на магистрале сайту. Виберіть Rectangle Tool (U) і створіть первісний шар, а потім клацніть по кнопці Alt, у теж вермя візьміть Ellipse Tool (U) і виділите 2 рази (як показано на малюнку), щоб вирізати непотрібні елементи.



Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Тепер створіть інший елемент магістралі, що должнен бути розміщений зверху й посередине. Зробити його ми повинні за допомогою Rectangle Tool (U).



Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Використовуйте Line Tool (U), пробуйте зробити дві вертикальних лінії уздовж країв недавно створеної смуги, пофарбуйте їх в #8D8D8D.



Візьміть Pencil Tool (щоб підвести подвійну вертикальну рису на формі, де будуть кнопки, дивимося скрин:


Параметри шару: Blending mode-Soft Light


Зробіть дублікат шару й поставте його праворуч, паралельно цьому.


Візьміть Ellipse Tool (U) і створіть шар для логотипа сайту.


Параметри шару: Blending Options>Outer Glow


Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Використовуючи попередній інструмент, створіть наступний шар, також для логотипа.


Параметри шару: Fill 0% lending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Візьміть Ellipse Tool (U), створіть ще один шар поменше, знову ж для логотипа. Красимо в #0A0F12.


Параметри шару: Blending Options>Stroke


Одержали:


Виберіть востаннє Ellipse Tool (U), щоб намалювати спалах на логотипі.


Параметри шару: Fill 0% Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Затисніть кнопку Alt і натисніть мишею між шарами, після цього спалах буде застосована в межах шару з логотипом.


Одержали:


Виберіть Ellipse Tool (U), щоб створити шар, для доповнення логотипа.


Параметри шару: Fill 0% Blending Options>Outer Glow


Blending Options>Inner Glow


Blending Options>Stroke


Одержали:


Наступний крок включає створення спеціальної секції, розташованої з лівої сторони сайту.

Беремо Rectangle Tool (U) для цієї операції.



Параметри шару: Fill 0% Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Зробіть копію нового зробленого шару й виберіть Free Transform, щоб повернути копію й розмістити її парралельно, дивитеся наступний малюнок:


Використовуючи три лінії , створені з рисок , викличте панель настроювання шрифтів і встановите такі параметри як на скрине..


(найнижча лінія)


(Вищі лінії).

Blending Options>Drop Shadow


Одержали:


От такий у вас повинен вийде результат:


Ідемо далі...Уведіть після цієї назви кнопок для на загаловке сайту.



Напишіть також заголовок логотипа сайту, як на скрине.



Параметри шару: Blending Options>Gradient Overlay


Gradient’s parameters:


Одержали:


Назвіть секції сайту, дивимося скриншїти.

(about me)


(portfolio)


Вставте текст у названу секцію “about me”, дивитеся скриншїт:


(orange text)


(the rest of the text)


Вставте скриншїти наших проектів у наступну секцію “portfolio”. Параметри шарів(дивимося скриншїти) Blending Options>Stroke



Остання стадія включає додавання авторського права сайту:



Джерело: photoweb.com.ua