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

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

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


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


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

Сообщений 1 страница 30 из 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

2

http://s5.uploads.ru/uYbR1.gif спасибки солнышко дорогое http://s5.uploads.ru/noASE.gif  ты выполнила мою просьбу

0

3

Наташенька,я хотела тебе сказать большое спасибо за урок,очень познавательно))

скрин

http://s7.uploads.ru/t/bjspu.gif

вот то что у меня получилось... вернее рисовала то я в своем стиле и по пожеланиям заказчика,но устанавливала по уроку.. очень просто оказалось все))
все что я не допонимала,я поняла))  http://uploads.ru/i/I/W/S/IWSni.gif

0

4

Dont Panic
постаралась сдержать слово)) http://uploads.ru/i/b/U/O/bUOs0.gif

ღBlack Berry
Рада, что урок пригодился))
Дизайн красивейший..ты умничка))) http://uploads.ru/i/k/u/8/ku8Ax.gif

0

5

Я всё сделал и всё порезал и всё сохранил, только теперь не понял, что загружать в саму админку если всё порезаное напрочь?))

0

6

Люди.. тут есть кто нить живой?))  http://s5.uploads.ru/I4iQn.gif

0

7

Тот самый Мюнхаузен
2. Дизайн чата. Устанавливаем. вроде тут все

0

8

Прошу прощения   хотелось бы увидеть как рисуют именно шапку чата.. Кистями  умею. А вот так чтоб  литое было меню и типо техно стиль. очень бы хотелось урок получить.Первый день на форуме. может не в ту тему написала. за ранее ивиняюсь.

0

9

Ира
банер и меню - это и есть шапка

0

10

Ира
Попробуйте поработать с текстурами (думаю именно это вам нужно).
Лично я не представляю как можно описать это в уроке)
Нужно уметь пользоваться фотошопом, да и всё))

0

11

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

0

12

делаю заливку.. заливается на весь диз

0

13

Ира
Что бы убрать лишнее можно воспользоваться ластиком
или инструментом "Прямоугольная область".
http://pe-images.s3.amazonaws.com/photo-effects/three-photo-frame/photoshop-rectangular-marquee-tool.gif
Выделяем то что нам не нужно и жмём на кнопку Delete.
(обязательно, нужно обращать внимание с каким слоем мы работаем, что бы не удалить лишнее).

+1

14

спасибо большое буду пробывать

0

15

Здравствуйте! Нарисовала  по Вашему уроку дизайн чата, все  получилось - и нарисовала, и разрезала и в чат поставила). Хочу поблагодарить за подробное и доступное объяснение. Огромнейшее спасибо))) У меня есть вопрос. Наверно он не данной теме. Нет ли урока по созданию стартовой  страницы чата, очень хочу научиться рисовать ее.

0

16

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

0

17

Спасибо огромное за урок)))) Все очень доступно и все понятно. Даже попробовала нарисовать свой первый диз,хотя никогда граферством не занималась. Коряво вышло,  и картинки не так разместила, но главное "путь проложен". Единственное я не совсем поняла, как поменять цвет в строке ввода сообщений(потому что он у меня получился почему-то как кнопки синим, а хотела черным) и никак не найду где настраивается шрифт на фразы входа/выхода
Вот что получилось:

тык

http://www.imgs.su/tmp/2014-04-17/1397742821-547.jpg

:tired:

Отредактировано Дерзкая (2014-04-17 17:55:07)

0

18

Дерзкая
Поздравляю с первым дизайном))

Строка ввода сообщений:
http://uploads.ru/Iat1l.png
"Дизайн чата"- "Фрейм отправки сообщений" - "Поля ввода"
В этом пункте задаём стили полей ввода сообщения.
*возможно загружать на фон изображения.
*цвет текста - каким цветом будет вводиться сообщение в поле.
*цвет - цвет фона поля ввода.
*шрифт - какой шрифт будет применён к тексту.
*рамка - меняем цвет и ширину (у меня ширина на скрине 1) рамки.
*закругление углов - будут ли закруглены края у рамки.
*поле - отступы текста.
*отступ - расположение самого поля ввода.
*высота - какой высоты будет поле ввода.

http://uploads.ru/jvu5d.png
это поле ввода в фокусе (т.е. когда мы печатаем в нём сообщение)

Фразы входа/выхода:
http://uploads.ru/7gUbO.png
"Дизайн окна сообщений" - "Системные сообщения" - "S1-S9"
Эти пункты отвечают за стиль стандартных фраз входа/выхода посетителей.
есть пункт "Шрифт" там и выбирай нужный)

P.S.: Немного посоветую тебе на будущее..низя так много картинок во фрейме сообщений размещать, они мешают общению..лучше остановиться на одной и сделать её в каком нить углу)) и поработай со стилями текста..таким большим его тоже делать не желательно)) а так умничка...что начала рисовать..желаю только успехов и развития))

0

19

Спасибо огромное за помощь :love:  :love:  :love:

0

20

Дерзкая
да не за что)
обращайся если что))

0

21

Начала учить по твоим урокам дорогая,и очень довольна,все доступно объяснила и показала))) http://s3.uploads.ru/jJ5lp.gif  http://s3.uploads.ru/jJ5lp.gif  http://s3.uploads.ru/jJ5lp.gif Вот моя работка,вторая уже)http://imhocloud.com/images/2015/02/13/DIZ875aa.md.jpg

+1

22

LasVegas
Супер)) Для второй работы очень даже замечательно))
И рада, что мои уроки пригодились))) http://uploads.ru/i/M/r/O/MrOIh.gif

0

23

а когда направляюшию делаешь ее на новом слое?

0

24

Небесная
Направляющие это просто линии разметки..их видно только тебе..при сохранении их не будет)
И поэтому новый слой для них не нужен))

0

25

Хэйтли
Подскажите как убрать сверху надпись настройки в заголовке навигации

0

26

Shadow
в этой теме 2. Дизайн чата: "Устанавливаем".
найди слова "Переходим в "Дизайн навигации"." - красным цветом, и найди спойлер "Заголовок"
Ты главное не торопись, все поправимо, главное разобраться, я точно знаю, что все получится

Отредактировано Лимонад (2015-11-18 16:15:09)

0

27

Лимонад
спасибо большое , разобрался но есть вопрос как сделать картинку которая идет в окно сообщений фиксированной тоесть чтоб она за скролом не ездила? жму фиксировать она не фиксируется

0

28

Shadow
Такого быть не должно.
Может перезаход в чат поможет..либо настройка "фиксировать" не взялась..проверь ещё раз настройки.

0

29

спасибо большое за урок.
все доступно и понятно.
вот что получилось.не судите строго.
это мой первенец :crazy: http://s7.uploads.ru/t/Lbmrf.jpg

0

30

В общем вот.. Первый раз рисовала.
http://s2.uploads.ru/t/tBADG.png

Отредактировано iZombie. (2015-11-29 15:41:26)

0


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