На главную
О себе
Виды работ
web-работы
полиграфия
Мои работы
сайты
полиграфия

Вы находитесь в разделе «Статьи по web-дизайну»

Рисуем сайт в Corel Draw

На этой странице я расскажу о приемах работы в редакторе векторной графики Corel Draw. Они были разработаны после вопросов нескольких знакомых дизайнеров, не имевших опыта разработки web-сайтов, и взявшихся делать только графический макет страницы. Вопросы были сформулированы так: «А какими размерами ограничено поле моего рисования?» и «Все ли я могу рисовать?». Все нижеописанные действия отнимут около минуты времени и позволят раз и навсегда снять вопрос о размерах. Работы велись в Corel Draw X4, поэтому названия некоторых меню могут отличаться от других версий программы.

Итак, начинаем. Прежде всего, откроем Internet Explorer и развернем его во весь экран. Не загружая никакого сайта — окно браузера должно быть чистым — нажимаем клавишу Print Screen. Иногда может потребоваться нажать Print Screen 2 раза подряд. Мы получаем снимок экрана (скриншот) с браузером, который находится в буфере обмена компьютера. Открываем Corel, создаем новый файл. Затем нужно щелкнуть 2 раза правой кнопкой на линейке, в появившемся меню Ruler выбрать в качестве единиц измерения Points. Вставляем наш снимок (Shift+Insert) из буфера обмена. Размеры вставленного изображения, если все вышло верно, должны соответствовать разрешению вашего монитора. Таких же размеров делаем и нашу страницу. Снова выделяем изображение и выравниваем его по центру страницы (Arrange > Align and distribute > Center of page либо просто нажать клавишу «P»). Не снимая выделения нажимаем правую кнопку мыши и закрепляем объект (в выпавшем меню выбираем Lock Object). Вместо блокировки объекта можно поместить его на новый слой и заблокировать сам слой — главное, что изображение не мешало работать.

Теперь определимся с полем для рисования. Несмотря на то, что оно вроде бы четко обозначено белым полем браузера нашего снимка, следует помнить, что у потенциального посетителя вашего будущего сайта может быть монитор с другими размерами — больше или меньше. Если вы работаете на 21-дюймовом мониторе и заполните все пространство скриншота браузера не оставив дополнительных пространств по краям, то пользователь с 17-дюймовым монитором всего не увидит — часть сайта будет срезана, появятся полосы прокрутки. Если вертикальные — не страшно. Но появление горизонтальных было бы не желательным. Нужно искать компромиссный размер. Учитывая, что 17-дюймовых мониторов становится все меньше, за основу размеров поля рисования я бы взял стандартное разрешение 19-дюймового монитора — 1280х1024 пикселей минус размеры панели задач рабочего стола и всех панелей браузера. Точно подобрать размеры невозможно — у одного пользователя панель задач сбоку, у другого — сверху. Да и количество рядов иконок бывает разным. Размеры различных панелей и кнопок у разных браузеров тоже разные... Я в своей работе ориентируюсь на такие размеры поля рисования: ширина — 1280 минус 30 пикселей, отнимаемых полосой прокрутки; высота — 1024 минус 132 пикселя панели задач и различных панелей браузера, и минус 32 пикселя, отнимаемые строкой состояния внизу. Итого получается 1250х860. Что говорят нам эти цифры? Что на 17-дюймовом мониторе всё не поместится — появятся горизонтальные полосы прокрутки, а на 21-дюмовом и более с краев появятся свободные пространства. Таким образом, если у вас именно 19-дюймовый монитор и вы ориентируете свой сайт именно на такие мониторы — смело работайте во всем белом поле браузера. Если же ваш монитор больше — нарисуйте прямоугольник с размерами 1250х860 пикселей и выставьте его по центру белого поля снимка браузера. По бокам сразу появятся эти самые пустые пространства, которые вполне могут быть закрашены цветом или фоном, но в которых не должно быть текстов, баннеров, таблиц и других элементов страницы. Затем нужно совместить верхнюю границу прямоугольника с верхней границей белого поля и, вытянув 3 направляющие линии, совместить их со сторонами прямоугольника (двумя боковыми и нижней), а сам прямоугольник можно стереть. Этими направляющими и ограничено поле рисования. Повторюсь, что размеры поля рисования относительны, и могут быть меньше, если у пользователя, например, панель задач имеет 4 ряда иконок, а не один, как у меня. Будем считать, что рабочее поле у нас есть, можно работать. Целесообразно сохранить такой файл в качестве шаблона — начинаешь делать новый сайт — открыл его и сразу работаешь, не высчитывая никаких размеров.

Теперь об одной интересной возможности Corel Draw. Перед этим нужно убедиться, что не нет никаких объектов, выступающих либо находящихся за пределами рабочего поля страницы и открытых дополнительных панелей-докеров. Нажимаем F4 (либо в выпадающем окошке масштабирования Zoom Level выбираем To Fit).

Затем F9 (полноэкранный просмотр). Мы получили несколько увеличенное изображение нашего браузера. Следующий шаг — в Zoom Level вводим новое значение масштаба — немного больше предыдущего, и после его изменения снова нажимаем F9. Так нужно сделать несколько раз, и меняя масштаб добиться того, что снимок после нажатия клавиши F9 занимал весь экран, то есть визуально скриншот выглядел также, как и наш открытый браузер. Когда это случится, нужно запомнить значение масштаба. Зачем все это? Рано или поздно возникнет необходимость показать кому-нибудь нарисованный макет без объяснений, вроде: «Здесь будет так, а весь сайт будет выглядеть вот так» и т.п. Вместо этих объяснений нажимаем F4, в Zoom Level ставим запомненное ранее значение масштаба, нажимаем F9 и видим перед собой наш макет, неотличимый от настоящего открытого браузера, причем конечный результат будет выглядеть именно так, каким вы его видите сейчас. Здорово, не так ли! Следует помнить о выступающих объектах и докерах, иначе изображение в полноэкранном просмотре будет смещено в сторону. Таким образом мы получили возможность показать в любой момент реальную страницу сайта, минуя последующие трудоемкие стадии — обработку графики, ее резку с оптимизацией и html-кодирование.

Работая над макетом в Corel Draw вы должны быть уверены, что работаете в цветовой модели RGB, то есть все цвета должны быть именно в ней, а не в SMYK или LAB. В противном случае у вас при дальнейшем переводе в RGB изменятся цвета, которые были не в этой модели. С дизайнерской точки зрения работа не ограничена ничем — можно рисовать все, что вздумается и применять все эффекты, доступные в этой программе. Очень эффектно выглядит комбинация растровой и векторной графики. Учитывая, что в Corel можно импортировать файлы программы Photoshop и при этом поддерживаются слои, сделать это несложно. Для этого в Photoshop мы делаем все необходимые действия, например, производим сложную фигурную вырезку, через которую будет просвечивать векторная графика, нарисованная в Corel, и сохраняем файл с расширением .psd. Затем в Corel'е импортируем его (File > Import), где наша вырезка будет представлена в виде отдельного графического объекта, а если слоев в Photoshop было несколько — то в виде группы объектов. Если предполагается регистрация сайта в баннерных сетях, не лишним будет подумать о размещении баннеров заранее и оставить для них место. Лучший вариант — выйти в интернет и сохранить парочку себе на диск, поместив их затем на своем макете в нужном месте. Если же предполагается размещение контекстной рекламы, то для нее также необходимо предусмотреть место.

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

Но вот макет завершен и согласован. Что дальше?

Несмотря на то, что в Corel'e есть свои средства оптимизации изображений, дальнейшую обработку будем производить в программе Photoshop. Под дальнейшей обработкой подразумеваются небольшие доводки и подправления, если таковые имеются. Кроме того, иногда некоторые вещи просто удобнее и легче доделать в Photoshop. Для этого экспортируем наш макет в формат Tiff Bitmap. Порядок действий таков: (File > Export), в Files of type выбираем «Tiff Bitmap», в «File name» вводим имя файла и нажимаем «Export». В открывшемся окошке «Convert to Bitmap» выбираем:

Размеры изображения (Image Size) должны соответствовать в пикселях размерам скриншота или, говоря другими словами, разрешению вашего монитора (на рисунке размеры 19-дюймового монитора). Соответственно в процентах — всё по 100%. Нажимаем ОК. Происходит експорт в Tiff Bitmap всего макета, включая скриншот. Если же требуется конвертировать в Tiff без скриншота и с прозрачным фоном, то необходимо разлочить его и удалить (если скриншот на отдельном слое — просто сделать слой невидимым), а опциях конвертирования отметить чекбокс «Transparent background». В полях размеров значения в пикселях изменятся, но в процентах значения ширины и высоты должны все равно быть по 100%. Всё. На выходе имеем Tiff Bitmap с разрешением 72 ppi в RGB, готовый к оптимизации и резке.

Ссылка на статью при перепечатке обязательна.

Copyright 2003-2009 Serg
JavaScript WebEditor
О web-дизайне
Помощь полиграфисту
Связь со мной