Использование программы Adobe Photoshop для web-дизайна сайтов

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

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

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

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

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

В современном Веб принято неразговорчивое соглашение о том, что - профессиональный веб-сайт должен корректно отображаться при экранном разрешении 640Ч480 точек с палитрой цветов в 256 цветов.

При отображении html-документа, рассчитанного на просмотр с, как все говорят, экранным разрешением 800Ч600 точек, на компьютере, настроенном на разрешение 640Ч480 точек, в нижней части, как люди привыкли выражаться, головного окна броузера как бы возникает, как большинство из нас привыкло говорить, горизонтальная полоса прокрутки, что существенно затрудняет исследование документа и вызывает огромное количество пререканий.

Для того чтоб web-страница верно отображалась при использовании, как все говорят, экранной палитры в 256 цветов, в случае включения в состав документа графических частей пытайтесь представлять очень вероятное количество графики в формате GIF и только самые, как заведено выражаться, нужные изображения - в формате JPEG.

Очевидно, опосля подготовки начального шаблона будущей web-страницы его нужно, мягко говоря, протестировать на соответствие, как большинство из нас привыкло говорить, изложенным выше требованиям. Надо сказать то, что для этого, загрузив страничку в броузер, измените экранное разрешение и применяемую, как заведено, палитру цветов в настройках Windows. Вообразите себе один факт о том, что потом щелкните правой, как большинство из нас привыкло говорить, клавишей мыши в любом вольном от ярлычков участке Десктопа и, выбрав в показавшемся меню пункт Характеристики, перейдите на вкладку Настройка, как многие выражаются, диалогового окна Характеристики: Экран. И действительно, установив надлежащие значения в разделах Палитра цветов и Область экрана, щелкните мышью на кнопочке Применить, после этого согласитесь с конфигурацией характеристик, как большая часть из нас постоянно говорит, экранных опций без перезагрузки Windows.

Рекомендуется, наконец, проверить правильность отображения содержащейся в html-документе информации при изменении, как мы выражаемся, экранных опций в броузерах как Microsoft Internet Explorer, так и Netscape Navigator.

Правило 2

Последующее правило, в общем то, обосновано тем, что для вас непонятно программное обеспечение, которое, в конце концов, употребляется вашими возможными посетителями для просмотра web-страниц. Мало кто знает то, что идет речь о броузерах. Надо сказать то, что как понятно, Microsoft Internet Explorer и и остальные броузеры употребляют разные методы обработки HTML-кода, из-за чего же один и этот же элемент в этих 2-ух броузерах может, вообщем то, отображаться совсем, как все говорят, по-разному.

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

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

Правило 3

Не тайна, что подавляющее большая часть пользователей употребляют для выхода в Веб dial-up соединение, другими словами, работают на “неспешных” линиях, подключаясь к, как всем известно, провайдерскому пулу с помощью модема. Очевидно, в данном случае скорость передачи данных (обычно, удручающе низкая) играет для их, как мы выражаемся, решающую роль: навряд ли кому-то доставит наслаждение дожи- даться загрузки, как все знают, 1-го html-документа 10-ки, мягко говоря, минут. Как бы это было не странно, но таковым образом, мы при- ходим к последующему, как всем известно, тривиальному «закону» web-дизайна.

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

Правило 4

Иной момент, о котором непременно следует упомянуть, касается навигации по веб-сайту. Несомненно, стоит упомянуть то, что у пользователя не обязано так сказать возникать ни мельчайших затруднений при переходе от 1-го раздела вашего ресурса к другому, независимо от модели его компьютера и типа установленного, как большинство из нас привыкло говорить, программного обеспечения. Несомненно, стоит упомянуть то, что он должен ясно представлять для себя, как мы с вами постоянно говорим, логическую структуру вашего проекта и, по способности, иметь доступ ко всем его компонентам в, как заведено выражаться, хоть какой момент времени. Конечно же, все мы очень хорошо знаем то, что конкретно, как заведено, потому нужно держать в голове последующее. Сделанная вами web-страница обязана непременно включать навигационные элементы, обхватывающие все разделы вашего веб-сайта, при этом эти элементы должны постоянно быть на виду. Их размещение следует, мягко говоря, выбирать, исходя из, как многие выражаются, наибольшего удобства для пользователя. Было бы плохо, если бы мы не отметили то, что ежели они, наконец, расположены в высшей части странички и пропадают из поля зрения опосля скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Надо сказать то, что графические ссылки и активные элементы как бы следует повторить в как бы испытательной форме в расчете на пользователей, в броузерах которых отключено отображение графики либо как раз отсутствует поддержка Java.

Правило 5

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

Правила 6 и 7

Крайние два “постулата” нужно учесть, руководствуясь уже соображениями эстетики в общехудожественном плане. Обратите внимание на то, что непременно, в отличие от вышеперечисленных положений, несоблюдение этих правил не также тянет за, как мы с вами постоянно говорим, собой последствий, которые можно было бы именовать “фатальными”, напротив, в неких вариантах такое нарушение как раз является полностью, как люди привыкли выражаться, оправданным. Все знают то, что но только в неких вариантах, так как выработаны они были только с целью облегчить пользователю восприятие информации, не позволять его вниманию отвлекаться от, как заведено выражаться, основного элемента web-сайта - его информационного заполнения. Согласитесь, что для создателя ресурса более принципиальным является не столько показания, установленного на, как многие думают, первой страничке счетчика посещений, сколько время, которое затратил каждый пользователь на просмотр всего веб-сайта. Несомненно, стоит упомянуть то, что и это время, в конце концов, будет тем больше, чем меньше, стало быть, будут уставать глаза гостя, чем меньше его так сказать будет раздражать оформление страничек на сознательном либо подсознательном уровне. И даже не надо и говорить о том, что для того чтоб итог ваших трудов не вызывал в процессе знакомства с ним, как большинство из нас привыкло говорить, негативных эмоций. Не используйте на, как мы привыкли говорить, одной web-странице наиболее 3-х, как мы выражаемся, разных шрифтов, включая шрифты, используемые при разработке графических частей.

Также используйте лишь корректные, как все говорят, цветовые схемы и не применяйте при оформлении документов наиболее 3-х разных цветов. Исключение тут можно, стало быть, сделать разве что для полутонов, как люди привыкли выражаться, 1-го и, как люди привыкли выражаться, такого же цвета, используемых, к примеру, при контекстном выделении строк в информационных таблицах, ну и то сиим приемом лучше не увлекаться. Обратите внимание на то, что какие же цветовые сочетания идеальнее всего применять при подготовке дизайна вашего web-проекта? Исходя из убеждений людской психологии сочетание цветов может в значимой степени влиять на восприятие зрителем представленной на картинке инфы. Все знают то, что конкретно потому при подборе, как большая часть из нас постоянно говорит, цветового сочетания, к примеру текста с фоном, рекомендуется наконец-то исходить из суждений собственного здравого смысла: текст должен без усилий читаться, при всем этом читатель не должен напрягать зрение, его глаза не должны наконец-то уставать.

1.3 Применение Photoshop в web-дизайне

2.1 Создание шаблона сайта к 65-летию победы

web дизайн верстка рhotoshop

1. Создайте документ с размерами 1024*768 пикселей.

Рис. 1

Рис. 2

2. Создайте новый слой (ctrl+shift+n). Выберите инструмент Rectangular Marquee Tool (M). С помощью его выделите прямоугольную область, примерно как на рисунке ниже.

3. Теперь нам нужно сгладить углы выделения, сделать их округлыми. Для этого в горизонтальном меню ищем select -> modify -> smooth и выставляем значение sample radius на 4.

Рис. 3

Результат будет выглядеть примерно так:

Рис. 4

4. Выбираем инструмент Brush (B) и закрашиваем выделенную область белым цветом.

Назовем этот слой main.

5. Снимаем выделение (ctrl+d). Нажмите правой кнопкой на слой main, в контекстном меню выберите пункт Blending Options. Выставляем следующие значения:

Рис. 5

Рис. 6

Рис. 7

Вот что примерно должно получиться:

Рис. 8

6. Создаем новый слой. Назовем его head. На новом слое с помощью Rectangular Marquee Tool (M), создаем небольшой прямоугольник, как на рисунке:

Рис. 9

7. Сглаживаем углы у выделения, делаем их округлыми (select - modify - smooth, 4).

8. Закрашиваем выделенную область любым цветом, у нас в качестве примера - зеленый.

м

Рис. 10

Если вдруг ваш прямоугольник встал криво или вы нарисовали его не по размеру, встав на слое head входим в режим трансформации объекта (ctrl+t), и трансформируем до получения требуемого результата.

9. Заходим в Blending Options слоя head и выставляем там следующие значения:

для Stroke

Рис. 11

10. Добавим на шапку небольшой блик. Выбираем инструмент Gradient Tool (G). Жмем на кнопку показанную на картинке, чтобы зайти в редактор градиентов (gradient editor).

Рис. 12

11. Выбираем цвет градиента от белого к прозрачному.

Рис. 13

12. Создаем новый слой, назовем его blik. Нажмите на слой иконку слоя head с зажатой клавишей ctrl, чтобы получить его выделение. Затем, не снимая выделения вернемся на слой blick и закрасим не большую область как на рисунке.

Рис. 14

Немного изменим прозрачность слоя с бликом. Для этого в панели слоев, встав на слой blick изменим значение opacity на 52.

13. Пришло время нарисовать кнопки для нашего шаблона. Для этого выбираем инструмент Rectangular Marquee Tool (M). С его помощью на новом слое (назовем его button) рисуем маленький прямоугольник. Закрашиваем его. Цвет мы выбрали красный.

Затем копируем слои с кнопками (ctrl+J), до нужного количества. Размешаем их по шапке. Добившись нужного размера, требуемого расстояния между кнопками, объединяем слои button в один (для этого выделите слои, которые хотите обледенить зажав клавишу ctrl, затем нажмите сочетание клавиш ctrl+e).

Рис. 15

14. Осталось совсем немного, нарисуем области. для размещения новостей и контента.

Рис. 16

18. Также мы нарисовали на новом слое красный прямоугольник, равный по размерам прямоугольнику на слое main, поместил его ниже остальных слоев и немного повернули. (ctrl+t).

Рис. 17

Вот, собственно и все. Добавьте логотип, различные детали, клипарты на свое усмотрение, в зависимости от тематики сайта.

Так как шаблон задумывался посвященный дню победы, вот что в итоге получилось у нас:

Рис. 18

2.2 Особенности размещения информации на страницах сайта

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

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

Основа usability и правильного макетирования любого сайта - это меню. Если оно неудобно, то придется потратить слишком много времени на поиск необходимой информации или вообще отказаться от надежд найти ее. Где располагать меню? Чуть ниже шапки по горизонтали или по вертикали, но вдоль левого или правого края. Что выбрать? Зависит это от дизайна и количества основных разделов. Если основных разделов немного, то можно расположить меню горизонтально, вдоль верхней части. Оно может быть выполнено в виде простых ссылок, если нет подразделов, или в виде выпадающего меню. Выпадающее меню рекомендуется делать для сайтов, имеющих много подразделов, в поисках которых неудобно прыгать по разделам. Сейчас многие компании, которые не зарабатывают на баннерах и заботятся о благе посетителей сайта, переходят на использование таких меню, потому что они занимают мало места и при этом позволяют сделать меню сложной структуры - универсально, удобно, без "пересадок" можно добраться в самые отдаленные уголки сайта. Если разделов много и разместить их названия по горизонтали не удается, то придется размещать все по вертикали вдоль одной из сторон страницы (зависит от дизайна), но все же подумайте о создании горизонтального меню с выпадающими списками. Только не надо создавать два меню сразу (горизонтальное и вертикальное): испортится не только дизайн, но и usability, да и пользователь не узнает, в каком меню искать нужный раздел. Желательно, чтобы меню было одно и только одно. Если вы выбрали в качестве основного горизонтальное расположение ссылок, то вдоль края расположите нечто вроде "горячих ссылок" на тему выбранной страницы, но эти же ссылки должны быть и в основном меню. Горизонтальное меню должно умещаться в одну строку, особенно если есть выпадающий список.

Многие считают, что в низу сайта должен быть копирайт сайта и информация об авторстве на сайт или дизайн. Это верно, но не совсем, потому что, как говорят математики, данная информация необходима, но недостаточна. Допустим, каждая страница содержит очень много информации, а для того, чтобы увидеть самую нижнюю часть, нужно поработать скроллингом. Вот пользователь пролистал до нижней части страницы и решил перейти в другой раздел. Что делать? «Скролить» обратно на самый верх сайта, чтобы увидеть меню. По крайней мере, неудобно. В подвале сайта должна быть копия основных ссылок сайта. Конечно, копия меню - мелочь, но очень приятная, а каждая мелочь - это дополнительный пользователь.

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

Заключение

В данной работе мы познакомились с программой Adobe Photoshop, узнали о ее назначении и свойствах, показали как работать с инструментами.

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

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