Некоторые специальные программы

Некоторые эффекты или действия нельзя или очень сложно выполнить в перечисленных программах, поэтому понадобятся некоторые дополнительные программки, например:

1. Colormania – полезный и легкий инструмент, который позволяет в один клик определить цвет в формате RGB любой точки экрана монитора. Можно также воспользоваться расширением для браузера, например EyeDropper для Chrome.
2. AdobeFlash – известный инструмент для создания баннеров и другой анимации для сайтов, например, интерактивных кнопок, мультяшных персонажей и много других вещей.
3. Линейка – позволяет замерить размер любых нужных вам элементов. Программных решений здесь множество, например SPRuler, Code-V Ruler. Можно также воспользоваться подобным расширением браузера, таким как MeasureIt (CoogleChrome).
4. GIF Animator – простая программа для создания анимированных картинок в формате gif. Хотя эту работу вполне можно выполнить и в Photoshop.

По мере накопления опыта у вас будут появляться свои любимые и привычные инструменты для работы. Это лишь рекомендуемый перечень к использованию. Не стоит их все сразу устанавливать. Для начала работы вполне достаточно иметь один из визуальных редакторов и браузер, но заняться плотным изучением из возможностей и освоением практической работы.

Итог -

Домашнее задание:

Установить дома на свой компьютер:
-AdobePhotoshop.

ТРЕНИНГ 2

Изучение инструментов AdobePhotoshop
Пробные уроки по дизайну в программе.

Цель:

Постепенно изучить все основные инструменты программы AdobePhotoshop и опробывать каждый из них на практике.

Материал для урока:

Для изучения, рекомендованные источники -
официальный мануал программы (Работа с инструментами) - https://helpx.adobe.com/ru/photoshop/using/using-tools.html

Панель инструментов играет важную роль для работы с Фотошоп. Некоторые команды можно выполнять только с панели инструментов, например, работа с текстом, или с инструментами рисования.

Рассмотрим инструменты.Первая группа, инструменты выделения.
1.Rectangles MarqueeTool – (Прямоугольное выделение). Выделение производится путем перемещения курсора при нажатой кнопке мыши. Если мы выделим область, а потом попробуем выделить еще одну область, то старое выделение пропадет. Для того чтобы добавить новое выделение к старому, перед началом выделения, нужно нажать и удерживать клавишу Shift. Для того чтобы вычесть новое выделение из старого нажмите и удерживайте клавишу Alt. Если вы будете совместно удерживать клавишу Shift и Alt,это приведет к тому, что выделенной, будет область совмещения старого и нового выделения.
EllipticalMarqueeTool (Эллиптическое выделение) – позволяет произвести выделение эллиптической области. Клавиши Alt и Shift, используются аналогично, прямоугольному выделению.
SingleColumnMarquee – выделение столбца пикселей.
SingleRouMarquee - выделение строки пикселей.

2.Lasso Tool (Лассо) – позволяет провести выделение произвольной формы. Выделение производится перетаскиванием курсора при нажатой левой кнопкой мыши. После того как область будет задана, можно вычесть из нее определенную область. Если держать кнопку Alt нажатой, можно выделить еще одну область выделения в пределах первого блока. Комбинация клавиш Shift+Alt – чтобы задать зону выделения.
PolygonalLassoTool (Многоугольное лассо). Допустим, надо выделить треугольник. Нажмите левую кнопку мыши и ведите курсор к основанию, после чего опять отпустите кнопку мыши, опять нажмите, и выделяйте основание треугольника, опять отпустите и нажмите кнопку, выделяйте вторую сторону, пока выделение, не дойдет до первой стороны. Двойным щелчком левой кнопкой, активизируйте выделение.
MagneticLassotoo l – (Магнитное лассо). Позволяет сделать выделение, по границам контрастности. Допустим нам надо выделить светлое на темном. Выберете инструмент магнитное лассо и переместите курсор в нужное место вашего изображения и с нажатой левой кнопкой мыши начинайте выделение. Photoshop сам будет искать области с максимальной контрастностью и будет вести по ним контур выделения. В процессе выделения программа автоматически выставляет опорные точки. Нажатием клавиши Backspace, можно удалить последнюю опорную точку и продолжать выделение. Многократное нажатие этой клавиши будет поэтапно удалять опорные точки.

17.Magic Wand – (Волшебная палочка) – инструмент выделения сплошных областей залитых одним цветом. Выберите инструмент волшебная палочка и переместите его в нужную область изображения. Щелкните левой кнопкой мыши, и у вас будет выделен участок одного цвета. Комбинации клавиш Alt и Shift работают также как и с прямоугольными выделениями.

16. Move (Перемещение). После того как область выделена, ее можно переместить. Выберите инструмент move и переместите курсор на выделенную область. С нажатой левой кнопкой мыши перетяните вашу область куда надо. Если при этом держать нажатой клавишу Alt, то будет создана копия перемещаемой области. Если надо переместить выделенную область строго по горизонтали или вертикали, то удерживайте клавишу Shift. Также если нужно точно поместить выделение в определенную точку, то можно использовать клавиши стрелок на клавиатуре, при нажатии на клавишу, выделение перемещается на 1 пиксель, а если удерживать нажатую клавишу Shift, то перемещение будет происходить с шагом 10 пикселей.

3.Crop (Кадрирование), предназначен для кадрирования растровой области документов, с последующей обрезкой тех ее частей, которые не вошли в данную прямоугольную область. Выберите инструмент Crop и переместите его в нужную часть изображения, и удерживая нажатой левую кнопку мыши, выделите нужную область. Вы увидите, что цвет выделенной области светлее, чем на остальном изображении, и именно эта область останется. После того как вы задали нужное выделение, нажмите клавишу Enter и преобразование будет выполнено.

18.Slice Tool (Раскройка), предназначен для формирования прямоугольной вырезки определенной формы. Применяется в Web, для уменьшения размера файла, т.е. вы можете разрезать изображение на три, четыре и.т.д. части, и к каждой из частей, применить другой формат.

19.Brush Toll (Кисть), является основным, из инструментов рисования, проводит линии с мягкими краями. Рисуем, водя мышкой с нажатой левой кнопкой по изображению. Перед тем как рисовать нужно, задать параметры инструмента. Можно выбрать диаметр кисти, цвет, прозрачность, режим смешивания пикселов.
PencilTool (Карандаш), дает линии с резкими зазубренными краями. Имеет такие же настройки, что и инструмент кисть.

20.History BrushTool (Архивная кисть) – позволяет вернуться к любому предыдущему состоянию изображения, отменяя одну или несколько операций редактирования. Перед использованием, в палитре истории нужно установить флажок, перед тем пунктом, к которому нужно вернуться. Использование кисти приведет к стиранию всех пунктов истории, которые находятся ниже флажка.

7.Blur Tool – (Размытие). Для размытия локальных участков изображения. Поставьте курсор в нужное место изображения, активируйте инструмент размытия. Выберите в строке параметров нужный размер, и, удерживая левую кнопку мыши, круговыми движениями размойте нужный участок.
Sharpen (Резкость), для локальной коррекции изображения. Повышает резкость, обрабатываемых участков изображения. Работает, так же как и инструментом размытия.
SmudgeTool (Палец). Принцип действия такой же, как и у первых двух инструментов.

22.Dodge Tool (Осветлитель) предназначен для локального осветления изображения. Работа происходит при перемещении инструмента по изображению с нажатой левой кнопкой мыши.
SpongeTool (Губка) - предназначен для уменьшения или увеличения цветовой насыщенности участков изображения, обрабатываемых инструментами. В строке атрибутов можно выбрать параметры для этого инструмента- диаметр кисти, Flow – сила воздействия, Mode-Saturate – увеличение насыщенности, Desiderate – уменьшение насыщенности. Все так же, с нажатой левой кнопкой мыши водим по нужным участкам изображения.

5.Clone StampTool (Клонирующий штамп), позволяет копировать одну часть изображения в другую. Надо определить участок изображения, который будет скопирован. Для этого надо нажать клавишу Alt и удерживая ее щелкнуть мышью в нужном месте, после этого клавишу можно отпустить, и начинать рисовать как кистью в нужном месте, только рисование будет проводиться изображением, взятым из скопированного участка.
PatternStamp (Узорный штамп), штамп работает аналогично клонирующему. Только вначале надо определить узор. Это делается в строке атрибутов, в графе Pattern.

6.Eraser (ластик), предназначен для удаления части изображения независимо от цвета.
MagicEraser – позволяет одним щелчком мыши стереть область залитую одним цветом. Стираться будет цвет, по которому произведен щелчок мыши. Действия этого инструмента сходно с действием волшебной палочки, только ластик не выделяет, а стирает изображение.
BackgroundEraser (ластик для фона), удаляет все, но оставляет фон, если включена опция ProtectForegroundColor.

21.Paint Bucket –(Заливка) закрашивает область наизображения, тем цветом который вы укажете. Используется цвет переднего плана. Выберите инструмент, выберите цвет. Затем подведите курсор к месту, которое надо залить, курсор примет форму ведра, и щелкните левой кнопкой мыши. Если нет выделений, то зальется весь документ. Чтобы залить текстурой, выберите в пункте Pattern (Текстура).
GradientTool (Градиент)– с помощью этого инструмента производится заливка с плавным переходом цветов. Может быть, как два базовых цвета, так и больше. Вначале выберите на панели атрибутов тип градиента, щелкнув по нужному типу левой кнопкой мыши. Затем выберите способ заливки градиентом, это пять кнопок, следующих за списком типа градиента. Для залития поместите курсор мыши в нужное место и, удерживая нажатой левую кнопку мыши, переместите курсор на нужное расстояние, когда вы отпустите кнопку мыши, участок изображения зальется выбранным градиентом.

4.Spot HealingBrush (Точечная восстанавлмвающая кисть), работает так же как инструменты клонирования. Но в отличие от штампа инструмент HealingBrush учитывает структуру, освещение и тени обрабатываемой области изображения. Выберите инструмент HealingBrush, нажмите Alt, удерживая левую кнопку мыши в определенном вами месте изображения. Проведите инструментом по участкам изображения требующим восстановления. Например, этим инструментом хорошо убирать блеск с некоторых частей изображения.
Patch (Заплатка) – позволяет восстанавливать выделенную область посредством клонирования пикселей взятых из другой области или образца. Чтобы получить качественный результат, выбирайте маленькие области для коррекции.

9.Инстумент PanTool (Перо) – позволяет вычерчивать пути, т. е. создаются опорные точки, которые Photoshop, автоматически соединяет сегментами.
FreeformPanTool – (Свободное перо).
AddAnchorPointTool –(Добавить опорную точку).
Delete Anchor Point Tool – (Удалитьопорнуюточку).
Convert Point Tool – (Угол).

24.Инструменты построения фигур:
RectangleTool – прямоугольник.
RoundedRectangleTool – прямоугольник с закругленными углами.
Ellipse – эллипс.
PolygonTool – многоугольник.
LineTool – линия.
CustomShapeTool – произвольная фигура. Позволяет создавать разнообразные фигуры, которые сразу заливаются цветом переднего плана. Для создания всех фигур, кроме произвольной фигуры, надо выбрать фигуру, поместить курсор в нужный участок изображения, и удерживая левую кнопку мыши, путем перемещения курсора создаем фигуру. Если после того как фигура создана нажать клавишу пробел, то фигуру можно переместить в любую точку изображения. Если держать нажатой клавишу Alt во время создания фигуры, то фигура будет создана из центра. Для создания произвольной фигуры, нужно ее выбрать в строке настроек инструментов в пункте Shape. Для изменения радиуса закруглений у фигуры прямоугольника с закругленными краями, в той же строке настроек, поставить нужное значение в пункте Radius.

8. Path Selection Tool –(Выделениеконтура).
Direct Selection Tool – (Прямоевыделение).

23.Horizontal TypeTool – (Горизонтальный текст). Для ввода текста выберите инструмент. Установите курсор в нужное место документа. Щелкните левой кнопкой мыши, появиться мерцающий курсор. Вводите текст с клавиатуры.
VerticalTypeTool –(Вертикальный текст) то же самое, только текст будет вводиться по вертикали. В строке параметров можно задать гарнитуру шрифта, размер текста и режим формирования абзацев цвет текста и формат.

25. Eyedropper ( Пипетка ) переносит цвет участка изображения, где мы кликнули мышкой, на цветовые поля панели инструментов, или отображает цифровые значения цвета в палитре Инфо.

ColorSampler (Сравнение цветов), позволяет установить до четырех точек с которых будут считываться значения цвета. Эти значения отображаются в палитре информации Info, Для каждой новой точки, в этой палитре открывается новое поле, в которое вписываются значения для этой точки. Для того, что бы удалить все точки, надо в строке настроек нажать кнопку Clear.

MeasureTool (Линейка) – предназначен для измерения расстояний и углов на изображении. Щелкаем по точке начала измерений, протягиваем курсор к точке окончания измерений, на палитре Info отобразится расстояние, между начальной и конечной точкой.

10.Notes Tool –(Заметки).
Audio Annotation Tool –(Звуковаяаннотация).

11.Hand( Рука ) – если изображение не помещается в рамку экрана, мы можем его перетаскивать.

26.Zoom Tool (Масштаб), если навести курсор на изображение,он принимает форму,крестик в кружке, и с каждым щелчком левой кнопкой мыши изображение будет увеличиваться. Если нажать клавишу Alt, то с каждым щелчком, изображение будет уменьшаться.

13.Quick Mask –(Режим быстрой маски).

12.Цветовые квадраты -основной и фоновый цвета

14 Режимы просмотра документов. Первый, стандартный режим, ставится по умолчанию, второй-полный экран с полоской меню, третий-полный экран. Переключаться между режимами можно так же нажатием клавиши F.

15. Передача изображения в ImageReady и обратно.

Так же у каждого инструмента есть своя панель с настройками.

Для примеров - рекомендую в качестве методик для каждого из инструментов использовать эти видеоурокиhttps://photoshop-master.ru/articles/tools_a/

Домашнее задание:

Потренироваться в работе с инструментами.
Используя изученные инструменты сделать 3 вида кнопочек для будущего сайта.

Пример: https://photoshop-master.ru/lessons/sait/knopka-v-stile-windows-vista.html

ТРЕНИНГ 3

Определение задачи по предназначению продукта (который будем создавать).
Подготовка к разработке макета.

Цель: Научится понимать, для чего может быть нужен сайт, и определять порядок работы при создании сайта (дизайна)

Материал для урока:

На этом тренинге необходимо определить, для чего нужен сайт, т.е. какие задачи он должен решать: предоставить общее представление о компании или многосторонне осветить какую-либо сторону человеческой деятельности, увеличить продажи по традиционным каналам или организовать веб-торговлю, провести рекламную или маркетинговую кампанию.

Цели веб-сайта, должны ставиться заказчиком, а затем, вместе с исполнителем они уточняются и корректируются.
Это один из самых важных этапов не только создания веб-сайта как такового, но важнейший этап интернет-маркетинга.
Если заказчик не понимает, для чего ему нужен веб-сайт, с 99% вероятностью он будет недоволен работой исполнителя и будет считать, что деньги, потраченные на создание веб-сайта, просто потеряны. В итоге, компания не будет использовать методы Интернет-маркетинга, что негативно скажется на ее конкурентных позициях на рынке.
После определения целей сайта надо совершенно четко и как можно подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.
Определение целевой аудитории веб-сайта - это не менее важный, чем определение целей веб-сайта, этап. Не всегда целевая аудитория компании из офлайн будет прямо проецироваться на он-лайн. Зная целевую аудиторию и аудиторию Интернета можно сделать некие предположения о том, кто будет являться основными посетителями веб-сайта.
Определение и как можно более подробное описание целевой аудитории сайта дает возможность разработать правильный дизайн для проекта, а также выбрать правильное направление для написания текстов. Очень важно говорить с аудиторией на понятном ей языке. И это требование в разы важнее в Интернете, чем в реальной жизни, т.к. в онлайне вас и вашего конкурента разделяет только клик мыши.

Помощь в разработке может дать обзор сайтов конкурентов. Возможно их идеи или ошибки, которые вы увидели, помогут вам собраться с мыслями. Нужно посмотреть несколько сайтов, из ТОП10 в разных поисковиках, обратите внимание на графическое решение, на тексты, на поисковые запросы. Это даст вам достаточно пиши для размышления, каким должен быть сайт вашей компании.

***ПАМЯТКА ДЛЯ ДИЗАЙНЕРА (добавляем ее себе, а в процессе работы делаем себе дополнительные полезные заметки, тем самым создавая себе конспект).

ТРЕНИНГ 4

Использование вспомогательных инструментов для разметки (Сетка и пр.)
Шрифты
Цветовая схема для проекта
Использование различных СТОКОВ для получения качественных материала для проектов.

Цель: Используя наброски, сделанные на предыдущем тренинге – начинаем его отрисовывать в фотошопе. Подбираем шрифты, цветовую схему и качественный материал для своего проекта.

Материал для урока:

Используя наброски и ранее изученные инструменты, начинаем отрисовывать наш набросок. Используем вспомогательные элементы (направляющие) для удобства работы.
В помощь преподавателям (тренерам).
http://hronofag.ru/2012/04/slice-tool/
https://habrahabr.ru/post/273795/
http://www.designonstop.com/tutorials/advanced/sozdaem-v-fotoshope-shablon-sajta-dlya-posleduyushhej-verstki.htm
http://photoshopworld.ru/lessons/138/
http://your3w.ru/sozdanie-maketa-sayta-v-fotoshope/
https://photoshop-master.ru/lessons/sait/sozdaem_stilnyy_dizayn_dlya_sayta_v_fotoshop.html

Учимся подбирать шрифты для своего будущего сайта. Его видимость, удобочитаемость, и пр.
http://html5book.ru/shrift-dlya-sita/
http://www.mistli.ru/kakim-dolzhen-bit-shrift-dlya-sayta

При выборе цветовой схемы для сайта можно пойти двумя путями.
1. Это самому – придумать себе несколько основных цветов для сайта.
2. Использовать различного вида сервисы которые помогут в подборе цветов, или по одному основному цвету или по изображению.
Список сервисов:
ColorExplorer – один из самых полезных инструментов для подбора цветовых схем и сочетаний. Позволяет на основе одного базового цвета подобрать релевантную цветовую гамму и разные оттенки, а также проанализировать потенциальную конверсию для разных типов цветовой схемы. Еще позволяет составлять цветовые схемы на основе выбранных изображений, импортировать css/html код из файлов и работать с RGB и hex-кодировкой цветов.
AdobeKuler – тоже классная штука. Позволяет при помощи палитры-колеса составлять цветовые гаммы и создавать готовые цветовые схемы, которые потом можно использовать на сайте или в приложении.
slayeroffice. Очень простой и удобный генератор палитр. Предлагает вам также оттенки, когда вы подбираете основной цвет.
ColorBlender – инструмент, который хорош для последующего использования полученных палитр в Photoshop или Illustrator. Есть готовая библиотека наборов, которые можно брать и использовать в вашем приложении.
0 to 255 – еще один «подборщик» фильтров, при помощи которого можно взять и получить темные / светлые оттенки цветов. Для тех, кто увлекается градиентами и тенями – самое то.
Сolorspire. В нем есть настройка сатурации и всякие быстрые настройки выбранного цвета.
ColorSchemer предлагает палитру из 16 цветов (в большинстве предыдущих вариантов базовых цветов 5). Еще его можно использовать без подключения к интернету на Mac или PC.

Сolorhunter можно выбирать готовые комбинации, основываясь на тегах, коде hex-цветов или по адресу URL изображений. Палитру цветов можно получить на основе загруженного изображения.
ColorCombos – снова схемы цветов, полная библиотека готовых образцов, можно сделать и собственную. Есть инструментарий для получения цветов с готового сайта.
ColorContrastChecker, который палитры не генерирует, но позволяет выбирать контрастные цвета. Для тех, кто знает толк не только в оттенках, но и в контрастах.

Список бесплатных фотостоков.
stock.xchng считается одним из лидеров среди бесплатных фотостоков (freestockphoto). На данный момент число изображений на сайте приближается к 400 тыс. Ресурс очень популярный среди веб-дизайнеров, иллюстраторов, полиграфических дизайнеров. В связи с этой популярностью использование фотографий с этого сайта довольно частое, найти уникальное фото сложно. Можно загрузить свои фотографии, иллюстрации на сайт. Регистрация для всех бесплатная.
Dreamstime — тоже один из самых популярных и доступных среди дизайнеров фотосток. На этом сайте есть и условно-бесплатные (от 20 центов за 1 скачивание) и совершенно бесплатные изображения. Бесплатные (сейчас их около 230 тыс.) можно найти в соответствующей секции (freesection).
Freerange этот фотосток разрешает бесплатно использовать качественные изображения для коммерческой и некоммерческой целей. Акцент сделан на качестве, а не на количестве, поэтому этот фотосток не такой многочисленный по кличеству фотографий, как другие крупные фотобанки.
Чтобы иметь доступ к поиску и скачиванию фотографий в высоком разрешения и высокого качества, нужно сначала зарегистрироваться. Регистрация бесплатна. Все изображения имеют по крайней мере размер 2400 x 1600 пкс.
morgueFile — публичный архив изображениий. Настоятельно рекомендован многими веб-дизайнерами. Сейчас сайт вмещает более 10 тыс. страниц по 24 фотографии на каждой. В основном фотографии высокого разрешения.
stockvault — это подборка фотографий довольно хорошего качества и размера. Количество изображений на данный момент боле 16 тыс. Все изображения только для некоммерческого использования, по лицензии CreativeCommonsattribution. Этот фотосток используется в основном веб-дизайнерами.
everystockphoto — очень мощный поисковик бесплатных изображений по фотостокам. Для поиска нужно ввести ключевое слово в строку поиска. В результатах поиска можно видеть тип лицензии для этого изображения, доступные размеры и разрешения. Для того, чтобы скачать фото, нужно зарегистрироваться. Регистрация бесплатно.
CreativeCommonsSearch — поиск по самой большой коллекции бесплатных и качественных изображений в одном месте. Поискфотопо Google и Yahoo, Flickr, Blip.tv, JamendoSpinExpressи Wikimedia Commons. Но будьте осторожны с результатами поиска, могут попадаться изображения с определенными условиями использования.
fotolia один из старейших фотостоков в интернете. На данный момент в базе более 14 млн. изображений, иллюстраций и видео. Стомость изображений начинается с 14 центов. Но есть и бесплатная секция.
iStockphoto — это один из известных фотостоковых сайтов в интернете с отличными качественными фотографиями в высоком разрешении. Бесплатная секция хоть и не так многочисленна, но зато фотографии в отличнейшем качестве.
Photogen с бесплатными изображения в высоком качестве. Для коммерческого и некоммерческого использования.
StockSnap — хороший, постоянно обновляемый фотосток бесплатных изображения в высоком качестве по лицензии CreativeCommons CC0 license (Данный тип лицензии означает, что вы можете копировать, изменять, использовать изображения как в личных так и в коммерческих целях, дополнительного разрешения не требуется.)

Домашнее Задание:

Используя опыт этого тренинга – в качестве закрепления материала, сделать макет на заказ для своих родителей.
При этом используем следующие шаги:

1. Шрифт
- выбираем шрифтовую пару, 2 начертания или шрифта.
- Прописать размеры: h1, h2, h3, s1, p, a, a: hover.
2. Цветовая палитра
Составить цветовую палитру
1. 3 основных цвета,
2. 1 акцидентный цвет,
3. 2 прозрачных цвета (для подложек, плашек)
3. Модульная сетка
Построить модульную сетку и выровнять по ней макет
4. Стоки
Купить или скачать на стоке качественное изображение или шрифт и использовать его.
5.Фото процесса
Сделать фото, демонстрирующие процесс выполнения работы под разными углами, черновики, и др. Используй эти фото создать статью в макете о выполнении работы.

ТРЕНИНГ 5

Концепция будущего сайта.

Цель: Еще раз поговорим о назначении будущего сайта, его концепции. Дать возможность найти недочеты и улучшить проект.

Материал для урока:

Каждому выдается вымышленная компания для которой нужен сайт. И ученик должен разработать концепцию. В отчете тренеру это должно быть примерно так:

Концепция сайта на примере нашей вымышленной компании:

Наша вымышленная компания "ЧЕРМЕТ" занимается предоставлением услуг: лазерная резка металла, плазменная резка металла, газовая резка, гибка листового металла, токарные работы, фрезерные работы.

Так же на данном сайте будет расположена следующая информация: "О компании", "Контакты", "Сделать заказ", "Примеры работ", "Полезная информация", "Новости".

• Кроме услуг на сайте компании ни чего не продается, и данные услуги являются единственным приоритетным направлением. Соответственно мы данные услуги выносим в отдельное меню сайта - меню услуг. Многие разработчики "не заморачиваются" и не выносят услуги в отдельное меню, а просто в основном меню вместе с другими ссылками делают ссылку на страницу с услугами, тем самым увеличивая на один клик путь пользователя от места его нахождения до интересующей его услуги. Так же, если мы выносим услуги в отдельное меню, то пользователь, находясь на любой странице сайта, будет видеть перечень предоставляемых вашей компанией услуг (тоже-самое касается и товара).
• Делаем еще одно меню, которое будет содержать ссылки "О компании", "Контакты". Так же некоторые контакты, такие как телефон, выносим в шапку и подвал для того, что бы пользователь, не делая лишних кликов, мог узнать номер телефона и позвонить. Обязательно с номером телефона указываем и код города - это дает пользователю понимание, что он нашел компанию именно в своем регионе.
• "Сделать заказ" мы выносим отдельной кнопкой на видное место, что бы пользователь без затруднения мог осуществить заказ с сайта.
• "Полезную информацию" лучше всего сделать блоком из анонсов 3-4 статей. Желательно, что бы показывались анонсы статей в тему просматриваемой страницы.
• "Новости" так же делаем блоком в виде анонсов с ссылкой на полную новость.
• "Примеры работ" можно было бы вынести в меню и сделать отдельной страницей, но мы сделаем намного интереснее: на страницах с услугами будут снизу отображаться соответствующие примеры работ в виде фотогалереи формата "карусель".

По идее, нужно расписать так же и каждый тип страницы, продумать, что и где будет расположено на ней, особенно это очень важно сделать для страниц с услугами, т.к. это должны быть продающие страницы. Нужно дать возможность ученикам поэкспериментировать над какой-нибудь отдельной страницей.

И еще: каждая страница сайта должна быть "продающей" - на какой бы странице сайта пользователь не находился, он обязательно должен получить интересующую его информацию.

Домашнее задание:

1. Поработать над деталями своего проекта и графически (желательно уже использовавфотошоп) показать 3 детали интерфейса крупно, описав каждую выгодой для пользователя. Например, почему так и не иначе выглядит блок с контактами.

2. Добавить в описание проекта целевое действие для клиента и свои контакты.

3. Написать текстом и отметить на скриншотах не менее 10 правок и улучшений своего макета.

4. Сделать обновленный макет с учетом правок. На следующий день.

5. Сделай пост фотографий с процессом, а так же скрины старого и нового дизайна макета на стене в соцсетях(ВК, Фейсбук) прокомментируйте.

ТРЕНИНГ 6

Рисование проекта на бумаге (как мы его видим)
Оптимизация под различные разрешения, различные девайсы.

Цель: Продумать и сделать наброски своего макета под различные девайсы.

Материал для обучения:
Смысл адаптивного макета в том, что сайт динамически (в режиме реального времени) подстраивается под размер вашего устройства, и если размер дисплея вдруг расширится / сузится (как при ресайзе браузера или смене ориентации планшета), то и сайт на это отреагирует незамедлительно, без перезагрузок и задержек.

В итоге мы получаем одну единственную версию сайта (site-on.net), которая великолепно отображается на любых устройствах и экранах, учитывая их особенности.

Углубляться в CSSне стоит, как это работает, главное что бы каждый нарисовал в фотошопе свой макет.

Для примера
http://www.seonews.ru/analytics/45-primerov-adaptivnykh-veb-saytov/

Домашняя работа:
В качестве домашней работы или ученики меняются своими макетами и дома для данного макета делают адаптацию.
Или тренер готовит совершено новые макеты. (Из интернета например здесь http://freepsd.ws/)

ТРЕНИНГ 7

Виды баннеров и их использование.
Разработка баннеров

Цель: рассмотреть на примерах различные виды баннеров, рассмотреть основные размеры. И с помощью фотошопсделать анимированный gifбаннер.

Материалы для занятия
Виды баннеров

Баннер представляет собой графическое изображение или анимацию. В зависимости от способа создания выделяется несколько видов баннеров. Типология во многом связана с задачей — каждый вид эффективен для выполнения определенной задачи в рамках конкретной баннерной сети.

GIF-баннер

Перечислим положительные черты этого вида баннеров.

• Основной плюс использования стандарта GIF — возможность рисовать анимированные баннеры. До широкого распространения flash-технологий это была единственная возможность создания динамических баннеров без использования программирования.
• Достаточно небольшой размер получаемых файлов.
• Поддержка прозрачности (весьма полезная возможность при изготовлении баннеров).

Недостатки GIF-стандарта:

• в таком виде баннеров трудно реализовать «навороченный» экземпляр, возможны лишь несложные смены слоганов и анимации.
• в формате GIF невозможно создать интерактивный баннер.

JPEG-баннер

JPEG-стандарт был создан для сохранения изображений фотографического качества в файлах небольшого размера. Он оптимально подходит для создания статичных графических баннеров с использованием фотографий. Главные достоинства такого вида баннеров — малый «вес» и возможность размещения практически в любой сети. Недостатки — статичность и, опять же, невозможность создания интерактивного баннера. В данный момент весьма распространен (прежде всего потому, что прост в изготовлении, однако все активнее вытесняется более эффективными анимированными конкурентами).

Java-баннер

Представляет собой обычныйJava-апплет, встроенный в HTML-документ. Ввиду технической сложности и большого «веса» использовать баннеры такого вида стоит лишь для достижения интерактивности. Замечено, что если при наведении указателя мыши на баннер происходят динамичные изменения или проигрывается звук, то его эффективность окажется гораздо выше неинтерактивного аналога. Основными препятствиями к распространению такого вида баннеров стала сложность их изготовления и несовместимость с большинством баннерных сетей. Кроме того, с появлением flash-баннеров все интерактивные эффекты стало гораздо проще воплощать с помощью ActionScript.

Flash-баннер

Наиболее молодой, перспективный вид. Основные преимущества flash-технологии следующие.

• Втакого вида баннерах возможно создание яркой, полноценной анимации при минимуме затраченных усилий.
• Размер flash-анимации во много раз меньше аналогичных по внешнему виду, но реализованных с использованием, например, GIF. Чем сложнее и правдоподобнее мультипликация, тем больше проявляется это различие.
• Flash позволяет создавать интерактивные баннеры, причем куда проще, чем с использованием Java.

У баннеров такого вида есть еще одно преимущество — они загружаются даже тогда, когда пользователь отключает отображение графических элементов. В этом случае их эффективность резко возрастает: на фоне полного отсутствия на странице графики яркийflash-баннер обязательно привлечет внимание.

Размеры баннера

Очень важной характеристикой баннера является его размер в байтах, то есть место, которое файл баннера занимает на сервере. Чем больше размер баннера, тем дольше баннер будет загружаться на страницу и тем меньше вероятность, что пользователь успеет посмотреть на него, прежде чем перейдет на другую страницу; следовательно, размер баннера является одним из параметров его эффективности. Сайты, размещающие баннеры, обычно лимитируют размер их файлов.