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

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

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

Shade,
Вы правы, это я опечаталась, хотя я написала что заранее извиняюсь за ошибки)))
Правильное число 1920. Цифры ведь сам автор задаёт, у меня в примере такие,а у другого могут быть другие, свои параметры длины и ширины в максимуме.
Report Post
Ответить с цитированием
Эти 3 пользователя(ей) сказали Спасибо Мальвинка за это полезное сообщение:
Heartbeat (09.06.2011), miss (09.06.2011), Жемчуг (17.09.2011)
Старый 09.06.2011, 01:49   #22
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Спасибо, что объяснили)) а то я сейчас сидела мучалась с этим... у меня размеры фреймов такие же как у вас,поэтому все числа должны были подходить а тут вот не сошлось)) всё получилось,спасибо)
Report Post
Ответить с цитированием
Старый 17.09.2011, 15:30   #23
 
Регистрация: 15.03.2008
Сообщений: 79
Вы сказали Спасибо: 49
Поблагодарили 16 раз
Репутация: 26
кукла вне форума
По умолчанию

Как вы все это сохранить-то...
__________________
)
Report Post
Ответить с цитированием
Старый 05.01.2014, 05:27   #24
 
Регистрация: 04.01.2014
Сообщений: 1
Вы сказали Спасибо: 1
Поблагодарили 1 раз в 1 сообщении
Репутация: 11
Райское_Наслаждение вне форума
По умолчанию

Цитата:
Сообщение от Мальвинка Посмотреть сообщение
Урок 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
Ответить с цитированием
Этот пользователь сказал Спасибо Райское_Наслаждение за это полезное сообщение:
Мальвинка (05.01.2014)
Старый 05.01.2014, 07:23   #25
 
Регистрация: 14.10.2007
Сообщений: 473
Вы сказали Спасибо: 641
Поблагодарили 3,615 раз
Репутация: 3587
Мальвинка вне форума
По умолчанию

На данный момент видео-уроки не делаю,никакие, не имею времени на это.
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


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


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