![](/user_photo/2706_HbeT2.jpg)
- •Сайта, портала ».
- •Оглавление
- •2 Инструменты реализации web-проектов 14
- •Введение
- •1 Этапы создания веб-проекта
- •1.1 Определение проекта
- •1.2 Разработка структуры сайта
- •1.3 Проектирование визуального интерфейса
- •1.4 Построение и интеграция
- •1.5 Ввод и сопровождение
- •1.6 Usability-тестирование
- •1.7 Анализ конкуренции
- •2 Инструменты реализации web-проектов
- •Заключение
- •Список использованных источников
- •Контрольные вопросы
- •Глоссарий
2 Инструменты реализации web-проектов
Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля, полностью уникальную разработку под конкретный заказ. В зависимости от профессионализма и/или политики компании веб-дизайнер либо разрабатывает идею и концепцию дизайна полностью самостоятельно, либо получает ряд требований (цвет, стиль и т. п.), ожиданий и идей от заказчика или креативного директора (арт-директора) и старается держаться этого направления при разработке макета. Большинство заказчиков ошибочно отождествляют веб-дизайнера и веб-мастера, поручая ему и публикацию сайта.
Иногда дизайнер может предложить дизайн-решение на основе шаблонов (своих или даже чужих), это ускоряет работу и обойдется заказчику дешевле. Некоторые дизайнеры даже специализируются на изготовлении дизайн-макетов для продажи в качестве готовых шаблонов, которые затем могут быть куплены и использоваться менее опытными дизайнерами или веб-мастерами для изготовления типовых сайтов (по сути, без уникального дизайна). Иной раз разработкой веб-дизайна называют небольшую перекомпоновку и адаптацию такого шаблона под конкретный заказ.
Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора . Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки. Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.
Изображение первоначально может быть векторным или растровым, выполненным в AdobScribuse Illustrator , Adobe Photoshop ,GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.
Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.
На большинстве сайтов в ходе эксплуатации наблюдается печальная тенденция: их внешний вид, обработка графики и информационный дизайн постепенно нарушаются и теряют связность. Первоначальные дизайнеры больше не занимаются выбором иллюстраций, макетами страниц и размещением контента, а эксплуатационная команда начинает по-своему осуществлять дизайн и организацию, особенно при включении нового содержимого. Избегайте этого. Установите удобные в сопровождении стандарты. Даже если эксплуатационная команда имеет опыт в дизайне и компоновке страниц и даже если она состоит из творческих личностей с собственными идеями дизайна, целостность сайта зависит от поддержания того созданного облика сайта, который был утвержден. Огорчительно наблюдать, как перепроектированный сайт медленно разваливается, часто без видимой вины членов эксплуатационной группы. Причиной обычно является их неадекватная подготовленность к выполнению своей задачи.
Создание web-проекта – процесс увлекательный, но весьма трудоемкий, в котором неизменно используется немалое количество различных программ. Графические и визуальные редакторы, программы для создания анимации, работы с таблицами стилей, проверки валидности кода и т.д. – все это верные спутники каждого вебмастера. Ниже приведен лишь краткий список наиболее востребованных и популярных инструментов для создания web-проекта.
•Adobe Photoshop - уникальный графический редактор, который по праву занимает первое место среди себе подобных. Плюсы: возможности программы ограничиваются только фантазией пользователя и его навыками в работе с ней. Минусы: сумасшедшая стоимость программы...
•Adobe DreamWeaver - один из лучших визуальных редакторов, генерирующих HTML код "на лету". Плюсы: позволяет работать в нескольких режимах одновременно, с HTML кодом либо в визуальном режиме. Минусы: программа генерирует слишком "тяжелый" код, добавляя много лишнего. Но, если Вы знакомы с HTML, тогда никаких проблем не возникнет.
•Adobe Flash - программа для создания анимированных роликов, баннеров и т.д. (swf) Плюсы: большой функционал и практически неограниченные возможности. Минусы: как и все продукты компании Adobe данная программа имеет слишком высокую стоимость.
•Adobe Illustrator - отличная программа для создания и редактирования векторных изображений.
•Adobe FontFolio - огромная коллекция шрифтов для веб-мастеров.
•CorelDraw – широко распространенный графический редактор, используемый для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с изображениями (CorelGallery).
•CrystalButton – простая, легкая программа для создания стильных кнопочек с интуитивно понятным интерфейсом.
•Ulead Gif Animator - отличная программа для создания анимированных .gif изображений. Проста и удобна в использовании.
•PaintNet ver.3.30rc1 - простой, бесплатный, но в тоже время мощный и удобный редактор графических картинок и снимков, разработанный специально для использования под операционными системами Windows XP. Paint.NET разрабатывался в Washington State University при помощи корпорации Microsoft, и позиционируется в качестве бесплатной замены стандартному MS Paint из Windows. Программа базируется на использовании .NET Framework 2.0.
•Pixarra TwistedBrush Pro Studio 15.20 - программа для художников. Она имеет большое количество самых разнообразных инструментов для рисования, от красок до мелков и карандашей. Кроме этого, программа располагает рядом необычных инструментов. У вас есть возможность смешивать масляные краски, использовать распылители и рисовать эскизы.
•Stitcher Unlimited 5.6 позволит пользователям создавать панорамы в высоком качестве и виртуальные туры с углом обзора в 360 градусов, "склеивая" вместе снимки. Приложение включает движок автоматической "склейки" изображений, который может создавать крупноформатные отпечатки, целостные панорамы, карты отражений и текстуры для фильмов и телепередач.
•IconCool ver.5.74 -визуальный графический редактор для создания веб-анимации в формате GIF. Программа позволяет создавать, редактировать,оптимизировать gif-изображения, применять различные фильтры и эффекты. Все элементы изображения располагаются в собственном слое, что позволяет индивидульно редактировать и анимировать каждый элемент. Результат вашей работы сразу же доступен для просмотра. Возможности программы:
- Создает GIF баннеры, кнопки, изображения GIF анимацию
- Импорт картинок, фото, вектарная графика
- Дбавления разных эффектов
- Добавления текста, и проиче
- Изменения размера, добавления штрихования
- Пдержка создания 3D
- Оптимизация GIF анимации и экспорт видео файлов
- Экспорт гифок прямо к вам на сайт
•MegaIconPack ver.1.0 - огромный комплект высококачественных иконок в формате PNG на все случаи жизни... В архиве содержится более 10000 иконок.
•AlleyCode ver.2.2.0 - бесплатный, быстрый и интуитивно понятный HTML-редактор, обладающий набором уникальных возможностей. В программе имеется режим Synchro View, который облегчающий синхронизацию между текущим и уже готовым проектов, поддерживается режим быстрого редактирования тэгов (просто щелкните правой кнопкой по тэгу и выставьте все необходимые параметры). В Alleycode HTML Editor присутствует визард для работы со стилями CSS, режим предварительного просмотра Turf View, а также опция оптимизации написанных тегов и содержимого мета-данных.
•Paletters ver.1.0 - сборник палитр для дизайна. Огромное количество проверенных комбинаций оттенков.
•TopStyle ver.3.12pro - программа работы с таблицами стилей для разработки интернет-страниц.
•EasyGifAnimator ver.2.01 - программа создания анимированных гифов.Как видно из названия самой программы, сам процесс создания очень прост и нагляден.Есть возможность настроить огромное количество нужных параметров, имеется компрессия.
•IconWorkshop ver.6.03 - программа для создания, конвертирования, поиска и извлечения иконок на вашем компьютере. IconWorkshop позволяет создавать иконки из любого изображения, открывать иконки Macintosh и преобразовывать их в формат Windows, систематизировать иконки в библиотеки с возможностью поиска, поддерживает иконки в стиле Windows XP с возможностью сглаживания и придания им прозрачности.