Создание макета сайта в coreldraw
На этой странице я расскажу о приемах работы в редакторе векторной графики 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, готовый к оптимизации и резке.
Используете ли вы CoreDraw в веб разработке, или знакомы с такими случаями сегодня?
В одном из соседних вопросов Замена фотошопа верстальщику? появилось утверждение что в веб его никто уже давно не использовал, но так ли это поинтересоваться стоит.
Известны ли вам явления при которых CorelDraw тем или иным образом продолжают использовать в проектах ваша или другие компании
- Вопрос задан более трёх лет назад
- 2103 просмотра
Что значит в веб-разработке?
Если рисовать векторную графику (логотипы, иконки и пр) - почему бы и нет? Дело вкуса. У Корела плохая репутация в полиграфической среде из-за проблем с цветоделением (было такое несколько лет назад, как сейчас не знаю), но для веба это неактуально. Редактор как редактор.
Если имеется в виду рисование именно макета - ни разу такого не видел за много лет в индустрии. Использовать его в этом качестве - это значит стать маргиналом, который как минимум создает всем проблемы вида "и как я должен с этим работать?"
По факту в реальном мире 99% макетов рисуются в Фотошопе или Скетче в зависимости от религиозной принадлежности.
Скажите, как сейчас обстоят дела на рынке с векторным редактором Corel Draw?
Он еще вообще используется? Иногда вижу в вакансиях по маркетингу в требованиях знание Корел ДРоу.
Но саму прогу даже скачать не так просто, нет даже на руктрекере. Про актуальные обучающие видеокурсы я вообще молчу. Максимум десятилетней давности.
Говорят, он для наружки, баннеров , рекламы хорош и проще Adobe Illustrator,
Стоит ли его осваивать, когда есть Иллюстратор и в чем принципиальная разница между ними?
Спасибо
Последние годы я с корелом почти не пересекаюсь, поэтому точно не знаю. Но чисто по ощущениям да, похоже на то, что его популярность падает. Хотя можно встретить узкие ниши, где до сих пор требуют макеты в кореле (например, некоторые режущие плоттеры).
Страданий насчет "стоит ли осваивать?" я не понимаю. Базово познакомиться нужно с тем, и с другим, и чем-то третьим. А потом сосредоточиться на том, к чему легла душа и подтолкнул рынок. Триальную версию можно скачать на оф сайте.
У нас использует не дизайнер, а специалист по проектам, но из за не знания других программ, в частности фотошопа. Данный специалист может накидать макеты страниц, если дизайнер занят, для быстрой реализации в дальнейшем верстальщиком. Нахожу использование Corel Draw не профессиональным для данной задачи, так как в дальнейшем возникают сложности при верстке - стили, отступы, шрифты - во всем есть разница
Почему бы и нет, если дизайнер подготовит на выходе не просто проект в Corel Draw, а папку с assets, где уже находятся все необходимые изображения (в svg или переведенные в png), то мне, как верстальщику, такой вариант был бы приемлем.
CorelDRAW для макетирования веб-сайтов используют обычно мелкие зарубежные конторы. Наравне с Xara, и даже Inkscape. Треш, который они выдают, говорит об их низком уровне, поэтому ориентироваться на них не стоит.
Лично я использую CorelDRAW относительно веба в основном для векторной графики и быстрого прототипирования. Конечно там можно рисовать и макеты сайтов, и даже достаточно удобно, создав для этого специальный профиль настроек. Только вопрос что с ним дальше делать. Можно экспортировать в люстру и дальше в фотошоп, но приходится контролить, чтобы все было как надо по стилям и прочему. Т.е. выгоднее использовать специализированные программы для этого, если работа постоянна. Если же макетировать раз в год, то почему бы и нет? )
На работе дизайнер создаёт макеты в CorelDraw, а потом переводит в Photoshop для верстки. Мне кажется, что это нерациональная трата времени, или я ошибаюсь? Прошу написать сравнительные преимущества этих программ в контексте создания макетов для верстки.
UPD. Речь об HTML вёрстке. И смысл моего вопроса - в чём прикол делать картинку в векторе, если верстальщику потом всё должно быть отдано в PSD с разбивкой по слоям. Поэтому я и считаю, что Corel для создания макетов сайтов не нужен.
Сайт можно делать без макета. Из головы или предварительно сделать наброски на бумаге, чтобы было легче верстать. Если вы новичок, а судя по посту это так, то начинайте ( и продолжайте) делать макеты в Photoshop, благо в сети кучу инструкций и мануалов.
P.s. забудьте про существования CorelDraw
ankfrv: Есть гораздо удобнее инструменты, и учебных материалов по ним больше. Ну и еще вот по этому - cs607424.vk.me/v607424150/5cdc/aPUO4TcGVCs.jpg
Верстать из Photoshop однозначно удобней. Есть специальные инструменты для выделения фрагментов макета и сохранения их в виде изображения с различными настройками качества. В кореле в основном рисуют те кто работает с полиграфией.
Сравнительные преимущества растрового редактора фото и изображений и хоть векторного, но заточеного под полиграфическую печать, редактора в разрезе дизайна сайтов? нууу.
Верстать надо в векторе, но желательно не в Кореле. Иллюстратор, Скетч или еще что. Фотошоп нужен для картинок, которые на сайте будут растровыми картинками.
Можно делать в фотошопе и уже долгие годы так и происходит, но сейчас наконец-то пошла тенденция уходить от этого безобразия.
Извечный вопрос об инструментах.
Об этом говорилось уже немало и ответы всегда сводятся к тому, что создавать визуальную часть дизайна можно в том инструменте, в котором это получается лучше всего. Да, CorelDraw больше «заточен» под полиграфию, но если человек идеально знает инструмент, ему комфортно работать в нем, у него получается хороший дизайн — почему нет?
Сам я работаю в Photoshop, знаю людей, которые делают веб в Illustrator и даже в Indesign, имеют на выходе прекрасные результаты.
Вопрос организации процесса с переносом из Corel в Photoshop прокомментировать не могу, не знаю тонкости работы с Corel. Могу только интуитивно предположить, что для верстки это делать не обязательно, тем более, что Photoshop — это не инструмент для верстки.
Я имею в виду, что верстальщик HTML/CSS в любом случае должен получать в работу послойный макет. У меня сложилось ощущение, что Photoshop по умолчанию подходит для таких задач.
tornadoman: верстальщику надо получить в работу грамотно составленый макет. хоть карандашом на бумаге, если там будут обозначены все цвета и указаны все расстояния.
попробуйте поработать без переноса в фотошоп, из корела, попросите помощи с первым макетом у дизайнера. , если получиться нормально, то исключите лишний этап.
ankfrv: согласен, что подойдет любой инструмент, если дизайнер понимает, что с его макетом потом проделывать должны (основы верстки, веба и тд.)
но лично меня тенденция переходить на векторные редакторы радует)
Trow_eu согласен, дизайнер должен учитывать, что макет делается именно для веба. Еще неплохо бы учитывать навыки и возможности непосредственно верстальщика, но как я понял, обсуждается немного другой вопрос. Сам я по привычке пользуюсь PS и меня радует, как он обновляется, становится все более пригодным для веба (нативные направляющие сетки, нативная нарезка слоев етс.). Хотя есть понимание, что в том же Sketch скорость создания дизайна будет процентов на 15-20 выше.
Кто-то скажет: «Хороший дизайн, концепция и содержание». И будет прав.
Кто-то скажет: «Найти типографию, где напечатают качественно и в срок». И тоже будет прав.
Когда у нас есть дизайн и типография, то нужно подготовить макет. Чтобы после печати получить искомый результат в идеале запросить в типографии требования к подготовке файла, особенно если речь идет о печати сложной продукции (конгрев, печать Pantone, тиснение, вырубка и прочие полиграфические изыски).
Но если нам нужны обычные листовки, визитки или буклеты, то достаточно следовать простым, но важным правилам подготовки макета.
Формат изделия в макете и формат изделия, которое вы хотите получить должны соответствовать друг другу. То есть если нужны листовки А5, то мы не отправляем на печать файл формата А1 (его обязательно нужно масштабировать до размеров А5).
Где посмотреть?
Информация о формате в Corel Draw находится в верхнем левом углу на панели инструментов.
Вылеты — дополнительное пространство цветовых элементов макета на 3-5 мм за край изделия, чтобы линия реза, даже в случае сильной погрешности, шла через закрашенную область.
- Вылеты (припуски к обрезному формату) обязательны, когда часть изображения уходит под обрез (линия реза проходит по картинке).
- Вылеты для листовок, флаеров, визиток должны составлять 2 мм.
- Вылеты для буклетов, каталогов, журналов – 3 мм.
- При отсутствии вылетов после резки по краям продукции могут быть белые поля разных размеров.
- Расстояние от значимых элементов макета (слова, номера телефонов, линии и пр.) до линии реза должно быть не менее 2 мм, иначе элементы могут «зарезаться».
Как сделать?
Кликаем в Corel Draw по вкладке Макет, выбираем Параметры страницы.
В пункте Растекание (это и есть название вылетов под обрез в русифицированной версии Corel Draw) указываем наличие вылетов под обрез, мы указываем величину 3 мм и также ставим галочку в пункте Показывать область входа за обрез.
Вылеты в макете будут выделены пунктирной линией.
При подготовке макета всегда выставляется цветовая модель CMYK, так как печатная машина выводит краски именно в этой цветовой модели, если в макете прописана цветовая модель RGB, то при печати можно получить менее яркие цвета.
Переведите все элементы из RGB в CMYK. Вы увидите изменения цветов макета и получите более ясное представление о том, как макет будет выглядеть на печати.
Цветовая модель RGB — для монитора, цветовая модель CMYK — для печати.
Для печати подходят изображения с разрешением только 220-300 dpi в масштабе 1:1. Низкое разрешение приводит к потере качества изображения.
Перед сдачей в печать вся текстовая информация в макете должна быть переведена в кривые (шрифты – в графический объект). Иначе при открытии файла в типографии (если это не стандартный шрифт) в макете могут оказаться непонятные символы.
Как сделать?
Перевод шрифта в кривые можно сделать с помощью команды Ctrl+Q или вызвать меню правой кнопкой мыши и выбрать Преобразовать текст в кривую.
Вылеты — дополнительное пространство цветовых элементов макета на 3-5 мм за край изделия, чтобы линия реза, даже в случае сильной погрешности, шла через закрашенную область.
При офсетной печати режется не 1-2 листа, а большая стопка, в которой листы могут смещаться, из-за чего нож неточно попадает на линию обреза. Такая же проблема возникает при обрезке готовых брошюр, где после фальцовки получается тетрадь с неровным краем.
Стандартный размер вылетов— 5 мм. Для простых макетов, таких как визитки, вылеты могут быть 2–3 мм. Если визитка в готовом виде 90*50 мм, то макет должен быть 96*56 мм.
Что еще почитать: Офсетная и цифровая печать
Нажмите на изображение, чтобы увеличить картинку
Здесь мы видим размеры нашего макета, единицы измерения, ниже стоит разрешение (300 точек на дюйм), если вы изначально создавали веб-документ, то у вас будет стоять 72 или 96 точек на дюйм, в этом случае измените величину разрешения на 300.
В пункте Растекание (это и есть название вылетов под обрез в русифицированной версии Corel Draw) указываем наличие вылетов под обрез, мы указываем величину 3 мм и также ставим галочку в пункте Показывать область входа за обрез.
В макете появились вылеты под обрез и они выделены пунктирной линией.
За вылетами мы увидим наш стандартный документ (обрезной формат)
Читайте также: