Рисуем стильный вэб 2.0 сontent box используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В этом уроке вы научитесь создавать стильный WEB 2.0 сontent box используя Фотошоп.


Финальный результат

Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Приступаем к уроку Фотошопа


1. Создаем новый документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

2. Используя Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") с радиусом 10 px, чтобы сделать фигуру как на картинке ниже. ↓


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Потом идем в Layer > Rasterize > Shape (Слой > Растрировать > Фигура).


3. Теперь используя Ctrl нажмем на слой с фигурой (на иконке слоя в панели слоев), и вокруг этой фигуры должно появится выдиление.

Когда вы сделаете это выбирите Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M"), нажмите Alt и сделайте выделение как показано на картинке ниже. ↓


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Вот что у вас должно получится когда вы отпустите кнопку мыши. ↓


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

4. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и залейте это выдиление любым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).

Теперь идем в Layer > Layer styles > Inner Glow (Меню: Слой > Стиль слоя > Внутреннее свечение...), и выбираем белый цвет.


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Теперь Gradient Overlay (Наложение градиента).


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Рисуем стильный вэб 2.0 сontent box используя Фотошоп

И наконец Stroke (Обводка).


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Теперь у вас есть стиль WEB 2.0.


5. Теперь залейте ваш самый первый слой белым цветом и сделайте Stroke (Обводка).

Как на картинке выше.

Это то что должно у вас получится. ↓


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

6. Теперь вы можете добавить иконки, надписи, шейпы.


Рисуем стильный вэб 2.0 сontent box используя Фотошоп

7. Сейчас скопируйте вашу верхнюю панель, переверните ее и переместите ее вниз, это будет футер.


Теперь используя свою фантазию добавте что-то чтобы украсить ваш content box.


Финальный результат

Рисуем стильный вэб 2.0 сontent box используя Фотошоп

Спасибо за внимание, надеюсь этот урок вам пригодится. Рисуем стильный вэб 2.0 сontent box используя Фотошоп


Урок подготовлен для Вас командой сайта PhotoshopPro.ru