Гранжевый дизайн сайта

1. Создайте новый документ размером 1200×1300 px и разрешением 72 dpi. При помощи инструмента Заливка (Paint Bucket Tool) залейте фон чёрным цветом:



Гранжевый дизайн сайта


2. При помощи инструмента Прямоугольная область (Rectangular Marquee Tool) выделите соответствующую зону участка на новом слое (Create New Layer). Инструментом Заливка
(Paint Bucket Tool) залейте область цветом #2F8E8D.



Гранжевый дизайн сайта


3. Загрузите набор кистей brushes для Adobe Photoshop: grunge procedural. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв и примените вышеуказанные кисти. Обрисуйте зелёный фон чёрным цветом.



Гранжевый дизайн сайта


Гранжевый дизайн сайта


4. Создайте новый слой (Create New Layer) и используйте на нём кисти grunge procedural для создания нескольких пятен.



Гранжевый дизайн сайта


5. Удерживая Alt, кликните между слоями:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


6. Создайте новый слой (Create New Layer) и инструментом Прямоугольная область
(Rectangular Marquee Tool) выделите зону квадрата, затем инструментом Заливка (Paint Bucket Tool) залейте область цветом #A8AFB2.



Гранжевый дизайн сайта


7. Инструмент Прямоугольная область (Rectangular Marquee Tool) поможет вставить тонкую выделенную полосу:



Гранжевый дизайн сайта


8. В режиме Свободного трансформирования (Free Transform) немного наклоните полосу и расположите её над серым квадратом на левой стороне.



Гранжевый дизайн сайта


9. Вырежьте несколько отверстий в сером квадрате.



Гранжевый дизайн сайта


10. При помощи инструмента Произвольная фигура (Custom Shape Tool) нарисуйте 2 маленькие звезды чёрного и белого цвета. Расположите их на правой стороне участка.



Гранжевый дизайн сайта


Гранжевый дизайн сайта


Гранжевый дизайн сайта


11. Скопируйте слой чёрной звезды. Выделите внутренние вершины копии и выберите инструмент Преобразовать точку привязки (Convert Point Tool) (нажатием клавиши Shift), в режиме Свободного трансформирования (Free Transform) сожмите копию. Цвет копии — #3E9D49.



Гранжевый дизайн сайта


12. Скопируйте слой зелёной звезды и в режиме Свободного трансформирования
(Free Transform) измените размер копии и расположите её, как показано ниже. Измените цвет копии на чёрный.



Гранжевый дизайн сайта


13. При помощи инструмента Произвольная фигура (Custom Shape Tool) нарисуйте кольцо цветом #7AC255 на правой стороне зелёной звезды.



Гранжевый дизайн сайта


Гранжевый дизайн сайта


14. Выберите инструмент Прямоугольник (Rectangle Tool) для создания следующего слоя участка белого цвета.



Гранжевый дизайн сайта


15. Объедините в группу все слои, содержащие верхнюю панель участка. инструментом Свободное трансформирование (Free Transform) переместите копию группы на основание.



Гранжевый дизайн сайта


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



Гранжевый дизайн сайта


17. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 15 px), создайте панель для логотипа цветом #E10811.



Гранжевый дизайн сайта


18. Примените для панели стиль Внутреннее свечение (Layer Style — Inner Glow).



Гранжевый дизайн сайта


Гранжевый дизайн сайта


19. Вставьте название сайта:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


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



Гранжевый дизайн сайта


Гранжевый дизайн сайта


21. Вставьте названия кнопок на панеле меню:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


Гранжевый дизайн сайта


22. Под панелью меню, содержащей кнопки, вставьте секцию “About me”:



Гранжевый дизайн сайта


Текст основной секции:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


23. При помощи инструмента Прямоугольник (Rectangle Tool) вставьте кнопку под текстом цветом #D40610.



Гранжевый дизайн сайта


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



Гранжевый дизайн сайта


Внутреннее свечение:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


25. Вставьте название на кнопке:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


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



Гранжевый дизайн сайта


Гранжевый дизайн сайта


27. При помощи инструмента Линия (Line Tool) создайте границы между разделами сайта цветом #B4B4B4.



Гранжевый дизайн сайта


28. Добавьте маску слоя, нажав на иконку внизу палитры слоёв и используйте кисти из набора grunge procedural для обрисовки чёрным цветом линий выделения (Непрозрачность (Opacity) — 20%).



Гранжевый дизайн сайта


29. Вставьте название раздела:



Гранжевый дизайн сайта


Основной текст раздела:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


30. Сделайте 2 копии слоя, содержащего название и текст раздела. В режиме Свободного трансформирования (Free Transform) расположите копии, как на рисунке ниже:



Гранжевый дизайн сайта


31. Под текстом раздела, на левой стороне нарисуйте кнопку цветом #262626 инструментом Прямоугольник (Rectangle Tool).



Гранжевый дизайн сайта


32. Примените для кнопки стиль Внутреннее свечение (Layer Style — Inner Glow).



Гранжевый дизайн сайта


Гранжевый дизайн сайта


33. Скопируйте слой кнопки 2 раза и инструментом Свободное трансформирование
(Free Transform) расположите копии, как показано ниже. Одну копию расположите слева без изменений (пож нижним разделом), а вторую копию расположите в центре и измените цвет на #D40610. Примените для копии стиль Внутреннее свечение (Layer Style — Inner Glow).



Гранжевый дизайн сайта


Гранжевый дизайн сайта


34. Вставьте название кнопки:



Гранжевый дизайн сайта


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



Гранжевый дизайн сайта


Гранжевый дизайн сайта


36. Сделайте 2 копии слоя, содержащего название кнопки, и в режиме Свободного трансформирования (Free Transform) расположите копии, как на рисунке ниже:



Гранжевый дизайн сайта


37. На правой стороне кнопки вставьте надпись “12 Comments”:



Гранжевый дизайн сайта


”Posted by”:



Гранжевый дизайн сайта


”admin”:



Гранжевый дизайн сайта


Гранжевый дизайн сайта


38. Скопируйте слой надписи 2 раза и в режиме Свободного трансформирования (Free Transform) расположите копии, как в следующем рисунке:



Гранжевый дизайн сайта


39. Вставьте ещё один раздел на верхней части панели разделов:



Гранжевый дизайн сайта


Название раздела:



Гранжевый дизайн сайта


Текст раздела:



Гранжевый дизайн сайта


39. Теперь вставьте раздел категорий под последним разделом:



Гранжевый дизайн сайта


Название раздела:



Гранжевый дизайн сайта


Название категорий:



Гранжевый дизайн сайта


40. Выберите инструмент Кисть (Brush Tool):



Гранжевый дизайн сайта


41. Создайте новый слой (Create New Layer) и используйте кисть и цвет #AFB57B между названиями категорий, затем измените цвет кисти на #E7E9D7 и обрисуйте название категории на левой и правой сторонах.



Гранжевый дизайн сайта


42. Сделайте 4 копии слоя прерывистой линии и в режиме Свободного трансформирования
(Free Transform) расположите их, как на рисунке:



Гранжевый дизайн сайта


Гранжевый дизайн сайта






Делаем Web-дизайн

Вас может также заинтересовать:

22 апреля 2018

Зеркальная камера старшего любительского уровня. К-МОП матрица 16 Мп формата APS-C, монитор 3" 921000 точек, затвор на 150000 срабатываний, новый 39-точечный автофокус с 3D-слежением, 2016 зон экспозамера, диапазон ISO 100–25600, серийная съемка 6 кадров/сек, режим «живого вида» с четырьма типами АФ, внутрикамерная обработка снимков (в том числе RAW), видео Full HD 1920x1080@24 с управлением параметрами, электронный уровень, два слота карт памяти SD.

22 апреля 2018

FinePix F770EXR и FinePix F750EXR открывают новые возможности небольших фотокамер благодаря безупречным техническим характеристикам и объективу с 20-кратным оптическим зумом. Основными особенностями новинок являются широкий диапазон фокусных расстояний объектива, улучшенная 16-мегапиксельная матрица EXR-CMOS, усовершенствованные функции GPS, а также стильный дизайном и компактные размеры. Высокая производительность и карманный формат этих фотокамер обеспечивают широкие возможности съемки для семей и путешественников.