ЛАБОРАТОРНАЯ РАБОТА ’ 2 РАЗРАБОТКА ДИЗАЙНМАКЕТА САЙТА В PHOTOSHOP Цель работы- закрепить знания и навыки нео.html
Работа добавлена на сайт samzan.net:
ЛАБОРАТОРНАЯ РАБОТА № 2
РАЗРАБОТКА ДИЗАЙН-МАКЕТА САЙТА В PHOTOSHOP
Цель работы: закрепить знания и навыки, необходимые для проектирования и разработки web-приложений.
Теоретические сведения
Общий подход к размещению графики на странице
Графические вставки очень оживляют сайт. Даже на таких "текстовых" сайтах, как поисковые системы, всегда есть некие картинки, баннеры, буквицы и всякое тому подобное. Ну а если бы не было - их надо было бы придумать, настолько уныло выглядят страницы, на 100% состоящие из текста. С другой стороны, перенасыщение сайта графикой тоже производит удручающее впечатление, да и грузится он заметно дольше. По многочисленным публикациям можно сделать вывод – "вес" страницы не должен превышать ста килобайт (для фотоальбомов и качественных фотографий можно больше - там посетитель заранее готов подождать).
Графическое решение - на всех страничках - единая цветовая гамма, логотип и два типа отбивок для пунктов меню - красная точка и "компас". Только заимствованные скрипты несколько выбиваются из общего цветового ряда - но это выглядит интереснее. Остальные цветовые пятна на страницах будут порождаться естественным путем - темы сайта обязывают представлять большое количество графического материала.
Логотип - это отдельная тема. Он должен быть. Это торговая марка, то, что выделяет из великого множества таких же владельцев сайтов. Кроме эмоциональных доводов в пользу присутствия на сайте логотипа есть еще и прагматический - верхние углы экрана находятся на периферии зрения и помещать туда важную информацию бессмысленно. Но что-то поместить нужно - очень меняется общее впечатление от страницы.
Баннеры. Баннеры придают странице динамику. Если баннерная сеть большая, то баннеры редко повторяются, стало быть появляется движение информации без всякого участия автора сайта. Кроме того, обычно баннеры исполняются в виде файлов gif и довольно весело моргают. Если же количество баннеров больше 3х на одном экране - страницу станет невозможно читать.
Общий вывод по баннерам - пара баннеров не ухудшает общий вид страницы, придает ей динамику, возможно приводит пару-тройку посетителей в день. Ну и для тех, кого раздражает чужая реклама - можно наделать своих баннеров, поставить скрипт-баннерокрутилку и весело заманивать посетителей со своих страниц на свои же. Изготовить баннер можно опять же в Macromedia Fireworks MX или в Adobe Image Ready - это дело вкуса.
Подготовка графических файлов для Интернета
Для Интернета используют графические файлы форматов jpg, png, gif. jpg и png - используются для многоцветных изображений ( в том числе фотографий ), а gif - для элементов оформления страницы с ограниченным количеством цветов и баннеров с анимацией.
Общая рекомендация при использовании графики в оформлении web-страниц - не перегружать страницы графикой. Чтобы страница быстро грузилась, ее общий "вес" не должен превышать 200 килобайт. Конечно, если пользователь Интернет сидит на скоростной линии - его не будет слишком волновать скорость загрузки, зато взволнует плата за трафик ( за количество скачанных из Интернета кило- и мегабайтов ) и, стало быть, рекомендация остается в силе.
Самый простой способ сжатия картинок - использование для этой цели программы Adobe Photoshop. При этом надо иметь в виду, что разрешение графических файлов для интернета - 72 пикселя/дюйм, максимальные размеры картинки, еще помещающиеся на экране - 760 пикселей ( ширина ) и 560 ( высота ). Конечно, экраны могут быть и побольше, но рассчитывать лучше на минимальные возможности посетителя странички. Задача сжатия картинки решается в два действия:
- выбрать в меню Редактирование/Размер изображения и выставить необходимые разрешение и ширину ( или высоту ). Галка в окошке "Сохранять пропорции" должна быть выставлена, тогда второе измерение изменится автоматически;
- выбрать в меню Файл/Сохранить для Web. В получившемся окне для форматов jpg, png можно ничего не менять, а для формата gif - можно уменьшить число цветов до минимально необходимого. Для формата jpg можно в следующем появившемся окне уменьшить качество, что приведет к уменьшению размера картинки.
Если приходится сжимать большое количество фотографий, удобнее применять программы для групповой обработки графических файлов. Из того, с чем приходилось сталкиваться лично, лучшие - плагин для Photoshop - Web Image Guru и программа Jpeg Imager. Они позволяют работать с большим количеством графических файлов одновременно, получая на выходе набор файлов с заданным качеством и размерами.
Теперь о размещении фотографий и картинок на Интернет-страницах. Очень раздражает просмотр фотографий по одной. Еще более убого будут выглядеть картинки в полноразмерном варианте по несколько штук на странице. Оптимально предъявлять фотографии в виде их копий уменьшенного размера ( preview, предосмотр ) по 15 - 30 штук на страничке. При таком способе для посетителя страницы облегчается выбор фотографий для просмотра и уменьшается вес страницы ( трафик ). При нажатии на превьюшку должна открываться новая страничка с соответствующей полноразмерной фотографией. Размер превьюшки, на мой взгляд, оптимально - 150 пикселей ( больший размер ).
Макет сайта в Photoshop
Большинство дизайнеров рисуют макеты в Photoshop, есть и любители CorelDRAW, Illustrator, в которых достаточно удобно создавать рисованные макеты, наполненные вектором вдоль и поперек. “Векторные” макеты имеет смысл рисовать в том случае, если необходима гладкая, легко масштабируемая картинка. Растр не располагает столь широким пространством для творчества, хотя имеет и свои определенные достоинства.
Любая разработка графического интерфейса (а дизайн-макет и есть своего рода тот самый интерфейс) начинается с его бумажного представления, т.е. необходимо сначала нарисовать эскиз макета на бумаге, а затем переносить все это дело на экран компьютера. Не спешите садиться за компьютер и сразу же рисовать в фотошопе макет. Во-первых, это свойственно тем, у кого плохо с терпением, а во-вторых, такой “полет мысли” может ни к чему хорошему не привести, поскольку любой дизайн требует усидчивости, вдумчивой проработки: “Ага… Здесь не подойдет, нужно переместить… Ага, а здесь не так скомпоновано, люди не станут на это даже смотреть!”
Дизайн-макет – это интерфейс. И этот интерфейс должен быть понятен пользователю, обязан донести до него сообщение, предусмотренное создателями.
Схематичный эскиз дизайн-макета
Таким образом, начните с бумажной заготовки вашего будущего макета. Нарисовать можно сколько угодно вариаций, ведь выбор лучшего варианта многократно увеличится. Ассортимент в любом случае важен и выгоден. И не только для дизайнера, но и для заказчика.
Когда эскиз готов и выбран лучший вариант, существует два пути: прямая и косвенная интерпретация зарисовки в электронный вид, т.е. создание дизайн-макета в Photoshop/Illustrator и т.п.
Прямая интерпретация заключается в переводе эскиза в компьютерную графику с помощью дополнительных устройств ввода. Например, тот же сканер – наиболее популярное устройство для этих целей Достоинства данного метода заключаются в том, что мы можем обрисовать заготовку (да, именно обрисовать).
Это значительно легче косвенного метода, который заключается в разработке макета “на глаз”: перед вами лежит бумажный эскиз, и вы постепенно рисуете его на компьютере. На мой взгляд, у этого подхода нет твердой почвы для объяснения его полезности, поскольку прямая интерпретация в любом случае дает ту же гибкость в рисовании, что и косвенная – просто прямо по эскизу (скажем, загоним его в фотошоп и установим фоновым слоем с малым процентом прозрачности) рисовать значительно легче и комфортнее, а все необходимые изменения, которые могут придти вам в голову в любой момент создания, можно легко поправить.
Еще один пример схематики
Ко всему прочему, прямая интерпретация просто необходима при создании макетов с художественным упором, содержащих большое количество рисунков, а не обычную схему. К примеру, вряд ли получится без планшета или сканера создать с помощью одной лишь мышки нарисованный от руки лес, панораму города, что угодно.
Пример рисованного эскиза
Индивидуальное задание
Согласно разработанному в лабораторной работе №1 макету (модульной сетке) разработать дизайн-макет сайта в Photoshop.
2. Еміль Дюркгейм про основні типи суїциду, його причини та напрямки профілактики
3. Национальный исследовательский ядерный университет МИФИ ИАТЭ НИЯУ МИФИ Медицинский факультет
4. Тема 1 По материалам семинара г
5. Контрольная работа по дисциплине ИСЭ Вариант 1 Исполнитель-
6. Вариант 16 Работу выполнил студент группы ИС147 Арсений Борисович Чистый Работу
7. Значения коэффициентов для построения контрольных карт
8. . Становление конфликтологии Конфликтология относительно молодая наука
9. вариант сочинения- Многие художники изображали зиму но лишь Нисский решился на необычный эксперимент ~ он пе
10. Лабораторна робота 1 Мета роботи- Вивчення особливостей трафаретного друку
11. способы управления эмоциями
12. Экономическая география Франции
13. тема стандарткост представляет собой систему учета затрат и калькулирования себестоимости с использован
14. . Характеристика предлагаемых мероприятий 2.
15. Тема 1 ПЕРВІСНИЙ ЛАД В УКРАЇНІ Палеоліт
16. Введение. 3 Коммуникативная функция и онтогенез речи
17. Виды источников административного права и определение их сущности
18. НАЛОГОВОЕ ПРАВО для студентов специальности 030501 ~ Юриспруденция М
19. Аудит нематериальных активов
20. Цифровые фотоаппараты и видеокамеры во внеклассной работе со школьниками