Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности
Скачать 3.38 Mb.
|
| Тема: Создание дизайна сайта Цель работы: научиться разрабатывать визуальный образ сайта. Практическое задание: разработать дизайн сайта, используя программу Adobe PhotoShop Основная литература: [9, 15, 24, 27, 33, 34, 40] Дополнительная литература: [3, 4, 10, 28, 29, 56, 58] В этом замечательном уроке мы будем учиться рисовать дизайн сайта на примере игрового портала. Урок достаточно длинный, но в тоже время легкий и понятный. По данной технологии можно создавать не только игровые сайты. Это финальный результат:  Порядок выполнения работы: 1. Создайте новый документ Размер 760×770 пикселей Фон: не играет роли 2. Создайте еще один документ размером 4×4 (мы будем делать шаблон) 3. Увеличиваем на 1600%, выбираем инструмент pencil tool (размер 1 пиксель) и начинаем рисовать несколькими цветами, можно использовать эти  4. Затем идем Edit > define pattern Выбираем имя шаблона и нажимаем OK 5. Создадим новый слой ( CTRL+SHIFT+N) Выбираем инструмент Paint Bucket Tool. И используем тот шаблон, который мы сделали  Заполняем наш будущий дизайн странички этим видом заливки  6. Затем идем Filter > render > Lightning Effects, и устанавливаем следующие настройки  7. Затем выбираем Rounded rectangle tool, устанавливаем радиус на 5 пикселей, и создаем форму на нашем рисунке  8. Идем Edit > Transform > Warp Tool (у вас есть Warp tool, только если у вас CS2 или выше) Для warp tool используем такие настройки  Вот результат 9. Копируем этот  слой (CTRL+J) и создаем такую же форму, но чуть меньше и располагаем под первым. 10. Затем выбираем инструмент rounded rectangle Tool, создаем простую форму белого цвета, можно использовать другой для наглядности.  11. Затем выбирайте оба слоя  Объединяем их, путем нажатия CTRL+E  12. Затем загрузите выделение для большой формы (для этого идем сюда Select > Load selection)  13. Будьте уверены инструмент Rectangular Marquee Tool уже выбран, затем переместите выделение так же, как и на картинке  14. Сейчас вы должны применить rasterize к главной форме  15. будьте уверены главная форма уже выбрана, затем нажмите CTRL+SHIFT+I (это обратит ваше выделение) 16. нажмите Delete на вашей клавиатуре 17. Затем CTRL+D Вот результат  18. Снова загрузите выделение для большой формы.  19. Выбирайте rectangular Marquee Tool (используя следующие настройки:)  20. Затем с помощью rectangular marquee tool создаем вот такое выделение:  Вы получите что-то вроде этого после того, как отпустите кнопку мыши.  21. Создайте новый слой ( CTRL+SHIFT+N) 22. Выбираем paint bucket tool, и нажимаем один раз внутри выделения (используйте тот цвет, который хотите)  23. Затем нажмите CTRL+D, и идите в настройки стиля слоя     Вот результат  24. Затем для главной формы используйте те же настройки стиля  25. Для белой формы примените следующий стиль  Вот результат  26. Выбираем белый слой и маленький оранжевый слой в нашем меню слоев и перетащите их на кнопку" create a new layer "  Это скопирует оба слоя, но при этом 2 останутся выделенными. Объедините их нажатием CTRL+E  27. Выделим этот слой и идем Edit > Transform > Flip Vertical И с помощью мыши размещаем его следующим образом:  28. Затем выбираем Rounded rectangle Tool и создаем форму, как на рисунке  29. Применяем Rasterize для этой формы, затем создаем форму другого цвета и размещаем, как на рисунке  30. Загружаем выделение для этой формы (для загрузки выделения нажмите CTRL + левой кнопокй мыши по слою с нашей формой) Вы увидите выделение вокруг формы  31. Выбираем слой с оранжевой формой  32. Нажимаем CTRL+SHIFT+I (обращение выделения), и с помощью eraser tool удаляем некоторые части нашей формы (следите за зеленым цветом)  Использовали зеленый, чтобы вы увидели где надо удалить  33. Снова нажимаем CTRL+SHIFT+I, у вас уже выбран инструмент Rectangular marquee Tool, перемещаем выделение, как на рисунке  34. Затем стираем всё внутри выделения с помощью Eraser tool  35. Нажимем CTRL+D, Затем создаем выделение, как на рисунке, с помощью Rectangular Marquee Tool  36. Будьте уверены, выбран оранжевый слой. Снова стираем Eraser tool. Нажимаем CTRL+D  37. Создаем другое выделение  38. Чистим с помощью eraser toll, так же, как на рисунке  39. Примените следующие стили для слоя Вот результат  40. Выбираем Rounded Rectangle tool еще один раз, и создаем еще 2 две формы (цвет не важен)  41. Применяем Rasterize к этим слоям 42. Тогда с помощью Esraser tool удаляете главную часть этих 2 зеленых форм (когда Вы будете удалять держите клавишу SHIFT — Таким образом Вы удалите очень хорошо) Вот результат  43. Примените следующие настройки стиля     44. Теперь продублируем заголовки для наших блоков с контентом и разместим как на рисунке  45. Теперь, используя Rounded rectangle Tool, создадим несколько простых форм и разместим их примерно так: 46. Затем добавим какие-нибудь пиксельные иконки, или что-то похожее, ну и конечно же не забудем добавить некоторый текст рядом с иконками.  47. Вставляем очищенную картинку и простой логотип. Вот, в принципе, и все =)  А так же вы можете добавить формы для логина в правой части сверху. Использовали Rounded rectangle tool для добавления этих форм. Вот финальный результат. Практическая работа №3 (2 часа) Тема: Web-дизайн в PhotoShop и Image Ready Цель работы: научиться разрабатывать визуальный образ сайта. План
Основная литература: [9, 15, 24, 27, 33, 34, 40] Дополнительная литература: [3, 4, 10, 28, 29, 56, 58] Разработка дизайна веб- сайта с помощью PhotoShop или Image Ready начинается с создания новых документов с размерами, соответствующими размеру на экране будущей веб- страницы и всех ее веб- элементов. Затем нужно задать структуру веб-страницы с помощью сетки разметки – так определяются области страницы с разным назначением; это могут быть столбцы, строки, прямоугольные фрагменты. Такой подход удобен, когда в веб-странице используются HTML-таблицы, поскольку сетка помогает выровнять элементы и позволяет сформировать более явно выраженную структуру, которую легко перевести в таблицы.
Создание веб- страницы. И в PhotoShop, и в Image Ready новую страницу можно сформировать командой File\New (Файл\Создать). В открывшемся диалоговом окне веси название нового файла, выбрать один из заданных размеров в списке Size (размер) или ввести ширину и высоту прямо в поля Width (ширина) и Height (высота) и затем переключателем в разделе Background Contents (содержимое фонового слоя) (PhotoShop) или Contents of first Layer (содержимое первого слоя (Image Ready) выберите исходное заполнение самого нижнего слоя документа. Доступны варианты White (белый), Background Color (цвет фона) и Transparent (прозрачный). Если вы работаете в PhotoShop, проверьте разрешение – оно должно равняться 72 ppi, в качестве режима должен быть установлен RGB, и, кроме того, измените единицы разрешения на пиксели. Диалоговое окно New Document (создать документ) в Image Ready немного отличается от аналогичного диалогового окна в PhotoShop. Поскольку программа Image Ready предназначается только для веб- дизайна, в ней автоматически формируется документ с разрешением 72 ppi, в качестве единиц измерения используются только пиксели и устанавливается цветовой режим RGB. Кроме того, предлагается несколько заданных размеров документа: Web Banner (веб- баннер), Half Web Banner (половинный веб-баннер), web-page (веб- страница), размер которой совпадает с местом, остающимся для просмотра веб- страницы на мониторе с разрешением 800x600 и 1024x768 пикселов. Создание разметки Сетка из направляющих определяет области веб- страницы. В Image Ready или PhotoShop направляющие устанавливаются путем вытягивания мышью из соответствующих линеек и расположения в окне документа. Но в Image Ready есть дополнительное средство, позволяющее создавать шаблоны с регулярной сеткой из направляющих. Чтобы им воспользоваться , необходимо выбрать команду View\ Create Guides (Вид\ Создать направляющие), и на экране появится диалоговое окно Create Guides (Создать направляющие). Для добавления в окно документа горизонтальных и (или) вертикальных направляющих нужно установить флажок Horizontal Guides (горизонтальные направляющие) и (или) Vertical Guides (вертикальные направляющие). Затем для обоих типов направляющих определить их количество. Это можно сделать одним из трех способов:
Количество направляющих должно находиться между 0 и половиной ширины или высоты изображения минус 1. Например, для изображения шириной 640 пикселов максимальное количество горизонтальных направляющих равно 319. Расстояние между направляющими в пикселях не должно быть меньше 2 и больше ширины или высоты изображения минус 1. Например, для изображения 480 пикселов высотой максимальное расстояние между горизонтальными направляющими равно 479 пикселям. Кроме того, можно удалить все существующие в изображении направляющие, установив флажок Clear Existing Guides (стереть существующие направляющие), а чтобы видеть новые направляющие во время их настройки, необходимо установить флажок Preview (предварительный просмотр).
Количество цветов на экране монитора компьютера зависит от многих факторов и, как правило, чем больше цветов может отобразить монитор, тем лучше выглядит на нем изображение. Но отличный вид изображения на вашем компьютере вовсе не гарантирует, что оно окажется столь же хорошим на компьютере посетителя вашего веб-сайта. На цвета влияют следующие несколько факторов:
Цветовая таблица Цветовой таблицей называется пронумерованный список цветов изображения, используемый для сохранения в форматах GIF и PNG-8. В таком списке может содержаться максимум 256 цветов и минимум 2 цвета. Работая над графическими элементами веб- страницы, можно не заботиться о точной таблице цветов, но при оптимизации изображений для сохранения их в формате GIF или PNG-8 цветовая таблица играет очень важную роль. Сглаживание Сглаживанием называется перемешивание в одной области изображения точек двух или более цветов с целью создания визуального эффекта нового цвета, не входящего в диапазон отображаемых или хранимых цветов. Так, например, если изображение было создано на компьютере, содержащем в своей палитре тысячи цветов, а затем оно демонстрируется на мониторе, отображающем только 256 цветов, любой цвет изображения, не входящий в эти 256, или заменяется другим близким цветом из палитры, или формируется путем смешивания точек нескольких цветов, то есть сглаживанием. Сглаживание графики может выполняться двумя способами:
Веб- палитра цветов Веб- палитра цветов – ее также называют безопасной – содержит 216 цветов, которые входят в цветовые таблицы компьютеров и отображаются одинаково на всех платформах. Использование безопасных для веб цветов немного уменьшает размер файла. Определить, что в изображении должно состоять из цветов веб- палитры, можно двумя способами: При работе над ними. Как правило, если планируется сохранять изображение с цветами только из веб- палитры, лучше работать с ней с самого начала. Чтобы обеспечить использование цветов из веб- палитры, загрузите в палитру Swatches (каталоги) с помощью меню заданную таблицу Web Safe Color (веб- безопасные цвета) и выбирайте цвета только оттуда. При оптимизации. Когда изображение уже готово к оптимизации для размещения на веб- сайте, несколько элементов настройки в палитрах Optimize (оптимизация) и Color Table (цветовая таблица) помогут преобразовать его цвета в безопасные цвета из веб- палитры. Настройка гаммы в ImageReady При создании изображений для размещения в Интернете необходимо учитывать настройки гаммы на мониторах посетителей вашего сайта. ImageReady позволяет выполнять специальную цветовую коррекцию для настройки изображения под различные значения гаммы. Выберите команду Image\Adjustments\Gamma (изображения \настройки \гамма), в открывшемся диалоговом окне выполните настройку и нажмите ОК. С помощью регулятора измените значение гаммы для изображения (или введите его в поле Gamma (гамма)). Это не абсолютное значение, а только коррекция текущего. Настройка гаммы в этом диалоговом окне изменяет фактические значения цветов всех пикселей изображения. Любая команда из подменю Preview (предварительный просмотр) меню View (вид) меняет вид изображения на экране монитора, но не приводит к редактированию самого изображения.
Структура многих веб- сайтов задается с помощью таблиц – это позволяет обеспечить согласованный вид страниц сайта и аккуратно расположить элементы дизайна, сформированные в PhotoShop и ImageReady. И PhotoShop и ImageReady способны сохранять html-код таблицы вместе с изображениями, делается это установкой параметров вывода. Но кроме того, в ImageReady можно настраивать таблицы прямо в изображении, определив фрагменты нарезки как ячейки таблицы. Эти фрагменты преобразуются в таблицы, вложенные в основную таблицу изображения. Атрибуты таблиц устанавливаются с помощью палитры Table (таблица), в них входят интервалы между ячейками и ширина границ в таблице, а также отступ от границ ячейки до ее содержимого. Создается таблица следующим образом. Сформируйте фрагменты нарезки, затем с помощью инструмента Slice (нарезка) сгруппируйте вместе все фрагменты, которые будут частью одной таблицы. Для этого выделите два и больше фрагмента и выполните одно из действий:
Для дополнения выделенных фрагментов нарезки до прямоугольной таблицы ImageReady автоматически создает дополнительные пользовательские фрагменты. Кроме того, программа также автоматически формирует пробельные ячейки (под названием spacer.gif), если это требуется для правильной демонстрации изображения в определенных браузерах. При этом в палитре Web Content (веб- содержимое) рядом с названием таблицы появляется желтый треугольник с восклицательным знаком. Чтобы таблицу отредактировать, ее нужно выделить в документе. Выполняется это одним из способов:
Параметры таблицы задаются в палитре Table (таблица)
Чтобы удалить таблицу, основанную на нарезке (разгруппировав при этом фрагменты), выделите таблицу и выполните одно из действий:
Для первых двух случаев появится диалоговое окно, в котором нужно выбрать, что именно требуется удалить: Table Only (только таблицу) или Tables and Contents (таблицу и содержимое).
Часто во время работы появляется желание узнать, как же будет выглядеть создаваемая страница или элемент дизайна при размещении в Интернете. Конечно, множество факторов влияют на вид изображения, которое размещено на веб- сайте, в результате документ может сильно отличаться от своей же копии на компьютере дизайнера. Тем не менее ImageReady предоставляет несколько инструментов, позволяющих просмотреть изображение, смоделировать различные условия отображения и в итоге принять оптимальные решения в процессе работы. Предварительный просмотр на холсте ImageReady позволяет просматривать текущую работу прямо на холсте документа, как будто он является веб- браузером, но с ограниченными возможностями. Редактировать документ в режиме просмотра невозможно. Чтобы просмотреть изображение в окне документа ImageReady, выберите команду Image\Prewiew Document (Изображение \Просмотр документа) или нажмите кнопку Preview Document (предварительный просмотр документа). Предварительный просмотр оптимизированного изображения. В ImageReady можно выводить на экран исходное несжатое изображение и (или) один или три варианта его оптимизированных версий. Для перехода от одного вида к другому достаточно щелкнуть на нужной вкладке в левом верхнем углу окна документа:
Предварительный просмотр в браузере ImageReady позволяет открыть изображение в веб- браузере.
В программе PhotoShop есть мастер, с помощью которого можно быстро сформировать веб- страницы, представляющие фотоальбом. После определения папки с файлами и настройки нескольких параметров PhotoShop создаст целый веб- сайт, состоящий из страниц с миниатюрами всех изображений и страниц с полноэкранными их версиями. При этом вы можете выбрать любой из предлагаемых шаблонов либо, если чувствуете в себе силы, отредактировать существующий шаблон или сформировать свой собственный. Рассмотрим процесс создания фотоальбомов для веб.
По окончании процедуры откроется веб- броузер, и PhotoShop передаст туда получившийся продукт (загрузится страница index.html). Практическая работа №4 (6 часов) |
Похожие:
 | Основная образовательная программа подготовки специалиста по специальности (специальностям) | | Основная образовательная программа подготовки специалиста по специальности (специальностям) |
| «Специальная дошкольная педагогика и психология» с дополнительной специальностью «Логопедия» | | Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования |
| Автор – составитель программы: Т. Д. Тегалева, старший преподаватель кафедры социальной работы и организации работы с молодёжью | | Россия, научить оценивать и прогнозировать происходящие в мире процессы, а также процессы, происходящие в его субрегионах, странах... |
| Целью преподавания дисциплины является ознакомление студентов с понятием информационные ресурсы, общей характеристикой процессов... | | Цель курса: обучение студентов ведению бухгалтерского учета в системе 1С: Предприятие, обучение программированию в системе 1С: Предприятие,... |
| Автор программы: старший преподаватель кафедры иностранных языков и методики преподавания Квасюк Е. Н | | Рецензенты: Беличенко Е. А., к ф н., доцент зав каф англ языка и английской филологии мгпу |