| | Обучение дизайна | |
| | Автор | Сообщение |
---|
Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Обучение дизайна Вт Окт 18, 2011 10:51 am | |
| Урок "Дизайн -резинка" 1 часть Прежде, чем я начну рассказывать об этом уроке, скажу несколько слов: - до того, как я начала рисовать дизайн-резинку, я видела, как он должен выглядеть на чате (скрин) - никто не обучал меня, не давал никаких консультаций или подсказок, пояснений и подобное. Училась я сама, разбираясь в каждом шаге. - у меня английский фотошоп, так что извиняйте ))) - и, также, извиняюсь за ошибки, если найдёте. В этой части урока я расскажу, как нарисовать дизайн-резинку вот для такой стандартной нарезки фреймов в чате: [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Пока не будем ничего рисовать, будем анализировать и запоминать))) Сначала рассмотрим особенности нарисовки и нарезки такова дизайна. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]В этой схеме: Синий - границы фреймов в чате Красный - будущая рамочка дизайна Жёлтый - направление смещения картинок при разных разрешениях монитора Белый - места, где происходят эти смещения Зелёные цифры - пояснения при установке картинок на чат (скрины админки) Жёлтые кружочки - места, где зафиксированы( прижаты) картинки. В принципе, грамотный дизайнер, рассмотрев эту схему, прекрасно может нарисовать дизайн, без дальшейших пояснений))) Идём дальше) Какой длинны рисовать дизайн? Чем большего размера ваш дизайн, тем он сильнее резинка ))) (т.е. подойдёт под большее количество разрешений монитора) Дизайны, которые рисовала я были размерами 2000 рх на 1200 рх. Самый лучший дизайн-резинка -это дизайн без картиноки без стилей, тогда его можно нарисовать огромного размера) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Фрейм "Кто в чате" и "Информация" [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]И фрейм сообщений [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Слова *заданная длина или ширина* означают, что картинка для этого фрейма должна соответствовать размеру фрейма в чате. Если в чате, которому вы рисуете дизайн, ширина баннера и меню 100рх, то в вашей разметке нужно чётко выставить ширину верха 100рх. Также для фрейма "кто в чате". Пунктирные красные линии - это сокращение по длине. На самом деле общий вид дизайна выглядит так, он вытянут горизонтально: [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Я использую уменьшенные картинки в несколько раз. ВАЖНЫЕ МОМЕНТЫ! - В таком дизайне нельзя поместить большую картинку слева вверху. Основная картинка фрейма сообщений прижата слева внизу. - В таком дизайне, сверху, можно использовать картинки, не выезжающие за нижнюю границу фреймов баннера и меню. Иначе, они обрежутся при маленьких разрешениях. - Картинки для баннера нужно помещать слева т.к. правый край баннера подвижный. - Картинки для основного фрейма сообщений помещаются слева вниз и не используйте большие картинки, т.к обрежутся сверху при небольших разрешениях монитора. - Картинка для фрейма "кто в чате" помещается вниз и справа и не должна быть огромной. - Каждая картинка, кисть, стиль добавляют вес дизайну. - Нижний фрейм не учавствует в таком оформлении, он сам по себе и рисуется отдельно, независимо от других картинок. | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:03 am | |
| Урок "Дизайн -резинка" 2 часть Итак, разобрались в стуктуре дизайна, посмотрели как выглядят картинки на фреймах, учли мои замечания, начинаем РИСОВАТЬ. Шаг 1. Создаём новый файл, указываем свои размеры дизайна. Обязательно установите прозрачную основу, это пригодится при нарезке фреймов. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 2. Заливаем основу либо каким-то цветом, либо чёрным. Создаём новый слой. Делаем разметку фреймов. Выбираем какой-нибуть цвет кисточки,отличный от цвета фона, размером 9рх. Инструмент *прямоугольное выделение*, настройки -*фиксированный размер*, выставляем длину на полную, а ширину равную ширине баннера в вашем чате. Кликаем по картинке, появился пунктирный прямоугольник, аккуратно перемещаем его в самый верх картинки, чтобы все пунктирные линии были видны. Проводим снизу линию,удерживая Shift. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 3. Выделяем меню. Меняем параметры выделения на длину и ширину вашего маню в чате. Кликаем справа по картинке и аккуратно проводит вертикальную лини, удерживая Shift -границу меню слева. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Теперь я советую сделать следующее: делаем все слои видимыми (т.е. включить глазики) всего 4 слоя: основа, слой с цветной серединкой, рамочка и сверху разметка. Мы сделали ШАБЛОН дизайна -резинки для данных размеров фреймов в чате (которые вы задавали). ОБЯЗАТЕЛЬНО сохраните этот шаблон в формате фотошопа PSD. Файл -Сохранить как. Имея шаблон, его можно украшать как вам захочется, при этом всегда можно вернуть первоначальный вид (в случае ошибок). Если вы рисуете дизайн-резинку в первый раз, советую на этом шаге рисование дизайна закончить. Сохраняете в формате PSD, затем отключаете глазик со слоя с разметкой и объединяете все видимые слои. Слой - обьединить видимые слои. У вас должно получиться всего два слоя: 1 нижний со всем дизайном, выше 2 слой с разметкой. Далее пропускаете шаги оформления до нарезки картинок. Шаг 9. Нажимаем Delete. И получаем тоненькую рамочку внутри дизайна. ЗАМЕЧАНИЕ: снизу лучше всего почти не делать зазора, как можно ближе прижать прямоугольник вниз. Особенно обратите внимание: вверху у уголков, закругления должны быть во фреймах баннер и меню и никак по другому! Если у вас прямоугольник сместился, подвигайте его инструментом *перемещение* либо *Правка- свободное трансформирование*. Когда вы добились результата, дублируем слой. Этот слой будет рамочкой. Шаг 4. Выделяем фрейм "Кто в чате". Снова меняем параметры выделения, кликаем по картинке и проводим вертикальную черту как на скрине. Все эти полоски русуются на 1-м слое. Затем уберите выделение и можно сверху стереть лишний кусочек лини. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 5. Создаём новый слой ниже слоя с разметкой. Выбираем инструмент *прямоугольник с круглёнными углами* в настройках выставляем величину скругления. Выбираем цвет прямоугольника и рисуем его очень аккуратно как показано на скрине. Отступы справа и слева могут быть какими угодно. ЗАМЕЧАНИЕ: снизу лучше всего почти не делать зазора, как можно ближе прижать прямоугольник вниз. Особенно обратите внимание: вверху у уголков, закругления должны быть во фреймах баннер и меню и никак по другому! Если у вас прямоугольник сместился, подвигайте его инструментом *перемещение* либо *Правка- свободное трансформирование*. Когда вы добились результата, дублируем слой. Этот слой будет рамочкой. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 6. Убираем глазик с верхнего слоя-прямоугольника. Кликаем по слою под ним (первому прямоугольнику), удерживая Ctrl щёлкаем по маленькому изображению слоя рядом с глазиком - прямоугольник выделится пунктиром. (Запомните, выделить любой объект, находящийся на слое можно кликом по значку слоя рядом с глазиком,удерживая Ctrl. ) Выбираем цвет, которым зальём серединку дизайна. Можно просто чёрный. Заливаем. НЕ снимаем выделения. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 7. Убираем глазик и с этого слоя. Не снимая выделения, переходим на самый нижний слой - основу. Выделен прямоугольник,а слой самый нижний. Нажимаем Delete. У нас получилась дырка в середине дизайна. Зачем это нужно? Это делается для того,чтобы уменьшить вес картинок, т.е удалили лишнее. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 8. Делаем рамочку дизайна. Отключаем глазик с нижнего слоя с прямоугольником и щёлкаем по слою выше. Включаем у него глазик. Выделяем прямоугольник на этом слое. Далее, нажимаем комбинацию Выделение - Модификация - Сжатие, откроется маленькое окошечко, где напишем толщину рамки. ОК. Пунктирная линия сдвинулась внутрь на 3рх в моём примере. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение] | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:08 am | |
| Урок "Дизайн -резинка" 3 часть Тем, кто продолжает, пропустите выше пунк, объединения слоёв. Оформление дизайна. Напоминаю, любая картинка, любой стиль или кисть добавляют вес картинок вашего дизайна. Обратите внимание на состыковки картинок фреймов. Я буду рассматривать сложный вид оформления, где есть и стиль и картинки. Шаг 10. Выбирите какой-нибуть (желательно как можно меньше по весу) бекграунд ( фон). Уменьшите его размер, откорекктируйте цвет и насыщеность. Я взяла вот такие вот камушки ) Обязательно сохраните этот фон(картинку) в формате JPG. Он нам понадобится для оформления фрейма *ввод сообщений*. Затем залейте этот фон в список узоров в вашем фотошопе. Правка - Определить узор, нажимаете ОК и фон появляется в списке,последним. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 11. Заливаем узором область вокруг рамки. Щёлкаем по самому нижнему слою и выделяем его. Далее: Слой - Стиль слоя -Перекрытие узора, выбираете ваш фон и нажимаете ОК. Результат ниже на скрине. В окошке Слои, напротив самого нижнего слоя появился значок * эффект слоя*. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 12. Меняем заливку узором ( эксперименты). Кликнув дважды по значку *эффект слоя*, открывается панель управления стилями слоя. Можете поменять узор. Не забывайте, что ваш слой должен быть выделен (пунктирные линии на скрине) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 13. Рамочка. Тоже самое можно проделать с рамочкой. Выделяем слой с рамочкой, выделям саму рамочку и применяем стиль как было выше. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 14. Центр дизайна. Обращаемся к слою с прямоугольником, выделяем его и можем залить каким угодно цветом (например) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 15. Картинки. Помните, что в таком виде дизайна картинки можно устанавливать только определённым образом. Не заезжайте картинкой ниже края фреймов баннера и меню. Количество слоёв увеличилось, соответственно числу картинок. 1 картинка -1 слой для неё. Всегда можно удалить, если не понравится. Обязательно включите слой с разметкой,чтобы проверить как установлены ваши картинки. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]По оформлению у меня всё. Вашей фантазии нет границ ))) Экспериментируйте. | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:13 am | |
| Урок "Дизайн -резинка" 4 часть Нарезка картинок для фреймов. После того, как вы закончили оформлять дизайн, отключите разметку и объедините все видимые слои. Шаг 16. Вырезаем меню. У вас всего 2 слоя: 1 -ваш дизайн, 2-слой с разметкой( он отключон). Щёлкаем по слою с дизайном. Берём инструмент *прямоугольное выделение* и устанавливаем размеры максимум в длину (в моём случае 2400рх) и ширину фрейма баннер (у меня это 100рх) Другие размеры НЕЛЬЗЯ, так как мы рисовали только под такую ширину. Кликнули по дизу, подняли выделение вверх, чётко чтобы были видны все пунктирные линии. Правка -Копировать -Файл -Новый -Вставить. У вас должен получиться отдельный файл размером в моём случае 2400рх длиной и 100рх шириной. Инструмент выделения, задаём размеры нашего меню, у меня это 600 в длину и 100 в ширину, кликаем по картинке в этом новом файле, подводим выделение чётко к правому краю картинки Правка -Копировать -Файл -Новый -Вставить. В результате, у вас снова будет новый файл только с картинкой меню определённого размера. Сохранить как WEB в формате JPG, смотрим на вес файла, если большой, то привет - зря старались так красиво украшать))) Если всё нормально,сохранив, закрываем только картинку меню. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 17. Вырезаем баннер. Возращаемся к файлу, на котором баннер и меню, на нём у вас до сих пор стоит выделение меню, нажимаем Delete, удаляем эту часть картинки. Ставим режим выделения - Нормальное ( до этого было Фиксированное) и выделяем оставшийся кусок картинки. Правка -Копировать -Файл -Новый -Вставить. Размер нового файла должен чётко соответствовать длине картинки баннера, в моём случае это 2400 - 600(меню) = 1800. Сохранить как веб, контролируем вес картинки. Закрываем файл баннера и файл баннер + меню. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 18. Вырезаем картинку для фрейма "Кто в чате". Возвращаемся к нашей основной картинке, на которой мы объединяли слои. На ней выделенная верхушка (баннер + меню) нажимаем Delete, сверху станет пустое место. Инструмент *прямоугольное выделение*, задаём режим Фиксированный, размеры для фрейма кто в чате (оно же информация) ширина, в моём случае, 270 рх (именно так мы делали на разметке) длинна у меня 1200 рх. Кликаем по картинке, смещаем выделение вправо,чтобы чётко были видны пунктирные линии со всех сторон. Правка -Копировать -Файл -Новый -Вставить. Сохраняем как веб,контролируя вес. Закрываем файл картинки для фрейма "Кто в чате". [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 19. Последний шаг - вырезаем картинку основного фрейма сообщений. Снова возвращаемся к исходной картинке-дизайну всего чата. Удаляем выделенную часть картинки фрейма "Кто в чате". В результате видим чистую картинку для основного фрейма чата. Она самая большая из всех. Выделяем её и повторяем процедуру новогофайла-картинки. Сохраняем, контролируя вес. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Фух, лично я уже устала всё это писать, с ума сойду))) И вот, после многочисленых переделок и затраченых трудов, добившись нормального веса всех картинок СВЕРШИЛОСЬ! Что получили в итоге: Шаг 20. (но ещё не последний ))) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Все размеры даны для моего примера. | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:17 am | |
| Урок "Дизайн -резинка" 5 часть Навигация. Кнопки вы сами нарисуете, а то точно помру от этой писанины))) В навигации, разбираясь со всем этим, я кое-что выяснила интересное, не знаю, обращал ли кто до меня на это внимание, судя по скринам работ - нет, но неважно, суть вот в чём. В стандарном чате окно "Навигация" находится поверх окошка "Кто в чате", а значит, картинка шапочки навигации закрывает красивый закруглённый уголок. Как это исправить. Предлагаю следущий метод. Шаг 21. Открываем сохранённую картинку для фрейма "Кто в чате". В самом низу выделяем шапочку для навигации, длина как у этой картинки, а ширину такую,чтобы захватить уголочек, ну пусть будет 30рх. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Правка -Копировать -Файл -Новый -Вставить. Получили шапочку для навигации. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 22. Окошко навигации. Самое простое, берём наш файл ФОН, помните, сохраняли его специально для фрейма ввода сообщений? И загружаем его в админке вот так ( скрин с моего чата) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 23. И как правильно установить шапочку Навигации в чат (скрин с моего чата) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Про навигацию вроде бы всё) Как такая навигация смотрится в чате, смотрите в 7 части урока. | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:21 am | |
| Урок "Дизайн -резинка" 6 часть И в завершении, устанавливаем все картинки на чат ( зелёные цифры на схеме дизайна) Шаг 24. Баннер (скрины с моего чата, поэтому картинки другие) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 25. Меню [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 26. Окно сообщений [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 27. Окошки Информации и Кто в чате. На них устанавливается одна картинка. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]и [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Шаг 28. Ввод сообщений. Здесь просто грузите файлик под именем ФОН.jpg и размножаете его повсему фрейму. | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | Vladimir Админ
![Админ Админ](http://i91.fastpic.ru/big/2017/0307/37/4de226df0d2dc089c08b75ded71e4637.png)
![Vladimir](https://7img.net/users/3413/18/12/86/avatars/1-1.jpg)
Сообщения : 9 Дата регистрации : 2011-08-24 Возраст : 55 Откуда : Нижний Новгород
![Обучение дизайна Empty](https://illiweb.com/empty.gif) | Тема: Re: Обучение дизайна Вт Окт 18, 2011 11:24 am | |
| Урок "Дизайн -резинка" 7 часть, заключительная (ура,ура,ура))) Боже, я не верю, неужели всё?! Фиг вам ))) Напоследок покажу, как смотрится вот это всё в моём чате. 1) Внутри чата, где шапочка навигации нарисована по методу, о котором я говорила. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]2) Внутри чата выдвинутая Навигация. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]3) Внутри чата, когда появляется скролл от количества людей в чате ( или размера графников))) Разрыва между Меню и Кто в чате нет. [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]4) Внутри чата сразу 2 скролла ( от людей и от Навигации) [Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]Вот теперь всё! Желаю вам терпения и замечательных дизайнов! Можно создать отдельную тему, где будем делиться тем,что получается и рассматривать ошибки) | |
| ![Перейти вниз](https://illiweb.com/empty.gif) | | | Обучение дизайна | |
|
| Права доступа к этому форуму: | Вы не можете отвечать на сообщения
| |
| |
| |