Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Свой CMS сайт - это просто!" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Октябрь 2005 → | ||||||
|
1
|
2
|
|||||
|---|---|---|---|---|---|---|
|
7
|
8
|
9
|
||||
|
10
|
11
|
12
|
13
|
14
|
15
|
16
|
|
17
|
18
|
19
|
21
|
22
|
||
|
24
|
25
|
26
|
27
|
28
|
29
|
30
|
|
31
|
||||||
Автор
Статистика
3.034 подписчиков
-2 за неделю
-2 за неделю
Профессиональное создание сайтов с помощью CMS SiteEdit Первые шаги при создании сайта. Первичное наполнение сайта.
| Информационный Канал Subscribe.Ru |
Система управления сайтом SiteEdit - это новый удобный инструмент бизнеса, с помощью которого вы сможете легко и быстро создать и наполнить информацией собственный web-сайт.
EDGESTILE SiteEdit - Мы сложное делаем простым!
Здравствуйте, все!
Тема этого выпуска: Создание уникального дизайна. Работа с картой дизайна. Примеры.
Первые шаги при создании сайта. Первичное наполнение сайта.
Перед тем как придать сайту определенный дизайн, необходимо, его наполнить. Для этих целей можно использовать пример на демо-диске или наполнить его самостоятельно.
Необходимо продумать и подготовить:
Структуру сайта (количество и степень вложения страниц)
Определиться с видом меню (выпадающее, раскрытое, раскрывающееся)
Решить под какое разрешение экрана будет создаваться сайт
Разработать эскиз сайта (эскиз сайта должен содержать максимально возможное количество элементов будущего сайта, с оформлением текстов, графики, таблиц, форм и т.д., для того чтобы Ваш сайт имел законченный единый стиль)
Подготовить первичное наполнение сайта (включая тексты, рисунки, таблицы, всевозможные формы, анкеты, рассылки и т.д.)
Подготовка эскиза сайта в Photoshop.
- Резка эскиза сайта. Работа с инструментом «Slice» (фрагмент) и «Select Slice»
- Оптимизация изображений для web. Примеры.
Множество разнородных графических элементов Web-страницы могут потребовать для оптимизации различных параметров, или даже форматов. В таких случаях большое изображение можно разрезать на фрагменты и задать для каждого фрагмента индивидуальные параметры.
Не стоит увлекаться резкой изображения на огромное множество мелких картинок. Чем больше графических фрагментов на сайте, тем продолжительнее будет время запросов к серверу, на котором находится сайт и тем дольше будет загружаться сайт. Это особенно заметно, если сайт находится на заграничных серверах.
На Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различные гипертекстовые ссылки, наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя CSS редактор.
Определение фрагментов в Photoshop
1. Откройте изображение, эскиз сайта в формате .psd
2. Включите режим отображения фрагментов нажатием кнопки инструмента Slice (Фрагмент) на панели инструментов. Как видите, даже если изображение не разрезано, Photoshop считает его разрезанным, правда на единственный "кусок". Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой.
3. Работа с инструментом Slice (Фрагмент) похожа на работу с инструментом Crop (Обрезка): сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов.
4. Поместите курсор инструмента Slice (Фрагмент) в левый верхний угол изображения; Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется нужный Вам фрагмент. Затем отпустите кнопку мыши.
Автоматические фрагменты
Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут быть только прямоугольной формы, программа автоматически создала еще два фрагмента. Пользовательские (созданные пользователем) и автоматические фрагменты имеют для Photoshop разные свойства. Для первых программа не может изменить расположение и размер, а за размером и размещением автоматических фрагментов она следит сама. Если вы поменяете размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" и перекрываний. Автоматические фрагменты имеют в левом верхнем углу пиктограммы серого цвета, а пользовательские — других цветов. Отображаются автоматические фрагменты более приглушенными цветами, чем пользовательские.
1. Выберите на палитре инструментов инструмент Slice Select (Выделение фрагмента). Он применяется для уточнения размеров и положения фрагментов.
2. Щелкните курсором мыши в пределах созданного вами фрагмента, чтобы выделить его. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь манипуляторов, которые служат для масштабирования.
3. Перетащите правый боковой манипулятор рамки немного вправо. Фрагмент увеличился по горизонтали. Автоматический фрагмент справа стал более узким, а фрагмент снизу — шире. Photoshop самостоятельно изменил их размеры так, чтобы количество фрагментов оставалось прежним. Верните пользовательскому фрагменту исходный размер. Программа снова скорректирует автоматические фрагменты.
4. Щелкните курсором мыши в пределах правого автоматического фрагмента. Изображение внутри фрагмента стало ярким, фрагмент выделен. Обратите внимание, что рамка автоматического фрагмента не имеет манипуляторов, поскольку его размер устанавливается программой.
5. В ImageReady автоматический фрагмент можно легко преобразовать в пользовательский. Выберите команду Promote to User-slice (Преобразовать фрагмент в пользовательский) из меню Slices (Фрагменты) или контекстного меню, открывающегося щелчком правой кнопки мыши в пределах автоматического фрагмента. Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.
Примечание
Пользовательские фрагменты могут располагаться не только встык, но и накладываться друг на друга. Какой из фрагментов окажется выше, задается командами, находящимися в списке Arrange (Монтаж) меню Slices (Фрагменты). Команды Bring to Front (Самый верхний) и Send to Back (Самый нижний) помещают фрагмент поверх остальных или ниже всех соответственно. Команды Bring Forward (Сдвинуть вперед) и Send Backward (Сдвинуть назад) имеют смысл, только если перекрываются более двух фрагментов. В этом случае они располагают выделенный фрагмент выше или ниже текущего положения. Эти команды доступны также из меню палитры Slice (Фрагмент) и на панели свойств инструмента Slice Select (Выделение фрагмента).
Оптимизация изображений для Web сайта
Под оптимизацией изображений понимают такое его преобразование и подбор параметров формата, которое обеспечивает минимальный размер файла. При подготовке изображений для размещения на Web-страницах (страницах сайта) без тщательной оптимизации не обойтись.
Для подготовки и оптимизации изображений перед публикацией сайта в Интернет в системе создания и управления сайтом SiteEdit применяется графический редактор.
Формат JPEG
На размер JPEG-файла влияет преимущественно установленная степень сжатия. Чем она выше, тем меньше результирующий файл.
Обратной стороной высокой степени сжатия является снижение качества. Следовательно, задача оптимизации состоит в том, чтобы найти компромисс между качеством изображения и размером файла.
Гораздо меньше на размер файла JPEG влияет характер изображения. Степень сжатия немного возрастает, если изображение не содержит сильных контрастов. Поэтому перед сохранением его полезно слегка размыть.
Формат GIF
Размер GIF-файла в первую очередь зависит от количества цветов, которые в нем использованы, т.е. от размера его палитры. Чем цветов меньше, тем меньше будет графический файл. Сглаживание, напротив, увеличивает размер файла и иногда довольно значительно. Оптимизация индексированного изображения сводится к нахождению минимально необходимого количества цветов, дающего при минимальном сглаживании изображение удовлетворительного качества.
В Photoshop для оптимизации изображений формата GIF применяется несколько настроек и параметров.
Список Color reduction algorithm (Алгоритм сокращения количества цветов) содержит перечень алгоритмов генерации индексированной палитры изображения.
По умолчанию предлагается вариант Selective (Селективная), дающий наилучшие результаты для изображений, содержащих значительное пространство, заполненное близкими цветами.
Отсутствующие в палитре изображения цвета имитируются сочетанием нескольких соседних пикселов близких цветов. Алгоритм имитации выбирается в списке Dithering algorithm (Алгоритм сглаживания).
В большинстве случаев используются варианты Noise (Шум) и Diffusion (Диффузия), не дающие регулярного узора, как Pattern (Узор).
Алгоритм Diffusion (Диффузия) лучше применять для фотографических изображений, a Noise (Шум) - для фоновых текстур и градиентов. Поскольку сюжетно важную часть нашего изображения занимает не градиент, выберите в списке алгоритм Diffusion (Диффузия).
Величина сглаживания задается ползунком Dither (Сглаживание), расположенным правее. Установите ее такой, чтобы передача оттенков была удовлетворительной. Помните, что чем выше сглаживание, тем больше размер результирующего файла.
Флажок Transparency (Прозрачность) обеспечивает преобразование прозрачных участков изображения в прозрачность GIF-файла. Его следует обязательно включить, если в документе есть прозрачные участки, которые должны остаться прозрачными и в браузере. В противном случае они окажутся заполненными сплошной заливкой.
Формат PNG
Формат PNG-файла позволяет хранить индексированные и полноцветные изображения. В первом случае задача оптимизации совпадает с таковой для GIF-файлов. Полноцветные же изображения не теряют в качестве при сохранении в формате PNG и потому не требуют оптимизации.
Ссылка для скачивания Программы SiteEdit
Кодовое слово для регистрации - Бизпорт
ведущий расылки - Гаврилов Александр
© ООО EDGESTILE, 2005
© Бизнес портал, 2005
| Subscribe.Ru
Поддержка подписчиков Другие рассылки этой тематики Другие рассылки этого автора |
Подписан адрес:
Код этой рассылки: inet.webbuild.bizport Архив рассылки |
Отписаться
Вспомнить пароль |
| В избранное | ||
