Как сделать сайт на html > Как сделать дизайн сайта > Уроки PhotoShop

Создаем в Фотошоп Реалистичный 3D Блюпринт

Подробный, обстоятельный и щедро иллюстрированный урок по созданию в фотошоп привлекательного рисунка с абстрактной надписью, стилизованного под чертеж, выполненный на голубом листе бумаги с завернутым в рулон краем. Рисунок создан с применением техники 3D эффекта и может использоваться, как самостоятельный графический элемент, или в качестве компонента композиции, например для шапки сайта. Применяемые в уроке приемы и эффекты можно применять для многих графических элементов в веб-дизайне.
веб графика
Прежде всего, открываем новый документ размером: 800 x 800 пикселей с белым фоном. В качестве основного устанавливаем цвет #196cca.
веб графика
Берем Прямоугольник (Rectangle Tool) и рисуем простую форму:
веб графика
Теперь можно скачать шрифт: sketch-block.font
Установив шрифт, напишите белым цветом какой-нибудь текст на вашей синей форме.
веб графика
Выбираем Прямоугольную область (Rectangular Marquee Tool) и создаем выделение, как на рисунке ниже:
веб графика 6
Добавляем новый слой (CTRL + SHIFT + ALT + N). Следующим шагом будет Редактирование > Выполнить Обводку (Edit> Stroke).
веб графика
Используем такие настройки:
веб графика
После нажатия на кнопку OK не забываем снять выделение (CTRL + D).
веб графика
Теперь создадим новый узор. Для этого необходим новый документ размером 60 x 60 пикселей с прозрачным фоном (transparent background).
веб графика
Масштаб документа желательно увеличить до 500%. Можно использовать Панель навигатора (navigator panel). Если у вас не открыта эта панель, нужно перейти Окно > Навигатор (Windows> Navigator).
веб графика
Выбираем инструмент Карандаш (Pencil Tool) и устанавливаем размер кисти 2 пикс.
веб графика
Проводим две линии в документе: слева и снизу (я создал на время слой с цветным фоном, чтобы было понятно, что я делаю).
Линии будут прямые, если их проводить с нажатой клавишей (Shift).
веб графика
Уменьшаем размер кисти до 1 пикселя и проводим другие две тонких линии, как на рисунке:
веб графика
Удаляем синий слой и вот наш результат:
веб графика
Заходим в Редактирование > Определить узор (Edit > Define Pattern).
веб графика
Присваиваем имя нашему узору и жмем ОК. Теперь можно закрыть этот документ, потому что мы больше не нуждаемся в нем.
Теперь на новом слое (CTRL+SHIFT+ALT+N) выделяем Прямоугольную область ( Rectangular Marquee Tool).
16.jpg
Выбираем инструмент Заливка (Paint Bucket Tool), в панели инструментов меняем основной цвет на регулярный, находим наш новый узор и щелкаем мышкой один раз на нашем документе, затем снимаем выделение (CTRL+D).
веб графика
Примечание: Скачайте огромный набор пиксельных узоров для фотошоп.
веб графика
Перетаскиваем этот слой, расположив над слоем с синей формой, и уменьшаем его непрозрачность до 10%.
веб графика
Создаем новый слой (CTRL + SHIFT + ALT + N), расположив его поверх всех слоев, а затем с помощью инструмента Карандаш(Pencil Tool) и размером кисти 1 пиксель проводим несколько линий, как на рисунке:
веб графика
Берем Ластик (Eraser Tool) и, выбрав мягкую, круглую кисть слегка стираем концы линий. Если внимательно посмотреть, то видно, что концы линий похоже на тонкие стрелки. Это как раз тот эффект, который нам нужен.
веб графика
Теперь нарисуем несколько белых кружочков инструментом Эллипс (Ellipse Tool). Создавая круг, удерживаем клавишу Shift, чтобы окружности были правильными.
веб графика
Для всех этих кружочков добавляем одинаковые настройки стилей слоя:
веб графика
Результат должен быть таким:
веб графика
Затем я добавил некоторые детали с другими узорами. Вы можете скачать мой огромный набор пиксельных узоров по ссылке, указанной выше.
веб графика
Теперь выбираем в Палитре слоев (layer palette) слой с текстом Grafpedia и дублируем выбранный слой, нажав CTRL+J.
веб графика
Идем в Фильтр > Размытие > размытие по Гауссу (Filter> Blur> Gaussian Blur). Нам будет предложено растрировать слой, жмем OK. В настройках используем большое значение радиуса, 20 пикселей.
веб графика
Меняем режим смешивания этого слоя на Перекрытие (Overlay) и вот результат:
веб графика
Теперь преобразуем эту плоскую картинку в красивый 3D блюпринт. Для этого нужно работать только на одном слое, поэтому мы выделяем все слои в палитре слоев (удерживая CTRL, щелкаем по каждому слою, за исключением фонового), затем перетаскиваем все слои на иконку создать новый слой (Create new layer), расположенную в нижней части панели слоев.
веб графика
Проделав это, мы увидим, что все слои продублированы. Если ничего не трогать, то все продублированные слои будут выделены. Теперь нужно нажать Ctrl+E, чтобы объединить все слои в один. Все остальное можно пока скрыть за ненадобностью. Мы вернемся к нему, если захотим что-то изменить.
веб графика
С этого момента мы будем работать только с этим общим слоем. Выбрав Перо (Pen Tool), рисуем незатейливую и форму, как на рисунке. В палитре слоев она появится в новом слое.
веб графика
Щелкаем правой кнопкой по этому слою и выбираем команду Растрировать Слой (Rasterize Layer).
веб графика
Затем переходим в стиль слоя и выбираем Наложение Градиента (Gradient Overlay) со следующими параметрами:
веб графика
Вы можете найти нужный градиент в одной из самых больших (из доступных) коллекции градиентов для фотошоп .
Результат должен получиться примерно таким:
веб графика
Теперь берем инструмент Овальная область (Eliptical Marquee Tool) и создаем небольшое круглое выделение в нижней, левой части нашего проекта.
веб графика
Затем жмем на клавиатуре кнопку Delete, убедившись прежде, что выбран последний слой, сделанный пером.
веб графика
Теперь несколько раз щелкаем по клавише "стрелка вверх", пока не совместим кольцо выделения с нижним краем проекта.
веб графика
Инвертируем выделение, нажав CTRL+SHIFT+I (или зайдя в Выделение > Инверсия).
веб графика
Выбираем слой с проектом иЛастиком(Eraser Tool) стираем все лишнее в нижней левой части изображения.
веб графика
Теперь выделениеможно снять (CTRL+D). Далее мы дублируем"свернутый" слой.
Далее мы дублируем

Затем выделяем оба эти слоя в палитре слоев и объединяем их вместе (CTRL+E), чтобы слить в один.
Ничего не произошло. Мы сделали этот шаг, потому что на следующем собираемся использовать инструмент Осветлитель (Dodge Tool), чтобы добавить немного света. Если мы захотим применить инструментОсветлитель(Dodge Tool) илиЗатемнитель(Burn Tool) к слою со стилями, мы не увидите эффекта. Вот почему мы объединили два слоя.
Итак, мы будем использовать инструмент Осветлитель (Dodge Tool) со следующими настройками:
веб графика
Выбираем мягкую, круглуюкисть(Smooth Round brush) размером 80 пикселей и щелкаем один раз в торце "завернутого" левого края макета, как на рисунке:
Далее мы дублируем
Затем, удерживая Shift, щелкаем кистью сверху, опять же, как на рисунке, и не иначе:
веб дизайн
Пока не видно большой разницы, но мы увидите ее в следующих шагах. Уменьшаем размер кисти до 60 пикселей и несколько раз повторяем предыдущую пару действий, постепенно уменьшая кисть до 10 пикселей.
веб дизайн
Затем, перейдя на другой (общий) слой, закрашиваем лишние отрезки белых линий с помощьюКисти(Brush Tool), выбрав для нее цвет окружающего фона.
веб дизайн
Теперь инструментомЛиния(Line Tool) рисуем белую линию толщиной 3 пикселя, как на рисунке:
веб дизайн
Затем переходим вРедактирование>Трансформирование>Деформация(Edit>Transform>Warp) и изменяем линию так, чтобы, получить хороший результат.
веб дизайн
Далее мы снова выбираем "свернутый" слой и переходим вИзображение > Коррекция > Обесцветить(Image> Adjustmens> Desaturate).
веб дизайн
Теперь мы сделаем красивый 3D эффект, о котором говорилось в начале. Выбираем все слои в нашей палитре (без фонового слоя) и сливаем их в один (CTRL+E). Затем переходим вРедактирование>Трансформирование>Наклон(Edit>Transform>Skew) и экспериментируем с углами проекта до тех пор, пока не добьемся желаемого результата.
веб дизайн
Для этого слоя мы добавим простой стиль слоя с тенью:
веб дизайн
Результат будет таким:
веб дизайн
Можно также применить другую деформацию. Зайдем вРедактирование >Трансформирование > Деформация(Edit > Transform > Warp) и поиграем с эскизом.
веб дизайн
Выбираем инструментЛассо(Lasso Tool) и создаем вот такое выделение:
веб дизайн
Затем инструментамиЗатемнитель(Burn Tool) иОсветлитель(Dodge Tool) добавляем немного тени и света. Вот результат:
веб дизайн
Теперь создаем новый слой выше всех остальных (CTRL+SHIFT+ALT+N). Затем мягкой, белойКистью(Brush Tool) размером 500 пикселей щелкаем один раз над изображением.
веб дизайн
Режим наложения меняем наПерекрытие(Overlay) и уменьшаем непрозрачность до 80%.
веб дизайн
Вот наш окончательный результат:
веб дизайн
Можно продублировать свой эскиз, а затем сдвинуть и деформировать "по вкусу".
веб дизайн


Меню сайта

Создаем в Фотошоп Реалистичный 3D Блюпринт
Создаем в Фотошоп Реалистичный 3D Блюпринт