Ещё больше уроков в нашей группе Вконтакте!





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

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


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

Подсказка

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

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

В этом уроке вы научитесь создавать стильный и профессиональный веб-сайт для бизнес компании.



Web дизайн для бизнес сайта


1. Создайте новый документ размером 766×792 px и разрешением 72 dpi. Залейте фон цветом #6D6D6D.



Web дизайн для бизнес сайта


2. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте нижний слой панели сайта белого цвета.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Обводка:



Web дизайн для бизнес сайта


6. При помощи инструмента Прямоугольник (Rectangle Tool) создайте продолжение уже созданного слоя.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Обводка:



Web дизайн для бизнес сайта


8. Используя тот же инструмент Прямоугольник (Rectangle Tool), создайте теперь панель для кнопок меню, расположенную на заголовке сайта.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Обводка:



Web дизайн для бизнес сайта


10. С помощью инструмента Перо (Pen Tool) нарисуйте разделение между кнопками меню. Цвет разделения - белый.



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


12. Сделайте 3 копии созданного слоя и расположите их так, как показано в рисунке ниже:



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


15. Снова выберите инструмент Прямоугольник (Rectangle Tool) и создайте специальное окно поисковой системы. Цвет окна - белый.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


17. Тем же инструментом Прямоугольник (Rectangle Tool) создайте кнопку поисковой системы, также белого цвета.



Web дизайн для бизнес сайта


18. Теперь напишите название для окна поисковой системы. Настройки для названия окна:



Web дизайн для бизнес сайта


Настройки для названия кнопки:



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


19. Теперь вставьте название сайта. Настройки для “business solutions”:



Web дизайн для бизнес сайта


Настройки для “providing best solutions”:



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


21. При помощи инструмента Эллипс (Ellipse Tool) создайте основу для логотипа сайта, цветом #FC9200.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


23. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите соответствующий символ и вставьте его в наш рисунок:



Web дизайн для бизнес сайта


Цвет элемента - белый.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


25. Теперь вставьте фотографию на заголовок сайта.



Web дизайн для бизнес сайта


26. Примените для фотографии стиль Внутренняя тень (Layer Style - Inner Shadow).



Web дизайн для бизнес сайта


27. Инструмент Прямоугольник (Rectangle Tool) поможет создать тень полосы на основании раздела сайта.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


29. Теперь выберите инструмент Карандаш (Pencil Tool) и нарисуйте непрерывную линию, предназначенную для названия раздела сайта.



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


30. Скопируйте созданный слой и расположите копию так, как показано в рисунке ниже:



Web дизайн для бизнес сайта


31. Выберите фотографии, как на рисунке ниже, и расположите их под полосами.



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


33. Вставьте названия разделов сайта. Настройки для “company, services”:



Web дизайн для бизнес сайта


Настройки для “profile, overview”:



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


34. Теперь вставьте текст в разделы сайта. Настройки для текста зелёного цвета:



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


35. Затем добавьте ещё немного текста, соблюдая нижеуказанные инструкции:



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


36. С помощью инструмента Карандаш (Pencil Tool) нарисуйте 3 треугольника цветом #858687.



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


37. Используя тот же инструмент Карандаш (Pencil Tool), нарисуйте 2 параллельные полосы.



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


38. Скопируйте новый созданный слой и расположите копию, как показано ниже:



Web дизайн для бизнес сайта


39. Вставьте текст новостей. Настройки для даты:



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


40. Теперь напишите названия разделов. Настройки для “NEWS&EVENTS, ADRESSES”:



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


42. Затем заполните раздел “ADRESSES”. Настройки для жёлтого текста:



Web дизайн для бизнес сайта


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



Web дизайн для бизнес сайта


Web дизайн для бизнес сайта







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

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

Ваше Имя

Ваш E-mail

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

Введите код: