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

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

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


Вы здесь » Graf-Art форум графики » Текстовые уроки » 1. Дизайн чата: "Рисуем и разрезаем".


1. Дизайн чата: "Рисуем и разрезаем".

Сообщений 31 страница 36 из 36

1

Урок "Дизайн чата" разделён на 6 частей.
1. Дизайн чата: "Рисуем и разрезаем".
2. Дизайн чата: "Устанавливаем".
3. Дизайн чата: "Записная книжка".
4. Дизайн чата: "Дизайн страниц раздела".
5. Дизайн чата: "Дизайн формы регистрации".
6. Дизайн чата: "Дизайн анкеты".

----------------------------------------------------
!!Все изображения урока размещены в превью - при клике увеличатся.

В этом уроке я расскажу как делать разметку и вырезать дизайн для чата Августа.

Для начала нам нужны размеры чата. Мне были даны вот такие:
http://s7.uploads.ru/t/6YR7F.png

Открываем фотошоп. Создаём новый файл.
http://s6.uploads.ru/t/tLqow.png
*фоновый цвет у меня был чёрный.
**высота зависит от желаемого изображения во фрейме.
*** ширину 2000pxя считаю наиболее оптимальной (будет смотреться не обрезанным на большинстве мониторах).

После создания основы фона делаем разметку направляющими.
"Просмотр-Новая направляющая".
http://s6.uploads.ru/t/bWCLi.png

Выбираем горизонтальную и высоту указываем такую, как высота баннера в чате.
http://s7.uploads.ru/t/uR9yJ.png
* "пикс" прописываем вручную.
По такому же принципу делаем разметку для меню и ввода сообщений. В моём случае южто были горизонталые направляющие 120пикс и 670пикс.

Для удобства я делаю ещё одну направляющую - вертикальную 1000пикс.
Относительно её удобно рисовать. Мы можем представлять как будет выглядеть дизайн на разных мониторах.
http://s6.uploads.ru/t/WwUGx.png

На этом разметка закончена. Заполняем баннер, меню, ввод сообщения различными текстурами, кистями, надписями и т.п.
Это я объяснять не буду..всё зависит от вашей фантазии и навыками работы в фотошопе.

У меня получилось вот так:
http://s6.uploads.ru/t/xdqLK.png     http://s6.uploads.ru/t/R1uZi.png

Теперь можем добавить картинку во фрейм.
Для примера я добавила вот такую:
http://s7.uploads.ru/t/Tqrlb.png
*тут тоже всё зависит от вашей фантазии и умений.
** при помощи ранее заданной вертикальной направляющей мы можем представить, как будет выглядеть часть во фрейме и часть в списке посетителей.
***картинку во фрейме можно разместить в любом месте..В ДАННОМ случае она никак не влияет на остальные части дизайна.
****если вы хотите картинку во фрейме, которая продолжается от баннера и меню..конечно, вам её и нужно будет разместить в том месте где она должна быть при установке.

Переходим к рисованию навигации.
Создаём файл.
http://s6.uploads.ru/t/BkftJ.png
*ширину взяла 240, потому что в чате информация 250. (если взять 250 для навигации...она не влезет полностью).
**высота зависит от чата, для которого рисуете. (у некоторых в навигации огромный список всего, а у некоторых всё компактно). 400px я считаю наиболее распространённой высотой.

У меня получилость вот так:
http://s7.uploads.ru/t/XBA3s.png

Заполняем как вам хочется (направляющие тут не нужны):
http://s6.uploads.ru/t/c5wMR.png
Навигация готова.

Теперь нам нужны кнопки меню.
Размеров для кнопок нет. Я делаю практически всегда разные размеры.
Зависит от того, какой результат мне нужен.
Для урока захотелось выбрать такой размер:
http://s7.uploads.ru/t/x8SN9.png

Заполняем кнопку как вам хочется.
http://s7.uploads.ru/t/q7mR8.png

Отключаем слой "задний план". Для того что бы кнопка была полупрозрачной.
http://s7.uploads.ru/t/Ce3bg.png
*это действие не обязательно. Мне просто захтелось такую кнопку.

Теперь переходим к сохранению кнопки. Если кнопка полупрозрачная..тип файла должен быть обязательно PNG.
Переходим в "файл-сохранить как".
http://s6.uploads.ru/t/ifmwg.png

Выбираем папку куда сохраним кнопку, даём имя файлу и выбираем тип PNG.
http://s7.uploads.ru/t/OqVDb.png

Теперь нам нужна активная кнопка (которая будет при наведении мыши).
Чаще всего редактируется статичная кнопка, добавляются какие то эффекты.
Я добавила обводку и чуть изменила цвета.
http://s6.uploads.ru/t/TA3ga.png

Теперь отключаем задний план (если нужно) и сохраняем.
http://s6.uploads.ru/t/R5MjU.png

Вернёмся к нашему дизайну и начнём его разрезать.
Способ вырезания, который я опишу в уроке - не единственный, но я захотела написать именно об этом)

Удалим направляющие. "Просмотр-удалить направляющие".
http://s7.uploads.ru/t/XUDcn.png
все направляющие должны исчезнуть.

Теперь нам нужно объединить все наши слои в один.
Жмём на любом не текстовом слое правой кнопкой мыши и выбираем "объединить видимые".
http://s6.uploads.ru/t/r1TIB.png

Появился один слой. Нам нужно убрать его из заднего плана.
Щёлкаем на нём правой копкой мыши, "Из заднего плана".
http://s7.uploads.ru/t/7K6Wf.png

Появиться вот такое окошко.
http://s7.uploads.ru/t/a3W5o.png
Нажимаем "Да".

Выбираем инструмент "Прямоугольная область". Стиль выбираем "Заданные пропорции" и вводим размеры нашего баннера (у меня это 2000пикс и 90пикс).
http://s7.uploads.ru/t/t1e6i.png
Щёлкаем мышкой на дизайне..появляется вот такая пунктирная рамка. У меня на скрине она установлена правильно, если она у вас не обводит чётко угол..передвигаем выделенную область стрелками клавиатуры.

Далее "Редактирование - вырезать".
http://s6.uploads.ru/t/UVgvw.png
У вас вырезанная часть дизайна должна исчезнуть.

Теперь создаём новый файл.
http://s6.uploads.ru/t/le5SN.png

Если автоматически новый файл предлагается создать тех же размеров, что и размеры которые мы задавали в прямоугольной области..значит скорее всего вы сделали всё правильно)
http://s6.uploads.ru/t/cabjy.png
*фон выберем прозрачный.

После создания файла переходим в "Редактирование - вклеить".
http://s7.uploads.ru/t/ljsAF.png

Скопированный баннер должен появиться.
http://s6.uploads.ru/t/lAD35.png

Теперь переходим к сохранению.
"Файл - Сохранить для web устройств".
http://s7.uploads.ru/t/Xudq9.png

Обычно я выбираю формат Png-8 или Jpeg. (где качество будет лучше).
Главное тут уложиться в вес 50к (это максимальный вес баннера на августе).
Пробуем разные настройки, двигаем ползунки..Задача - сохранить наилучшее качество и уложиться в вес.
http://s7.uploads.ru/t/gex8U.png
Нажимаем на Save.

Возвращаемся к нашему проекту с дизайном. По такому же принципу вырезаем меню.
http://s7.uploads.ru/t/X3gMd.png    http://s7.uploads.ru/t/198K2.png
Те же операции повторяем с Вводом сообщений.
Вес меню и ввода сообщений тоже не должен превышать 50к.

Теперь вырезаем часть, которая будет во фрейме.
Стиль прямоугольной области ставим "Нормальный".
И выделаем нужную часть.
http://s6.uploads.ru/t/pzghn.png

Так же вырезаем, вставляем и сохраняем.
http://s6.uploads.ru/t/4LXgP.png

Возвращаемся в проект ели у нас есть часть для списка посетителей.
Аналогично выделяем, вырезаем, вставляем, сохраняем.
http://s6.uploads.ru/t/lKnOS.png

Дизайн разрезан.
Переходим к разрезанию навигации.
Объединим видимые слои.
http://s6.uploads.ru/t/wRdeD.png

Убираем из заднего плана.
http://s6.uploads.ru/t/UP71A.png

Берём инструмент "Прямоугольная область", стиль "Нормальный".
Выделяем ту часть, которая будет отображаться в чате в свёрнутом виде.
http://s6.uploads.ru/t/piD9e.png

Вырезаем, создаём файл, вставляем.
http://s6.uploads.ru/t/OULSZ.png

Сохраняем для web устройств.
http://s6.uploads.ru/t/X6OzG.png
Вес не должен превышать 10к.

С нижней частью навигации делаем аналогичные действия.
При сохранении обращаем внимание на вес (не больше 10к).
http://s7.uploads.ru/t/7WkU2.png

Всё. Дизайн нарисован и разрезан.
Можно устанавливать в чат.
Об этом будет следующий урок.

Если будут вопросы, вы можете задавать их в этой теме.

+11

31

Antonida
iZombie.
Умнички..красивые дизы получились))
Дальнейших творческих успехов!))

+1

32

http://s7.uploads.ru/t/kXUvg.png
вот второй дизайн по вашему уроку.вроде уже не так стремно.
но еще работать и работать.
спасибо большое еще раз.

+1

33

Я может и не имею право критиковать в данной теме, т.к. я не автор урока, но как пользователю чата мне кажется девушка великовата, да и затемнить бы ее. Скорей всего текст на ней будет теряться. Если только подсветку делать темной... Но согласна с вами, этот дизайн заметно лучше. Еще пару тройку дизов и уже будете знать некоторые нюансы)

Отредактировано Лимонад (2015-12-15 20:04:05)

+1

34

Antonida
Да, согласна со Светой..картинка с девушкой большевата..и можно было добавить внизу картинки кисточку..чтобы она не была такой "резко заканчивающейся"..а так всё супер)) продолжай в том же духе)))

+1

35

Вот классный урок  по созданию макета сайта в Фотошопе.   http://webdiz.com.ua/glava-11-fotoshop- … e-fotoshop

0

36

webguru написал(а):

урок  по созданию макета сайта

Какое отношение это имеет к созданию дизайна ЧАТА???

+1


Вы здесь » Graf-Art форум графики » Текстовые уроки » 1. Дизайн чата: "Рисуем и разрезаем".