Вернуться   Форум ChatPlanet.ru > Дизайн > Разное > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 27.03.2011, 13:06   #11
 
Регистрация: 14.10.2007
Сообщений: 473
Вы сказали Спасибо: 641
Поблагодарили 3,615 раз
Репутация: 3587
Мальвинка вне форума
По умолчанию

Урок 2 "Дизайн-резинка" часть 2.
В этой части урока я покажу как расчитывается,рисуется и нарезается дизайн-резинка для чатов,где фрейм меню находится под фреймом баннера.

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

Шаг 1. Разметка
Файл - Новый файл выставляем максимальные значения для диза (например, 2000 на 1200) обязательно на прозрачной основе, заливаем чёрным цветом.
Создаём новый слой, выбираем другой цвет кисточки, берём инструмент *прямоугольное выделение*, задаём ему размеры (буду говорить о цифрах из моего примера) 2000рх, а в ширину, сумму ширины баннера и меню, в моём случае 100рх. Двигаем выделение в самый верх и
удерживая Shift проводим внизу полоску, кисть размером таким, чтобы вы видели её. Затем выделим фрейм "Кто в чате". Прямоугольное выделения, меняем размеры на ваши,у меня это будет 270 на 1200 и удерживая Shift проводим полоску по левому ограничению.
Основная разметка сделана.
Теперь важно!!!! Наметьте для себя - какие отступы у вас буду в дизайне слева и справа. Я взяла для примера 60рх слева и 20рх справа.

Поставим их на слое с разметкой. Всё точно также - выделили заданных размеров, подвели к краю, провели черту по выделению.
В результате у вас должна получиться вот такая разметка.

Синий - основная разметка.
Фиолетовый - границы отступов от краёв.
Красный - оставшиеся размеры длины и ширины дизайна.

Этот расчёт нужен не только для правильной нарисовки диза.но и нарезки фреймов в дальнейшем.

Шаг 2. Создаём новый слой под слоем с разметкой. Рисуем прямоугольник,который потом станет рамочкой. Инструмент *прямоугольное выделение*, задаём размеры, которые расчитали, в моём случае,как это показано на скрине выше, это 1200 в длину и 1100 вширину.
Заливаем выделение каким-нибуть цветом.
Очень важный момент!
Этот прямоугольник нужно правильно установить на дизе, иначе при нарезке наделаете ошибок.
Выравниваем левый верхний уголок прямоугольника. Она должен быть чётко выровнен как показано ниже:

Т.е. между крайними границами ограничений меню снизу и отступа слева.

Шаг 3. Создаём рамочку.
Делаем невидимым слой с разметкой( отключите глазик). Дублируем слой с прямоугольником.

Кликаем по верхнему слою с прямоугольником. Выделяем прямоугольник на нём. Выделить -Модификация -Сжатие и задаёте размер вашей рамочки,у меня на примере это 5 рх. Пунктирная линия вокруг прямоугольника сжалась внутрь на 5 рх. Нажимаем Delete. Теперь,если вы уберёте
глазик со слоя ниже, вы увидите вашу ровную рамочку.

Шаг 4. Убираем всё лишнее (уменьшаем вес картинок диза)
Кликаем по нижнему слою, где прямоугольник, выделяем его, и заливаем каким-нибуть цветом, каким хотите в зависимости от цвета диза, можно просто чёрным). Не снимая выделения, щёлкаем по слою с чёрной основой и нажимаем Delete. В результате, на нижнем слое будет дырка.
В итоге, у вас должно быть вот так:


После этого шага, обязательно сохраните вашу работу в формате PSD!

Шаг 5. Оформлние. Тут я писать много не буду, подробно об этом в первом уроке. Напоминаю, чтобы залить цветом или стилем вокруг чата, нужно сначала выделить нижний слой,а потом уже экспериментировать)

Проведя примерное оформление, у меня получилось вот что:


Шаг 6. Низ дизайна. Теперь быстренько нарисуем картиночку для низа дизайна.
Создаём новый файл с размерами: максимальная длина( у меня 2000рх), а ширина - это ширина фрейма отправки сообщений в вашем чате (у меня на примере 30рх). Заливаем цветом таким же как и ваш цвет вокруг серединки чата, если вы применяли стиль при оформлении верха диза, то и здесь примените точно такой же стиль.
Создаём новый слой. Берём нструмент выделения и задаём размеры: длина -максимальная длина диза,ширина - выставите ширину вашей рамочки (у меня на примере это 5рх). Заливаем цветом как и рамочка, если был стиль на рамочку.то и здесь применяем тоже самое.


Шаг 7. Теперь нужно убрать с краёв картинки для низа кусочки рамочки.
Делается очень просто, берёте инструмент выделения, задаёте размеры: ширину можно любую, а длина - это ваш отступ слева (у меня в примере он 60рх) кликаете по картинке, сдвигаете влево к краю, удаляете. И потом всё тоже самое проделать с правым краем полоски.
В результате, у вас получится следующее:

Файл-Сохранить как веб и сохраняете картинку для низа вашего дизайна.

Нарезка картинок для фреймов.
Шаг 8. Возвращаемся к главной картинке. Соединяем все видимые слои, разметка отключена. Берём инструмент выделения, задаём размеры: максимальная длина, а ширина это сумма ширины баннера и меню в вашем чате. Кликаем по картинке и подводим выделение к самому верху, чтобы были видны все пунктирные линии.
Обратите внимание! Ваша рамочка должна быть НИЖЕ нижнего края выделения.

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

Шаг 9. После того, как сделали картинки для баннера и меню, удаляем на главной картинке (дизе) шапку.

Инструмент выделения, задаём размеры для картинки "кто в чате" выделяем, копируем и так делаее. Сохраняем картинку как веб,в формате jpg.

Шаг 10. Удаляем на главной картинке область для фрейма *кто в чате*. Остаётся 1 большая картинка для фрейма сообщений. Выделяем эту последнюю картинку, копируем и так далее, проверьте вес картинки.


Итог, полученные картиночки для фреймов чата:


Продолжение следует...
Report Post
Ответить с цитированием
Эти 10 пользователя(ей) сказали Спасибо Мальвинка за это полезное сообщение:
eXandr (01.04.2011), miss (30.03.2011), mysterious lady (15.08.2011), Odinochka (12.11.2011), евочка (01.04.2011), Затмение (23.05.2011), Машуля (29.03.2011), Ночная Волчица (02.04.2011), Райское_Наслаждение (04.01.2014), Тропикана (23.05.2011)
Старый 28.03.2011, 10:30   #12
 
Регистрация: 14.10.2007
Сообщений: 473
Вы сказали Спасибо: 641
Поблагодарили 3,615 раз
Репутация: 3587
Мальвинка вне форума
По умолчанию

Урок 2. "Дизайн-резинка" часть 3 (заключительная)

Установка картинок на чат.
Согласно схеме для второго способа оформления чата при нарисовке дизайна-резинки нужно зафиксировать 5 картинок (зелёные цифры на схеме).

Баннер


Меню


Фрейм сообщений


Информация (Кто в чате)
На эти 2 фрейма используется 1 картинка. Прочтите замечания ниже.


Замечания;
При фиксировании этой картинки могут быть 2 варианта, от места фиксирования зависит сдвижение картинки влево при появлении скролла.

1) Если зафиксировать как показано на скрине выше, то скролл будет поверх картинки, она не будет смещаться
2) Если зафиксировать в месте, выделенным красным кружком, то скролл будет смещать картинку на величину скролла влево.

Ввод сообщений.


На этом мои пояснения по поводу рисования дизайна резинки для двух видов расположения фреймов в чате закончены.
Желаю вам терпения и прекрасных работ!
Report Post
Ответить с цитированием
Эти 16 пользователя(ей) сказали Спасибо Мальвинка за это полезное сообщение:
eXandr (01.04.2011), Goldhaarige (12.04.2011), Istinа (29.03.2011), miss (30.03.2011), mysterious lady (15.08.2011), Odinochka (14.06.2011), SoblazN) (18.09.2011), xxx (31.03.2011), евочка (01.04.2011), Затмение (23.05.2011), Машуля (29.03.2011), Ночная Волчица (02.04.2011), плюха (04.04.2011), Страстная леди (30.03.2011), Эффект (01.04.2011), Юлиана (28.03.2011)
Старый 01.04.2011, 10:55   #13
 
Регистрация: 09.01.2009
Сообщений: 87
Вы сказали Спасибо: 86
Поблагодарили 94 раз
Репутация: 111
Отправить сообщение для Эффект с помощью ICQ
Эффект вне форума
По умолчанию

Огромное Тебе спасибо! Ты чудесный человек.)
__________________
ICQ 5567412
Report Post
Ответить с цитированием
Эти 3 пользователя(ей) сказали Спасибо Эффект за это полезное сообщение:
Istinа (09.04.2011), miss (09.04.2011), Мальвинка (02.04.2011)
Старый 01.04.2011, 12:53   #14
 
Регистрация: 03.06.2010
Сообщений: 602
Вы сказали Спасибо: 2,898
Поблагодарили 2,872 раз
Репутация: 2882
miss вне форума
По умолчанию

огромное спасибо,за урок!все ясно и понятна ты просто умничка!!!!!
__________________
фраз про любовь до гроба: Здесь только боль, обида, нефильтрованная злоба...]©
Report Post
Ответить с цитированием
Этот пользователь сказал Спасибо miss за это полезное сообщение:
Мальвинка (02.04.2011)
Старый 01.04.2011, 20:06   #15
 
Сообщений: n/a
По умолчанию

огромное спасибо)
всё получилось))))
Report Post
Ответить с цитированием
Эти 3 пользователя(ей) сказали Спасибо за это полезное сообщение:
miss (09.04.2011), Odinochka (14.06.2011), Мальвинка (02.04.2011)
Старый 09.04.2011, 04:15   #16
 
Регистрация: 03.08.2010
Сообщений: 286
Вы сказали Спасибо: 1,157
Поблагодарили 1,573 раз
Репутация: 1583
Отправить сообщение для евочка с помощью ICQ Отправить сообщение для евочка с помощью Skype™
евочка вне форума
По умолчанию

Спасибо Элечка за твои уроки все получилось очень рада)
__________________
Report Post
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо евочка за это полезное сообщение:
Istinа (09.04.2011), Мальвинка (10.04.2011)
Старый 23.05.2011, 00:16   #17
 
Регистрация: 20.03.2010
Адрес: Россия
Сообщений: 44
Вы сказали Спасибо: 211
Поблагодарили 60 раз
Репутация: 70
Затмение вне форума
По умолчанию

Как здорово! Коротко, ясно и все понятно! Благодарю!

ПЫ.СЫ,: Вотэто я понимаю ЛЮДИ! и себе сделают и другим помогут!
Report Post
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо Затмение за это полезное сообщение:
евочка (23.05.2011), Мальвинка (31.05.2011)
Старый 02.06.2011, 14:36   #18
 
Регистрация: 13.03.2010
Сообщений: 64
Вы сказали Спасибо: 8
Поблагодарили 49 раз
Репутация: 59
zabawa вне форума
По умолчанию

чесно скажу, не дружу я с дизами, не любят они меня((( ) но смотрела видео уроки по дизам, очень приятно все рассказано, да и текстовые уроки содержат в себе очень подробное описание, приятно просто следить за новыми уроками и пользоваться уже существующими вашими уроками)) а вот можно небольшую просьбу, во многих работах дизайнеров я наблюдаю разные блики по тексту или изображению, никак не могу понять как люди делают блики в разных направлениях или по кругу или еще как то, не могли бы вы, если будет время, сделать подробный урок на тему нестандартных бликов, которые можно использовать как в иконках, так и в графниках)
Report Post
Ответить с цитированием
Старый 02.06.2011, 15:42   #19
 
Регистрация: 14.10.2007
Сообщений: 473
Вы сказали Спасибо: 641
Поблагодарили 3,615 раз
Репутация: 3587
Мальвинка вне форума
По умолчанию

zabawa,
Самый эффектный блик - это блик сделанный вручную,т.е. не автоматическое *продвижение* блика,а нарисованый участок блика на каждом слое.
Взяла на заметочку вашу просьбу)
Report Post
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо Мальвинка за это полезное сообщение:
miss (04.06.2011), Затмение (09.06.2011)
Старый 08.06.2011, 23:18   #20
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Хочу задать вопрос)
Или я чего-то не поняла, и так задумано или что-то ещё... Но я не понимаю, как может быть

если 2000-(60+20)=2000-80=1920.
Или вне зависимости от этого выставляются параметры?
Извините, если что-то напутала, просто хотелось бы понять))
Report Post
Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Видео уроки от Мальвинки Мальвинка Уроки 53 14.09.2015 15:25
Урок по граф никам от Мари мари Уроки 7 16.12.2011 00:57
Урок:Создаём сердечко ко дню С.В от Мари мари Уроки 0 08.01.2010 21:45
Урок: Создаём кнопочку (от Мари) мари Уроки 1 08.01.2010 18:14
Урок граф ника от -=Охотник=- -=ОхотниК=- Уроки 1 03.01.2010 19:15


Текущее время: 22:32. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.