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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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