Создаем макет сайта, продающий програмное обеспечение.

Tags: Уроки Photoshop | уроки web дизайна | уроки веб дизайна

В этом уроке создадим макет сайта в темных тонах, который продает программное обеспечение. Этот урок очень легкий, поэтому даже новички смогут создать макет менее чем за 2 часа.

 

Создадим новый документ размером 1000*1100 пикселей.Изменим цвет переднего плана на # 202020 и инструментом заливка заполним наш документ. Далее инструментом прямоугольник создадим две формы на нашем макете  цвет будет # 191919.

Для обеих форм я добавлю одинаковые стили:

Вот результат.

Далее инструментом Прямоугольник со скругленными углами создадим 3 формы в центре нашего макета.

Всем трем формам зададим одинаковые стили:

Вот результат:

Создадим другую форму темнее цвета чем наши предыдущие и растрируйте. Чтобы растрировать форму нужно кликнуть по слою в палитре слоев правой кнопкой мыши и выбрать пункт Растрировать слой.

Далее у растрированных форм мы убираем низ и таким образом получаем отражение для наших основных окон.

Создадим инструментом Прямоугольник со скругленными углами уще одну форму следующего цвета  # 191919.

Применим к этой форме следующие стили:

Вот мой результат:

Далее я хочу создать еще одну форму. Нажмите на следующую картинку, чтобы хорошо увидеть наш макет.

Для самых маленьких форм добавим разные стили слоя, можно использовать различные градиенты, не будем останавливаться на этом, проявите свой творческих подход и выберите любой цвет какой вам понравится.

Вот мой результат:

Инструментом Горизонтальный текст нанесем текст на наш макет.

Далее добавим изображения в центр нашего макета. У меня использован тот же цифровой эффект что  в предыдущем уроке. Если хотите такой же результат рекомендую просмотреть этот урок.

На правой стороне создадим кнопку зеленого цвета. Данная кнопка призывает к действию и поэтому она должна хорошо выделяться и иметь опрятный вид.

Добавим кнопке стили слоя.

Вот как должна у вас выглядеть эта кнопка.

Далее создадим текстовое меню в верхней части макета, а между кнопками создадим несколько линий инструментом Линия. Чтобы создать границы между кнопками создайте две линии разного цвета одну светло-серую, вторую черную.

Вот мой окончательный вариант, надеюсь вам понравился этот урок.

Источник:

AddThis Social Bookmark Button