Сделай из любого рисунка от руки дизайн веб странички

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

дополнительные материалы к урокам демо версия урока

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

Если Ваши способности к рисованию лучше моих, то уверена, Вам удастся создать что-то более выдающееся.

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

Давайте приступим от слов к делу.

Дизайн веб страницы, созданный из рисунка

1. Итак, для начала берем лист бумаги, простой карандаш и рисуем то, что Вы хотите видеть на веб странице. Обратите внимание, чтобы карандаш был достаточно яркий, а линии у отдельных элементов при рисовании не прерывались. То есть чтобы не было порванных линий.

У меня получился вот такой рисунок:

рисунок на бумаге

2. Теперь отсканируйте Ваше искусство на компьютер в формате .jpg.

Откройте рисунок в программе Adobe Photoshop.

открываем отсканированный рисунок в Photoshop

3. Идем во вкладку Image – Adjustments – Levels.

В появившемся окне регулируем уровни так, чтобы рисунок стал более контрастным и линии карандаша смотрелись более ярко.

Выбираем регулировку уровней в Фотошоп

Делаем линии более контрастными

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

Обрезаем ненужные части изображения

5. Теперь отрегулируем Яркость/Контраст. Для этого идем во вкладку Image – Adjustment – Brightness / Contrast и выставляем Контраст на 100.

Регулируем Яркость/Контраст изображения

Выставляем Контраст на 100

6. Теперь нужно проверить, что элементы не имеют прерывающихся линий. Для этого возьмите инструмент «Волшебная палочка» (W) и попробуйте выделить каждый элемент Вашего дизайна, который должен быть окрашен в какой-либо цвет. Если элемент композиции выделяется без проблем, то все хорошо.

Но если при выделении кроме нужного элемента выделяется что-то еще, то нужно искать нечеткие или порванные линии и корректировать это при помощи кисти (B).

Коррекция нечетких или порванных линий

7. Когда все элементы в порядке, выделите при помощи инструмента «Волшебной Палочки» (W) группу элементов, которая должна быть окрашена в один цвет, создайте новый слой, перейдите на него и залейте выделение нужным Вам цветом.

Выделение и заливка элементов

8. Эту процедуру проделайте для всех элементов веб дизайна Вашей композиции. Для каждой группы элементов создавайте новый слой.

Заливка всей композиции

9. Теперь скройте слой с исходным рисунком.

После этого переходите на каждый созданный слой и назначайте обводку окрашенным элементам.

Обводка для элементов веб композиции

10. Создайте новый слой, спустите его ниже остальных и сделайте заливку фона для Вашей композиции.

Заливка фона для композиции

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

11. Теперь перейдите во вкладку Filter – Filter Gallery и выберите тот эффект для вашего веб дизайна, который Вам понравится.

Выбор фильтра для веб дизайна

У меня получилось вот так:

Примененный фильтр для веб композиции

12. А теперь я вставлю в страничку несколько блоков с текстом.

Готовая страница веб дизайна из рисунка.

Вот такой «детский» веб дизайн получился у меня.

Что получиться у Вас зависит от ваших навыков рисования и Вашей фантазии. Техника здесь одна, однако результаты могут быть совершенно разными. Не бойтесь экспериментировать и делитесь Вашими успехами и опытом.

Жду Ваших комментариев.

Если Вы еще не подписались на обновление блога, то обязательно подписывайтесь, так как в скором времени обещаю выпустить много новых и полезных статей и уроков.

Успехов Вам и до встречи в следующих уроках!

Необычный Логотип, построенный из букв

Дизайн веб сайт по-новому!

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

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


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: