Мы запустили Форум! (*beta)






Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа! Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ

Подробнее...




сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Данный урок покажет вам как разработать современный сайт.



Современный web дизайн


1. Создайте новый документ размером 820×790 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон сайта.



Современный web дизайн


2. Примените для фона стиль Наложение градиента (Layer Style - Gradient Overlay).



Современный web дизайн


Настройки градиента:



Современный web дизайн


3. Теперь выберите инструмент Перо (Pen Tool) и нарисуйте несколько лучей.



Современный web дизайн


4. Примените для слоя стиль Наложение цвета (Layer Style - Color Overlay).



Современный web дизайн


5. Объедините в группу все слои, составляющие лучи. Установите для группы Режим наложения – Точечный свет (Blending Mode – Pin Light) и Непрозрачность (Opacity) слоя - 64%.



Современный web дизайн


6. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой панели и разделов сайта, цветом #E3E3E3.



Современный web дизайн


7. Примените для слоя стиль Обводка (Layer Style - Stroke).



Современный web дизайн


8. Создайте новый слой (Create New Layer), выберите стандартную Кисть (Brush Tool) и обрисуйте белым цветом, как показано ниже:



Современный web дизайн


9. Удерживая Alt, кликните между слоем кисти и панелью сайта.



Современный web дизайн


10. Используя предыдущий инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool), создайте раздел сайта белого цвета:



Современный web дизайн


11. Примените для раздела стиль Обводка (Layer Style - Stroke).



Современный web дизайн


12. Создайте новый слой (Create New Layer) и выберите инструмент Кисть (Brush Tool), кликнув на слой рисунка.



Современный web дизайн


13. Теперь нам необходимо использовать инструмент Пипетка (Eyedropper Tool) и кисть, чтобы кликнуть на те места панели сайта, которые должны выглядеть размытыми, возле фона сайта.



Современный web дизайн


14. При помощи инструмента Линия (Line Tool) создайте тип календарной таблицы белого цвета (удерживая клавишу Shift).



Современный web дизайн


Современный web дизайн


15. Инструментом Прямоугольник (Rectangle Tool) создайте указатель текущего дня цветом #F2F2F2.



Современный web дизайн


16. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой, предназначенный для кнопок меню сайта.



Современный web дизайн


17. Примените для слоя стиль Отбрасывание тени (Layer Style - Drop Shadow).



Современный web дизайн


Наложение градиента:



Современный web дизайн


Настройки градиента:



Современный web дизайн


18. Скопируйте последний слой и скройте следующие эффекты: Отбрасывание тени
(Layer Style - Drop Shadow), Наложение градиента (Layer Style - Gradient Overlay) (правой кнопкой мыши нажмите на эффекты в палитре слоёв).



Современный web дизайн


Современный web дизайн


19. Слой с эффектом Отбрасывание тени (Layer Style - Drop Shadow) может быть подкорректирован инструментом Ластик (Eraser Tool). Примените для копии слоя стиль Обводка (Layer Style - Stroke).



Современный web дизайн


20. Сделайте видимым слой оригинала.



Современный web дизайн


21. Теперь нам необходимо нарисовать часть кнопки с помощью инструмента Эллипс
(Ellipse Tool).



Современный web дизайн


Современный web дизайн


22. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).



Современный web дизайн


Настройки градиента:



Современный web дизайн


23. Сделайте 4 копии последнего слоя и расположите их так, как показано в следующем рисунке:



Современный web дизайн


24. Теперь изобразите деление между кнопками, состоящее из маленьких точек. Настройки указаны ниже:



Современный web дизайн


Современный web дизайн


Современный web дизайн


25. Вставьте названия кнопок меню, соблюдая нижеуказанные настройки:



Современный web дизайн


Современный web дизайн


26. Теперь напишите название сайта, соблюдая требования ниже:



Современный web дизайн


27. Примените для надписи стиль Обводка (Layer Style - Stroke).



Современный web дизайн


Современный web дизайн


28. Заполните наш календарь. Настройки для чисел:



Современный web дизайн


Настройки для дней недели:



Современный web дизайн


Современный web дизайн


29. Напишите название календаря, соблюдая нижеуказанные настройки:



Современный web дизайн


Современный web дизайн


30. Создайте несколько специальных кнопок на верхней части сайта. Настройки указаны ниже:



Современный web дизайн


Современный web дизайн


31. Выберите инструмент Линия (Line Tool) и нарисуйте 2 разделительные вертикальные полосы цветом #DA6900.



Современный web дизайн


32. Заполните остальные разделы соответствующим текстом. Настройки для “Lorem ipsum dolor”:



Современный web дизайн


Настройки для основного текста:



Современный web дизайн


Настройки для подчёркнутого текста:



Современный web дизайн


Современный web дизайн


33. Создайте новый слой (Create New Layer) и выделите определённую зону инструментом Прямоугольная область (Rectangular Marquee Tool), а также используйте ранее применяемую кисть белого цвета для того, чтобы подчеркнуть правый край:



Современный web дизайн


Современный web дизайн


34. Скопируйте этот слой и в режиме Свободного трансформирования (Free Transform) зеркально отразите копию. При помощи инструмента Затемнитель (Burn Tool) затемните край оригинала.



Современный web дизайн


Современный web дизайн


35. Примените тот же метод в горизонтальной позиции.



Современный web дизайн


36. Используя инструмент Затемнитель (Burn Tool), затемните зеркальную копию:



Современный web дизайн


37. Выберите инструмент Кисть (Brush Tool) белого цвета на новом слое (Create New Layer) и добавьте несколько штрихов, как в рисунке ниже (расположите этот слой под слоем названия сайта).



Современный web дизайн


Современный web дизайн







Ссылка на источник урока

написал : сергей

Спасибо!Класс

---------------


написал : Сергей

классный , тоже так научусь , web 2.0 smile

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: