Рубрика: Photoshop Уроки | Урок прочитали: 356
 (голосов: 0)

Дизайн для делового сайта в Фотошоп

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

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

Создаем новый документ в Photoshop размером 1000х1100px. Заливаем фон цветом #2c2c2c. Качаем набор текстур 200 Photoshop seamless pixel patterns.

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

Загружаем текстуры в программу, создаем заготовку для шапки, как показано на рисунке, используя инструмент Rectangle (Прямоугольник).

Указываем следующие стили для слоя:

Нужную текстуру вы найдете здесь:

Если вам не нравится эта текстура, поэкспериментируйте с другими – возможно, какая-та из них вам понравится больше.

Так получилось у меня:

С помощью инструмента Pen Tool (Перо) рисуем кнопку в самом верху шапки, как показано на рисунке:

Указываем следующие стили для слоя с шапкой:

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

Создаём ещё один «квадрат», как в самом начале урока, сразу после шапки. Я использовал  цвет #131313 для фона.

С помощью инструмента Pen Tool (Перо) я нарисовал ещё одну форму. На картинке ниже я выделил её красным цветом, чтобы вам было лучше видна. Заливаем её тем же цветом #131313.

Создать подобную форму будет проще, если вы используете сетку (Ctrl+”).

Далее объединяем предыдущие последние два слоя в один. Для этого выделяем оба слоя и жмем Ctrl+E. Применяем к получившемуся слою следующие стили:

Вот, что в итоге получилось у меня. Пожалуйста, кликните по картинке ниже и рассмотрите лучше в полном размере.

С помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными краями) создаем несколько форм, как показано ниже:

Выделяем все созданные в предыдущем шаге слои и объединяем их в один, нажав Ctrl+E. Применяем следующие стили:

Как вы догадались, это будущее слайдшоу. Так получилось у меня:

С помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными краями) создаем ещё две формы. Верхняя форма предназначена для формы поиска, нижняя – это сайдбар для перечня последних записей, или любого другого виджета.

Для последних двух форм применяем следующие стили:

Используя инструмент Pen Tool (Перо), создаем ещё одну форму в самом низу макета:

Для стилей слоя я использовал те же стили, что и при создании слайдшоу.

Рисуем маленькие кружочки серого цвета по бокам и размещаем слой с этими кружочками сразу после фонового слоя. Должно получиться так:

Теперь разбавим пока что скучный макет картинками. Я использовал Эффект Боке.

Последний штрих – добавим текст.

И готово!

?
           

Похожие файлы и публикации:

Дизайн для делового сайта в Фотошоп
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Дизайн для делового сайта в Фотошоп
В этом уроке мы создадим текстурированный макет сайта, используя относительно небольшое количество изображений. Это проще, чем вы думаете. Вы быстро освоите эту «науку». Для пользователей среднего уровня владения Photoshop работа займет меньше часа, а по ходу дела вы узнаете несколько профессиональных секретов. Давайте приступим.
Дизайн для делового сайта в Фотошоп
Из этого  урока Вы узнаете, как создать стильный макет для корпоративного сайта.
Дизайн для делового сайта в Фотошоп
Как всегда, вот то, что мы получим в итоге:
Дизайн для делового сайта в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Дизайн для делового сайта в Фотошоп
В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!
Дизайн для делового сайта в Фотошоп
В этом уроке вы узнаете, как с помощью Photoshop создать простое и стильное выпадающее меню.
Дизайн для делового сайта в Фотошоп
Начнем наш урок с создания нового документа размером 960 x 900 пикселей. Я установил цвет переднего плана  #141414, затем, взяв инструмент Paint Bucket Tool (Заливка), кликнул один раз по изображению. Я взял инструмент Brush Tool (Кисть), и, выбрав мягкую круглую кисть, нарисовал на новом слое три большие точки на изображении, используя следующие цвета: #a864a8, #ed1c24, #662d91.
Дизайн для делового сайта в Фотошоп
Создайте новый документ произвольного размера. Чтобы края вашей сим-карты были закруглены, возьмите инструмент rounded rectangle tool (u) (прямоугольник с закругленными углами), нарисуйте прямоугольник и заполните его цветом, каким захотите.
Дизайн для делового сайта в Фотошоп
В этом уроке я покажу вам, как создать интересную сияющую кнопку в Фотошоп.
Дизайн для делового сайта в Фотошоп
Вот что мы должны получить:
Дизайн для делового сайта в Фотошоп
Сегодня вы узнаете, как создать бумажный текстовый эффект с загнутыми краями в Фотошопе. Сначала мы создадим фон, используя несколько текстур, затем мы поработаем над текстом с помощью Pen Tool (Перо) (P), слой-маски и других инструментов, таких как, Dodge Tool (Осветлитель) (O), Burn Tool (Затемнитель) (O) и Трансформации.
Дизайн для делового сайта в Фотошоп
В этом уроке вы узнаете, как создать футуристический велосипед, используя базовые инструменты Photoshop. Начнем!
Дизайн для делового сайта в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Дизайн для делового сайта в Фотошоп
Помните те времена, когда были популярны кассетные магнитофоны? The Rolling Stones, Beatles и Ozzy Osborne были королями! Великолепные воспоминания, не правда ли? И, конечно же, вы помните какие тогда были магнитофоны. Они были значительно больше iPad, но никто не жаловался! В этом уроке мы воссоздадим кассетный магнитофон 80-ых, используя Фотошоп.
Дизайн для делового сайта в Фотошоп
В этом уроке я покажу вам, как создать гранж-фон.
Дизайн для делового сайта в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки: