Получить новую статью

Вставьте здесь свой адрес:

Delivered by FeedBurner

Подписаться на статьи рубрики
Подписаться на статьи рубрики
Подписаться на статьи рубрики
БЫТОВАЯ ТЕХНИКА
новинки, содержание, ремонт
Подписаться на статьи рубрики
СЕРВИСЫ ОНЛАЙН
описание, рекомендации
Подписаться на статьи рубрики
ДИЗАЙН ВЕБ САЙТОВ
советы, показ, нюансы

users online

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

Особое внимание уделялось имитации освещённости, объёмности, создании бликов, использованию обтравочных масок, размытия по Гауссу. Все рисунки и технология даны на базе программы Фото Шоп CS6.

Основой для данной статьи послужил видео курс А. Захаренко  Веб дизайн 2.0. Ниже, шаблон формы регистрации и с него и будем делать такую же форму.

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

Не большая ремарка. Работа с подсветкой через слои на этой странице трудно различима, а у вас в программе ФШ сразу проверяйте, манипулируя «глазом», отключить видимость и включить видимость слоя и будет всё отлично различимо.
Текстурный дизайн формы регистрации

Создаём файл 380рх на 415 рх, фон любой. Выставляем вертикальные направляющие на 40рх и 340рх. В меню просмотр – новая направляющая, вертикальная, прописать эти цифры. 40рх это отступ до тела формы с обеих сторон файла. 40 рх. — отступ до верха формы.

Берём инструмент фигура – прямоугольник с закруглёнными углами, r = 5px, цвет любой тёмного оттенка, отличный от фона и рисуем фигуру 300 на 300 рх от руки.

А если у вас ФШ CS 6 и выше, можно воспользоваться функцией автоматического создания нужной фигуры. Для этого в активном инструменте фигура, 2 щечка ЛКМ по файлу и всплывает поле с окошками, куда надо прописать ширину и высоту фигуры, радиус скругления углов и ок.
Дизайн формы подписки

Дизайн формы регистрации украшают псевдо объёмные формы. Сверху нашей фигуры на шаблоне видна небольшая грань якобы куба.
Сделаем такую грань. Дублируем слой с фигурой, включаем Ctrl + T и слегка уменьшаем нашу сдублированную фигуру. Размещаем слой уменьшенный дубль фигуры под слоем основной фигуры. И поднимаем его над основной фигурой на 10 — 14 рх. точно посередине. Заливаем этот дубль цветом темнее основной фигуры.
p02

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

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

каркас дизайна формы

Теперь накроем каркас текстурой заранее нами подобранной размером 380 на 380рх на отдельном слое сверху передней грани.
текстура передней грани

Текстурный дизайн формы регистрации определяется текстурой подходящей тематике вашей страницы или сайта.

Для лицевой грани. Создаём новый слой непосредственно сверху основной фигуры и прикрепляем его обтравочной маской. ОбтрМ (Удерживая Alt + ЛКМ (левая клавиша мыши) щелчок на границе верхнего слоя c текстурой и нашей фигурой или ПКМ по слою и выбрать – создать обтравочную маску). Отменить действие, точно так же. Видимым остаётся только передняя грань в виде текстуры. Всё остальное исчезает под маской.
передняя грань

Для верхней грани. Создаём слой сверху верхней грани и прикрепляем его ОбтрМ к ней.
Дублируем слой с текстурой с передней грани, масштабируем его Ctrl +T , перемещаем
вверх и располагаем, дубль над слоем верхней грани и прикрепляем его к этой грани обтравочной маской.
Если текстура имеет рисунок типа доски, придётся после перемещения над верхней гранью применить Ctrl+T , повернуть на 90° и использовать параметр перспектива, добиваясь постепенного уменьшения длины досок к концу грани.верхняя грань

Цвето-коррекция граней формы Переходим к цвето-коррекции передней грани. Вызываем уровни командой Ctrl+L.
Если это не получается, придётся растрировать слой с текстурой и потом команду уровни.
Сделаем текстуру более яркой, работая движками.
цвето - коррекция

Производим цвето -коррекцию и с верхней гранью по такой же схеме.
цвето коррекция верхней грани

Придадим некоторую объёмность передней грани. Сначала осветлим переднюю грань сверху и чуть по бокам фигуры.
Добавляем слой сверху, над лицевой гранью, прикрепив его обтравочной маской. Берём кисть белого цвета, Ж=0, р-р 110 рх, проходимся чуть-чуть по краю верха и по углам, лицевой грани. Пример на рисунке.

объёмность формы сверху

Размываем слой – фильтр, размытие, размытие по Гауссу, 36-37рх и Ок. На панели слоёв, режим в выпадающем меню установим — мягкий свет.

подсветка слоя сверху

Продолжаем придавать объёмность передней грани снизу.  Затемним нижнюю часть передней грани. Создаём новый слой над всеми слоями и прикрепим его обтравочной маской к нижнему слою. Берём кисть чёрного цвета, Ж=0, р-р 110 рх и подкрашиваем низ главной текстуры. Рисунок ниже.
затемнение грани снизу

Производим размытие слоя по Гауссу 37-52 рх по своему усмотрению и выставляем режим — мягкий свет. Можно менять прозрачность по своему усмотрению.
затемнение слоя

Переходим к верхней грани.Поменяем её освещённость как на шаблоне...Для этого создаём новый слой над верхней гранью и прикрепляем обтравочной маской.
Берём кисть белого цвета, Ж=0, р-р 100 рх и делаем засветку по бокам. Рисунок ниже.
осветляем грань с боков

Размываем по Гауссу 16-17 рх, но на другом фоне могут быть другие цифры. Выставляем режим — мягкий свет. Верхняя грань по бокам посветлела.
верхняя грань

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

дизайн

Переходим в фильтр, размытие, размытие по Гауссу и выставляем 4-7 рх и Ок.

Форма регистрации

Включаем режим мягкий свет. Верхняя грань размылась  по середине.

размытие по Гауссу

Создадим дополнительное освещение по бокам лицевой грани.Для плавности перехода цветового тона  производим  3 одних и тех же операций, но с разными параметрами. Для этого создаём доп. слой и прикрепляем ОбтрМ . Берём кисть белого цвета Ж=0, р-р 100 рх, и подкрашиваем верхнюю и боковые  стороны.

белую кисть

Размываем -  фильтр, размытие, размытие по Гауссу, 14 рх.

Размытие по Гауссу

Выставляем режим мягкий свет. Верхний и боковой контур посветлел.

Режим мягкий свет

Создаём ещё новый слой в режиме ОбтрМ. И снова кисточкой белого цвета, но меньшего размера в 2 раза предыдущего, подкрашиваем  только боковые стороны.  Также размываем по Гауссу, но размер размытия 6-7 рх. И снова мягкий свет.

белой кистью

мягкий сет режимРазмытие по Гауссу

Создаём ещё новый слой в режиме ОбтрМ. И снова кисточкой белого цвета, но меньшего размера в 2 раза предыдущего, подкрашиваем  только боковые стороны.  Также размываем по Гауссу, но размер размытия 2,7- 3,2 рх. И снова мягкий свет.

p27

Передняя грань получила  подсветку  с боков и сверху.

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

слойобтравочная маска

Далее, создадим дополнительное освещение самой нижней кромки передней грани. Новый слой сверху передней грани в режиме  ОбтрМ  и слегка снизу подкрасим белой кистью переднюю грань.  Размоем по Гауссу  на 4-7 рх и Ок.  Режим мягкий свет

p30p31p32

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

p33

 

Включаем режим мягкий свет и тональность выравнивается.  Можно ещё один слой  и снова засветка, но гораздо меньшими размерами кисти. И снова мягкий свет + регулировать непрозрачность.  Готово.

p34

Хотите глянец – делаем глянец на основной текстуре. Создаём сверху новый слой над лицевой гранью  и крепим обтравочной маской. Берём инструмент перо и рисуем волну через всю текстуру.

p35

Щелчок ПКМ и выбираем - образовать выделенную область. Происходит выделение контура.

p36

Активируем  градиент,  выбираем стиль от белого к прозрачному и  протягиваем, удерживая Shift  от линии выделения к краю  грани.

p37

И выставляем режим – мягкий свет. Уменьшаем непрозрачность  до 70%.  Щелчок ПКМ и выбираем -  удалить контур.

p38p39

 

Для создания подсветки верхнего ребра куба будем использовать инструмент перо и размытие по Гауссу. Создаём слой сверху всех слоёв. Берём перо и на уровне верхнего ребра слева и справа ставим точки,  и они автоматически образуют прямой контур. Подравнять положение точек,  можно удерживая Ctrl  и курсором таскать точки куда надо

p40

Теперь перед дальнейшим действием настроим кисть.  Цвет белый, жёсткость =100%, р-р 1рх.  В настройках кисти обозначить динамику кисти  в чек боксе птичкой.Опять возвращаемся  в перо, щелчок ПКМ  курсор на контуре, и выбрать —  выполнить обводку контура. Появиться  всплывающее окно, где надо выбрать кисть и обязательно поставить  чек в боксе – имитировать нажим и ок.

Контур подкрасится белой линией в 1 рх  с исчезающими концами. Причём, это видимо   только при большом увеличении. Ещё раз щелчок ПКМ и выбрать удалить контур.

Далее дублируем эту линию и размываем по Гауссу на 1 рх, объединяем обе линии и опускаем слой  ниже на 1 рх.

Опять дублируем получившийся слой и размываем по  Гауссу уже на 3рх.

Ещё раз дублируем наш новый слой и размываем по Гауссу на 7рх.

Последний раз дублируем предыдущий слой и размываем по Гауссу на 12рх

 

Объединяем эти слои в один слой (если они не в обтравочной маске!). Выделить все слои и ПКМ, далее в выпавшем списке, объединить слои. Все слои сливаются в один слой.

Этот слой даёт натуральную подсветку сверху.

Если  подсветка слабенькая, дублируем этот  суммарный слой, а ослабить сильное свечение можно уменьшив непрозрачность слоя на панели слоёв.

p41

Создание тени снизу формы регистрации. Создаём новый слой в самом низу под  фигурой формы. Инструментом выделение эллипсом рисуем острый эллипс по размеру чуть больше ширины формы и заливаем чёрным цветом.

p42

Инструментом размытие сначала размываем оба конца острого эллипса, а середину почти не трогаем. Затем ластиком с непрозрачностью 25-30% удаляем всё лишнее.

Командой Ctrl+T сжимаем тень до нужного размера.

p43

Создаём новый слой над тенью  и прикрепляем его обтравочной маской к слою тени. Заливаем его самым ярким цветом из фона. Объединяем оба эти слои и уменьшаем непрозрачность до 70%. Вызываем уровни командой Ctrl+L и сдвигаем правый ползунок влево, тень приобретает цвет притемнённого фона. Ластиком и непрозрачностью регулируем тональность тени. Каркас дизайна формы регистрации готов для заполнения текстовыми блоками.

p44

Продолжение  статьи  можно смотреть  под заголовком Текстовый дизайн формы регистрации  по адресу http://infookno.ru/dizajn/tekstovyj-dizajn-formy-registracii.html

Кроме того,  можете скачать готовый PSD файл рисунка этой статьи — Текстурный дизайн формы регистрации  на Яндекс диске по адресу.  https://yadi.sk/d/vIuWD84T3LkEkM

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

Если вы интересуетесь изготовлением дизайна  страниц сайтов, обложек, баннеров, тогда вам на эту страницу.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Используем интернет для заработка: Электронная книга

Не крутой, но пожизненный доход при наличии Internet и мобильный телефон.