Graf-Art форум графики

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Урок дизайна

Сообщений 1 страница 3 из 3

1

1) Создаем файл размером 1366*110 (1366 – начальная ширина, на которой будут ключевые и основные моменты графики, 110 – высота (баннер+меню)
2) Заливаем фон черным на первоначальном этапе
3) Выбираем цветовую палитру
http://sg.uploads.ru/t/QueB2.png
4) Создаем новый слой и заливаем его выбранным цветом
я выбрала 1
5) Идем в стили. Накладываем градиент и узор
http://s5.uploads.ru/t/4amfu.jpg
http://s3.uploads.ru/t/oJOGh.jpg
итог
http://s9.uploads.ru/t/uC0Oy.jpg
6) Пишем название чата (любой шрифт, размер на глаз 24).
7) Выравниваем его по центру по горизонтали и вертикали
http://sg.uploads.ru/t/nV283.jpg
http://sd.uploads.ru/t/eIpGn.jpg
( Для того, чтобы выровнять по размеру баннера, выделяем фон, затем в  окошке слоев выбираем слой с текстом и нажимаем нужные кнопки для выравнивания)
8) Создаем новый слой
9) Берем кисть. Делаем ею клик, потом трансформируем (переворачиваем - ctrl+T) и перемещаем ближе к тексту.
http://sh.uploads.ru/t/JjA1X.jpg
http://s5.uploads.ru/t/lFOSy.jpg
10) Делаем копию кисти (нажимаем стрелочкой на слое, зажимаем alt и тянем), отражаем по горизонтали (ctrl+T – правой кнопкой мыши по слою – отразить по горизонтали) и перемещаем. Делаем примерно такой набросок
http://sh.uploads.ru/t/P6M1c.jpg
11) Объединила кисти в группу, чтобы не путаться. Потом мягким ластиком стерла все ненужное
http://s3.uploads.ru/t/63ORH.jpg
12) Берем все туже кисть и отражаем ее по вертикали. Делаем следующую расстановку
http://s5.uploads.ru/t/X04gH.jpg
13) Все самое ненужное затираем. В пустое место можешь добавить фигурку
http://s5.uploads.ru/t/X04gH.jpg
http://s3.uploads.ru/t/QZrOE.jpg
14) Выделяем группу и название и на всякий случай центрируем по горизонтали
15) Фигуры можешь добавлять, а можешь и не добавлять. Мне они показались нужными
16) Обрабатываем кисти и текст
текст
http://sg.uploads.ru/t/MyRWk.jpg
http://s7.uploads.ru/t/PIL7j.jpg
http://sd.uploads.ru/t/EtjVx.jpg
http://sd.uploads.ru/t/MtvQd.jpg
кисть
http://s9.uploads.ru/t/fey7v.jpg
http://sd.uploads.ru/t/rqWOe.jpg
http://s8.uploads.ru/t/Wadgl.jpg
http://s3.uploads.ru/t/ng1tB.jpg
17) Под текстом мягкой кистью делаем фон, выставляем следующие параметры
http://sd.uploads.ru/t/BfAXa.jpg

18) Берем другую кисть. Накладываем след стиль
http://sg.uploads.ru/t/WRqeV.jpg
http://s7.uploads.ru/t/DtCuR.jpg

19) Отражаем ее, стиль
http://s8.uploads.ru/t/JSsgp.jpg

20) Объединяем кисти в группу. И в группе их копируем!
http://s5.uploads.ru/t/fIgZh.jpg

21) Дублируем группу и отражаем, перемещаем
http://s7.uploads.ru/t/h9bxX.jpg

22) Увеличиваем размер изображения. Изображение – размер холста (ставим в ширину 2000)
http://s7.uploads.ru/t/2tHp4.jpg

23) Дорабатываем: заливаем подложку, фон теми же цветами, продолжаем дублировать рисунок

24) Необязательный шаг, но я люблю его делать. Рамка: создаем фигуру (линию) размером 2000*1. Перемещаем ее вниз нашей заготовки и накладываем стиль. Дублируем линию и дубликат перемещаем в самый верх.
http://sh.uploads.ru/t/dz1JG.jpg
http://sd.uploads.ru/t/Fumb5.jpg

25) Смотрим итоговый вариант. Меняем что-то, что не нравится. Я добавила к группе с узором внешнее свечение + немного изменила фон.
http://s8.uploads.ru/t/xjFhO.jpg

26) Сохраняем в псд и скидываем пример

0

2

Исходнички

Урок по остальным частям дизайна будет позже.
Не обязательно рисовать точь-в-точь. Можете использовать свои кисти, ресурсы и прочее.
Рисуем ТОЛЬКО БАННЕР!

Работы кидаем в своих темах

0

3

Продолжаем.
Рисуем все остальное.

Окно сообщений:
1) создаем файл размером 500х500
2) заливаем его черным цветом
3) берем инструмент линия (тот же, который брали для рамки), тем же цветом, высотой в 1 пикс, и стиль слоя берем тоже с нашей рамки у баннера. Рисуем 2 линии
http://sh.uploads.ru/t/nYK5b.jpg
4) Берем мягкую кисть. Нажимаем 1 раз в углу, делаем непрозрачность 50 %. Кисть обязательно должна быть под рамкой
http://s7.uploads.ru/t/1EHht.jpg
5) http://s3.uploads.ru/t/hiG1Z.jpg
Берем кисти. Расставляем их так. Стиль слоя берем с кистей с баннера. В стилях слоя кистей меняем только градиент
http://s9.uploads.ru/t/4zTBX.jpg на радиальный
6) Пишем название. Или не пишем.. Стиль текста такой же как на баннере
http://sd.uploads.ru/t/twJLX.jpg
7) Создаем поверх всех слоев новый слой. Берем мягкую кисть черного цвета и затемняем уголки рамки
http://s3.uploads.ru/t/d7INv.jpg

Готово!

Информация / кто в чате:
1) создаем файл 250Х500
2) заливаем черным
3) идем к нашему окну сообщений, выделяем слой с рамкой, идем в редактирование - скопировать совмещенные данные
4) вставляем в наш новый файл
http://sh.uploads.ru/t/zx2iH.jpg
Рамка снизу закрасилась сама
5) Для варианта с большими графами - это финал.
Если графники маленькие (или вам все равно, что фон за графами не будет видно, то продолжаем)
Берем ту же мягкую кисть. И теже кисти. С теми же стилями, что на предыдущих кистях
http://s7.uploads.ru/t/DXZBI.jpg

Ввод сообщений:
1) 2000х30
2) фон черный
3) подложку заливаем так же, как на баннере
http://sd.uploads.ru/t/QiYB0.jpg
Стили те же
http://s3.uploads.ru/t/mV8A2.jpg
4) Делаем сверху рамку по тому же принципу

Навигация
1) 250х350
2) черный фон
3) подложка как у баннера ( по цвету) . Стиль тот же. Но меняем. Оставляем только градиент. Настраиваем
http://sd.uploads.ru/t/qXTEK.jpg
4) http://s5.uploads.ru/t/vihQt.jpg
получаем . Непрозрачность - 50 %
5) создаем рамку в стилях
http://s7.uploads.ru/t/Ho9OL.jpg
6) Идем в изображение - размер холста
выставляем
http://sd.uploads.ru/t/ye0mH.jpg
Нажимаем ок.
Черный фон заливаем до конца.
Наверху пишем слово "навигация". Стиль текста такой же как в названии
http://s7.uploads.ru/t/PcC5m.jpg

Кнопки:
1) 85х25
2) заливаем сначала черным, потом делаем слой подложки сверху.
Стили любые. Я выбрала такой градиент
http://s9.uploads.ru/t/E1gid.jpg
http://s7.uploads.ru/t/DNVfM.jpg
Это будет пассивная кнопка.
У активной просто сменим градиаент
http://s9.uploads.ru/t/OVQ9K.jpg
Все.

Финал
http://sd.uploads.ru/t/gjYEf.jpg

Исходники:

+1