Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 159
До сих пор ни одного Спасибо?? Странно :) Значит буду первым :)
Отличная статья, тоже самое делаю, только в Corel Draw. (это уже дело вкуса:)
Делать макет гараздо легче (в Corel или AI) чем в Photoshop-e :)
И материал хорошо представлен. Спасибо+
Делать макет гараздо легче (в Corel или AI) чем в Photoshop-e :)
И материал хорошо представлен. Спасибо+
А в фотошопе вам что мешает? «Нарезка» осуществляется аналогичным способом. Так же есть составляющие и те же инструменты для работы с ними (в версиях до CS2 все это было вынесено в Имеджреди), так же есть необходимый минимум для работы с векторными объектами. К тому же для веба нет разницы в механизме хранения и отрисовки графики, при отсутствии необходимости в маштабировании результата, в растре или векторе не имеет значения, а инструментарий примерно одинаков (есть редкие исключения как Бленд, патерны или пространственная трансформация, которые, в контектсе статьи, не важны).
Мне действительно интересно, какие качества делают для вас Корел и Илюстратор более продуктивными, для подготовки макета сайта, в сравнении с Фотошопом? Просто я сам, по выше означеным причинам, никакой разница, в контексте поставленой задачи, не вижу.
Мне действительно интересно, какие качества делают для вас Корел и Илюстратор более продуктивными, для подготовки макета сайта, в сравнении с Фотошопом? Просто я сам, по выше означеным причинам, никакой разница, в контексте поставленой задачи, не вижу.
супер! спасибо тебе огромное!
Наконец то появились обучающие дизайн-топики, ура товарищи!
Я бы добавил, что аналогично все делается и в Photoshop.
Адоб линейка «коренного» софта… как обычно, хороша…
А в нашей «дыре»… некотрые до сих пор присылают баннеры в Кореле… ) «пожалуйста, вставтье на сайт»…
А в нашей «дыре»… некотрые до сих пор присылают баннеры в Кореле… ) «пожалуйста, вставтье на сайт»…
Это потому, что у вас, в данной области, в основном работает «старшее покаление». А причина проста, Корел первый на постсоветском пространсве дал адекватный инструментарий для цветоделения и потому долгое время являлся стандартом в полиграфии. По этой же причине, до сих пор, в акридетованых государством вузах у нас в стране, на факультетах дизайна основной упор делается на работе именно в Кореле. Преподаватели представители упомянутого «старшего поколения». Ситуация изменилась а перестроились не все, дабы использовать появившиеся плюсы.
Inkscape будет удобнее только для людей макетирующих страницу и в последствии ее верстающих. Сзязано это с наследственностью HTML и SVG от их прородителя XML.
Из опенсорсного для макетирования и верстки текста больше подходит www.scribus.net/
Из опенсорсного для макетирования и верстки текста больше подходит www.scribus.net/
Очень понравилась мысль добавлять подложку в виде окна браузера.
Ну и как обычно: VOTE Dinamyte! [x]
Ну и как обычно: VOTE Dinamyte! [x]
Ты уже готовишь сюрприз Хабрапользователям? ;-)
Да, верно, так и заказчику превьюшки делать проще.
Только добавлять приходится не интерфейс Сафари и не Оперы с Файрфоксом, а IE 6. К сожалению.
вот сдесь лежет все окна любого размера
www.designerstoolbox.com/designresources/elements/?PHPSESSID=d2e8931c2dec26d7616711060d3e019c
www.designerstoolbox.com/designresources/elements/?PHPSESSID=d2e8931c2dec26d7616711060d3e019c
Почему не сделать хтмл файл с картинкой? гораздо наглядней.
Плюс за верстку в векторе. Хотя конкретно Illustrator как инструмент верстки я не перевариваю, т.к. привык к другому, двумя руками за использование векторных редакторов в качестве инструмента верстки веб-макетов.
мне вот Fireworks приглянулся больше…
правда у меня первое впечатление
правда у меня первое впечатление
Пробовал, но отказался, т.к. лично мне не удобно. Хотя, если по логике и возможностям пакета — Fireworks должен лучше все подходить.
Dreamweaver?
На Fireworks сижу уже давно, когда показываю народу, который в ФШ делают сайты как это делается в FW — пересаживаются, привыкают потом.
Мне в своё время пришлось отказаться от Fireworks'а, как инструмента верстальщика т.к. он не полностью поддерживает формат PSD от Photoshop CS3. Хотя имено для управления slice'ми он, imho, подходит куда больше.
а я решил для себя эту проблему экспортом в PNG. ведь обычно все слои при верстке не нужны и их можно объединить в несколько групп которые затем экспортируются в PNG и собирются в кучу в FireWorks (это если нужно какие-то слои скрывать при шинковке, а иногда можно и одной PNG-шкой обойтись). а шинкую всеравно в FireWorks, имхо каких бы усилий по подготовке оно не требовало, обычно они оказываются меньше затрачиваемых на шинковку в Photoshop :")
Тоже вариант :))
Я же просто вернулся в ImageReady (тем более, что в Linux'е ветка CS3 пока нормально не работает)
Я же просто вернулся в ImageReady (тем более, что в Linux'е ветка CS3 пока нормально не работает)
o_0
про ImageReady я как-то совсем забыл :") а ведь он есть и вроде как для этого и придуман был… а я все «фотошоп, фотошоп...» просто еще с 5.5 его невзлюбил и никогда не ставил. надо бы посмотреть что-ли…
про ImageReady я как-то совсем забыл :") а ведь он есть и вроде как для этого и придуман был… а я все «фотошоп, фотошоп...» просто еще с 5.5 его невзлюбил и никогда не ставил. надо бы посмотреть что-ли…
а я по старинке 8-м FireWorks пользуюсь, CS-редакция fireworks у меня оргазма не вызвала при беглом осмотре… а вот фотошопа вызвала, за сим оный юзаю из CS3 :)
не знаю… если мне надо что-то нарисовать то Photoshop + Corel Draw (в былые времена я с ним очень плотно работал, поэтому для меня он удобнее)
а вот нарезать и оптимизировать графику всегда перебираюсь в FireWorks, в нем работа с кусками лично мне кажется гораздо удобнее… взять хотя бы возможность для каждого слайса указать имя — все под рукой, добраться — одно движение мышкой (жаль хоткея для этого нет, ну или я не в курсе). как задать имя в фотошопе (кроме как через контекстное меню, Edit Slice Options) я не знаю :")
ну и еще куча мелочей… в общем удобнее инструмента для шинковки я пока не знаю :)
З.Ы.: а рисовать в нем лично мне не удобно. возможно это из-за странной смеси растра с векторами которую мой мозг не в состоянии осилить. имхо, удобнее вектор править в векторном редакторе а растр в растровом :)
а вот нарезать и оптимизировать графику всегда перебираюсь в FireWorks, в нем работа с кусками лично мне кажется гораздо удобнее… взять хотя бы возможность для каждого слайса указать имя — все под рукой, добраться — одно движение мышкой (жаль хоткея для этого нет, ну или я не в курсе). как задать имя в фотошопе (кроме как через контекстное меню, Edit Slice Options) я не знаю :")
ну и еще куча мелочей… в общем удобнее инструмента для шинковки я пока не знаю :)
З.Ы.: а рисовать в нем лично мне не удобно. возможно это из-за странной смеси растра с векторами которую мой мозг не в состоянии осилить. имхо, удобнее вектор править в векторном редакторе а растр в растровом :)
Вёрстка — процесс формирования страниц (полос) издания путём компоновки текстовых и графических элементов ()
Протипирование — это быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом
Когда рисуется весь макет, а не его набросок — это верстка
Протипирование — это быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом
Когда рисуется весь макет, а не его набросок — это верстка
Верстальщики ничего не рисуют Они лишь вертсают заранее определенный макет. Однако, дизайнеры могут верстать, если делается макет.
Уходить в спор желания нет. Скажу лишь две вещи:
— Многим не нравиться называть создание макетов дизайна страниц версткой, т.к. большинство использует для этого программы «графические редакторы» для рисования.
— Прототипирование можно отнести только к созданию черновой «рыбы» сайта.
Уходить в спор желания нет. Скажу лишь две вещи:
— Многим не нравиться называть создание макетов дизайна страниц версткой, т.к. большинство использует для этого программы «графические редакторы» для рисования.
— Прототипирование можно отнести только к созданию черновой «рыбы» сайта.
Как-то беседовал с полиграфическим дизайнером из одной компании про процесс создания сайта. Он ФШ вообще не открывал ни разу. Чот мы друг друга не понимали, и тока потом доперло, что он верстальщиками называет веб-дизайнеров, создателей макета. Тут, видимо, такой же случай.
fotoshop forever :)
Эх, как я мечтал о книге с подобными примерами в начале своего веб-пути ))
Уверен что тем, кто только начинает знакомится с веб-дизайном и версткой топик будет очень полезен,
т.к. раскладывает процесс по полочкам
Уверен что тем, кто только начинает знакомится с веб-дизайном и версткой топик будет очень полезен,
т.к. раскладывает процесс по полочкам
Semicolon — это точка с запятой, а не запятая, как у вас написано в четвертом шаге.
очень красиво получилось, спасибо!
Fireworks forever
Замечательное руководство. Спасибо.
предлагаешь использовать графический редактор Adobe Photoshop?
а что насиловать?
Он предлагает использовать программы согласно их специализации. В данном контексте для верстки ИнДизайн или Кварк, так как в них для этого гораздо больше возможностей и делается соответственно быстрее и проще.
акститесь,
для вэб макетов кварк? оО
для вэб макетов кварк? оО
Для макетирования как такового. Для примитивного макета разницы в производительности не будет, но при макетировании крупных проектов выгода на лицо. Причем дело именно в объеме рнабот, а не в сфере. Для верстки визитки или корпоративного бланка так же нет необходимости во всем функционале Кварка, Индизайна и иже с ними.
Косательно же веба и именно макетирования простых страниц (причем 1 или 2, а не большого их колличества с разнящейся структурой). Лично я вообще использую только SciTE из програмного обеспечения. В моем случае, это помимо удобства в работе приносит дополнительный доход при тех же временных затратах.
Косательно же веба и именно макетирования простых страниц (причем 1 или 2, а не большого их колличества с разнящейся структурой). Лично я вообще использую только SciTE из програмного обеспечения. В моем случае, это помимо удобства в работе приносит дополнительный доход при тех же временных затратах.
подумав соглашусь по поводу кварка…
а вот последний тезис не поясните?)
а вот последний тезис не поясните?)
Поясню конечно =) Я не только создаю дизайн сайта, но и верстаю его. Так сложилось исторически (хочешь чтобы было хорошо сделано — сделай это сам). Как следствие — отсутствие этапа графического макетирования. Придумываю концепцию, составляю перечень необходимых на странице элементов, на листах бумаги проектирую их расположение на будущей странице, рисую иллюстрации и иконки и сразу приступаю к верстке шаблона для чего пользуюсь SciTE (простенький текстовый редактор, вроде виндового «блокнота», но кросплатформеный, с корректной поддержкой UTF-8, и подсветкой синтаксиса). Как видете стадия создания картинки «так это должно смотреться в браузере» пропущена за ненадобностью.
спасибо, согласен с предыдущим постом. Для того что здесь было показано, есть фотошоп, в котором это делать удобнее. а скетч получился визуально достаточно приятным :)
Еще несколько мини советов по работе в Illustrator
1) Масштабируем свой макет с помощью горячих клавиш ctrl + и ctrl — 2) Используем инструмент Align для выравнивания элементов:
1) Масштабируем свой макет с помощью горячих клавиш ctrl + и ctrl — 2) Используем инструмент Align для выравнивания элементов:
Forever forever! =)
«Создадим новый документ длиной 960px» Откуда у документа длина? ))
Такого понятия нет. Исправьте на ширину.
Пользуйтесь словарем!
Не путайте новичков в этом вопросе.
Такого понятия нет. Исправьте на ширину.
Пользуйтесь словарем!
Не путайте новичков в этом вопросе.
Illustrator — для продвинутого рисования иллюстраций в векторе.
Photoshop — обработка изображений и коллаж, растровая (пиксельная) графика, основные возможности вектора, порезка и оптимизация изображений.
Исходя из этого, как ни крути, но фотошоп — намного более подходящий инструмент для создания макетов веб-страниц, а в статье учат на болиде Формула-1 перевозить мебель. ИМХО.
Photoshop — обработка изображений и коллаж, растровая (пиксельная) графика, основные возможности вектора, порезка и оптимизация изображений.
Исходя из этого, как ни крути, но фотошоп — намного более подходящий инструмент для создания макетов веб-страниц, а в статье учат на болиде Формула-1 перевозить мебель. ИМХО.
Добавьте сюда еще и Fireworks — и будет законченая картина! На самом деле, для разработки дизайна страницы Фотошопа тоже «много». В Фотошопе есть смысл готовить отдельные сложные элементы дизайна. А вот именно в Fireworks'e все заточено под веб макеты, причем многостраничные, с установкой Master Page, с расшариванием лаеров по страницам и много многое другое…
Дело в том, что многие коллеги просто уже очень давно привыкли работать в Фотошопе. И для них не было особого смысла обращать внимание на слабенький продукт от Macromedia. Теперь же, все сбалансировано и интегрировано, взаимная поддержка лаеров и эффектов и т.д.
Ну а что касается вебмакетирования в Иллюстраторе — простите, но это как минимум, непрактично. Хотя, имеет смысл для тех, кто не владеет ничем, кроме Иля, но очень хочет нарисовать сайт! ;-)
Дело в том, что многие коллеги просто уже очень давно привыкли работать в Фотошопе. И для них не было особого смысла обращать внимание на слабенький продукт от Macromedia. Теперь же, все сбалансировано и интегрировано, взаимная поддержка лаеров и эффектов и т.д.
Ну а что касается вебмакетирования в Иллюстраторе — простите, но это как минимум, непрактично. Хотя, имеет смысл для тех, кто не владеет ничем, кроме Иля, но очень хочет нарисовать сайт! ;-)
не могу голосовать, так что тут напишу_) СПАСИБО!
На 11-м шаге закончил чтение. Ибо в WYSIWYG-редакторах верстают только мудаки.
WYSIWYG — отличная штука. Никто не заставляет верстать в Design Mode. Но всегда удобно иметь возможность что-то поправить, не копаясь в коде. Ну и так далее.
а мне в DreamWeaver'е сплит нравится… в дизайне мышом ткнул куда надо в коде оно само отыскалось не надо лишний раз бегать туда сюда глазами и скроллить в поисках интересующего куска кода. да и вставки примитивных тэгов/структур удобнее… ну лень иногда ради выделения жирным или разбиения на параграфы в код лезть. и заголовки удобнее хоткеями расставлять в дизайне нежели H1 — /H1 ручками набивать…
Вы так хорошо знакомы со спецификациями HTML (XHTML), чтобы не допускать ошибок в структурной разметке? WYSIWYG- редакторы как раз и служат для этого, чтобы не путать, например,
с
там где это необходимо.
с
там где это необходимо.
забыл что html здесь работает
<br> c <br />
<br> c <br />
Ну XHTML 1.0 подразумевает закрывание даже одиночных тегов, поэтому однозначно.
Если не использовать презентационные теги, то все достаточно просто.
А использование WYSIWYG для подсветки синтаксиса — это забивание гвоздиков любимым микроскопом.
Если не использовать презентационные теги, то все достаточно просто.
А использование WYSIWYG для подсветки синтаксиса — это забивание гвоздиков любимым микроскопом.
по-моему верстать можно в чем угодно, зависит от цели.
А вот штампованные фразы «виндовс-сакс, линь рулит» лепят только мудаки.
А вот штампованные фразы «виндовс-сакс, линь рулит» лепят только мудаки.
Это не вёрстка, это нарезка.
А ещё — это п е р е в о д…
А ещё — это п е р е в о д…
А где ссылка «скачать»? ;)
Хорошая работа :)
видоподкаст был в тему!
Хорошая работа :)
видоподкаст был в тему!
Для макетов посложнее придется переключаться в фотошоп (например растровые иллюстрации), но для простых сайтов вполне себе инструментарий. Особенно, если используются рисованные вектором элементы дизайна.
для того что бы слепить шкурку для фордпреса за 20 минут, да подойдет))))
Мне показалось, что статья ни о чем. Зачем тут иллюстратор так и не понял.
А вот это:
> вы можете полностью контролировать процесс создания макета страницы.
простите, ппц полный.
Сразу представился редактор со злобным ИИ, который мешает в работе :)
А вот это:
> вы можете полностью контролировать процесс создания макета страницы.
простите, ппц полный.
Сразу представился редактор со злобным ИИ, который мешает в работе :)
Такс
во первых иллюстратор это программа не для создания макетов, создавать макет в иллюстраторе мягко говоря бред… из пушки по воробьям стрелять…
Во вторых )) по поводу "> вы можете полностью контролировать процесс создания макета страницы." — согласен с tema_sun на стотыщмильонов процентов ))))
в третих )))
Видно то что это написано не проффесионалом, так как фраза типа «что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.» сразу показывает то что, человек не хочет/знает о сетке))
Про визивиг ))) это еще то
Вобщем не проффесионально, безполезно, неправильно.
во первых иллюстратор это программа не для создания макетов, создавать макет в иллюстраторе мягко говоря бред… из пушки по воробьям стрелять…
Во вторых )) по поводу "> вы можете полностью контролировать процесс создания макета страницы." — согласен с tema_sun на стотыщмильонов процентов ))))
в третих )))
Видно то что это написано не проффесионалом, так как фраза типа «что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.» сразу показывает то что, человек не хочет/знает о сетке))
Про визивиг ))) это еще то
Вобщем не проффесионально, безполезно, неправильно.
И еще нельзя забывать о том, что дизайнер, работающий над макетом, должен иметь возможность ВИДЕТЬ как графика будет выглядеть после растеризации в виде битмапа при зуме 100%. В Иллюстраторе же, работая с векторной графикой, вы можете только об этом гадать…
И все почему — потому что Иллюстратор создан совершенно для других задач!
И все почему — потому что Иллюстратор создан совершенно для других задач!
Время от времени сам использую Люстру для веб-макетов. Может быть, это сугубо индивидуально, но скорость выполнения некоторых операций возрастает (по сравнению с Фотошопом). Думаю, это происходит за счет того, что в одном слое может быть несколько элементов (блоки, текст, линии), которые можно выделять одним кликом непосредственно на макете, а в Фотошопе с этим все проблематичнее, как правило, на один объект нужен один слой, и управляется он опосредованно, через субменю.
Но есть и минусы. Среди них:
— невозможность выбора режима отображения текста без сглаживания (из-за этого утрачивается связь с реальным видом страницы в браузерах);
— невозможность автоматически подчеркнуть выделенный текст для обозначения ссылок, приходится городить линии, что несколько затрудняет и замедляет работу.
— какую-то навороченную графику зачастую удобнее делать в том же Фотошопе, но, опять же, это может быть индивидуально.
Но есть и минусы. Среди них:
— невозможность выбора режима отображения текста без сглаживания (из-за этого утрачивается связь с реальным видом страницы в браузерах);
— невозможность автоматически подчеркнуть выделенный текст для обозначения ссылок, приходится городить линии, что несколько затрудняет и замедляет работу.
— какую-то навороченную графику зачастую удобнее делать в том же Фотошопе, но, опять же, это может быть индивидуально.
«невозможность автоматически подчеркнуть выделенный текст для обозначения ссылок, приходится городить линии, что несколько затрудняет и замедляет работу.»
Я, может быть, неправильно понял, но текст в иллюстраторе можно подчеркнуть (нажать ctrl+T, и в появившейся палитре внизу слева будет значок подчеркивания. Если нет, нужно в опциях панельки выбрать show options)
Я, может быть, неправильно понял, но текст в иллюстраторе можно подчеркнуть (нажать ctrl+T, и в появившейся палитре внизу слева будет значок подчеркивания. Если нет, нужно в опциях панельки выбрать show options)
> невозможность выбора режима отображения текста без сглаживания (из-за этого утрачивается связь с реальным видом страницы в браузерах)
тут половина негативных коментариев про иллюстратор написаны людьми, которые, мягко говоря, совершенно себе не представляют его возможностей…
для того чтобы убрать антиалиасинг с текста нужно выделить текстовый блок, зайти в меню Effects, выбрать Rasterize, разрешение 72 ppi и в меню Anti-aliasing — No (кстати, на маке и линуксе «реальный вид страницы» как раз со сглаживанием :-)
для того же подчеркивания и т. п., то есть для форматирования текста можно задавать стили (есть, кстати, и графические стили)
для того чтобы посмотреть макет в реальном разрешении страницы, нужно нажать Ctrl + 1
а вообще, рекомендую осваивать индизайн
(на заметку: для правильного отображения прозрачностей нужно в меню Edit > Transparency Blend Space нужно выбрать Document RGB, и не забудте использовать именно RGB цвета)
P. S. Глядя на то как люди работают в Иллюстраторе захотелось написать учебник.
Это кому-нибудь интересно? Можно сделать цикл статей на Хабре и осветить там именно то, что может помочь в веб-дизайне. Хотя я тут недавно, и еще некоторое время, наверное, кармы не хватит на топик…
тут половина негативных коментариев про иллюстратор написаны людьми, которые, мягко говоря, совершенно себе не представляют его возможностей…
для того чтобы убрать антиалиасинг с текста нужно выделить текстовый блок, зайти в меню Effects, выбрать Rasterize, разрешение 72 ppi и в меню Anti-aliasing — No (кстати, на маке и линуксе «реальный вид страницы» как раз со сглаживанием :-)
для того же подчеркивания и т. п., то есть для форматирования текста можно задавать стили (есть, кстати, и графические стили)
для того чтобы посмотреть макет в реальном разрешении страницы, нужно нажать Ctrl + 1
а вообще, рекомендую осваивать индизайн
(на заметку: для правильного отображения прозрачностей нужно в меню Edit > Transparency Blend Space нужно выбрать Document RGB, и не забудте использовать именно RGB цвета)
P. S. Глядя на то как люди работают в Иллюстраторе захотелось написать учебник.
Это кому-нибудь интересно? Можно сделать цикл статей на Хабре и осветить там именно то, что может помочь в веб-дизайне. Хотя я тут недавно, и еще некоторое время, наверное, кармы не хватит на топик…
Мде… Некоторые забыли что это топик-перевод…
Сайты и индизайн — то-же, что векторная графика и 3д макс.
О чём вы?
О чём вы?
Территория InDesign — бумажная вёрстка. С нерезиновым размером листа, подключаемыми шрифтами, полями, обрезами, разворотами, фолдами, многоколоночной вёрсткой, обтеканием текста, колонтитулами, буквицами, оглавлением, врезками, лидами, блидами, цветовым делением… (я могу долго так продолжать :)
InDesign вообще к вебу отношения не имеет никакого.
И даже, если предположить, что в нём можно делать наброски будущих веб-страниц, то это просто потеря времени. Тем более, для больших сайтов.
InDesign вообще к вебу отношения не имеет никакого.
И даже, если предположить, что в нём можно делать наброски будущих веб-страниц, то это просто потеря времени. Тем более, для больших сайтов.
InDesign вообще к вебу отношения не имеет никакого.
а мужики-то и не знали…
Adobe® InDesign® CS4 software breaks down the barriers between online and offline publishing.
не верьте рекламе (с) :)
Речь идёт либо о банальном pdf, либо о совершенно несерьёзной функции «export to dreamweaver».
Всё, что этим можно добиться — выплюнуть голый контент в html, обёрнув блоки дивами. И всё. Без всяких стилей, позиционирования, css вообще!
Другими словами, Microsoft Word в таком случае — в стопицот раз более мощный инструмент для веб-вёрстки. ;)
Речь идёт либо о банальном pdf, либо о совершенно несерьёзной функции «export to dreamweaver».
Всё, что этим можно добиться — выплюнуть голый контент в html, обёрнув блоки дивами. И всё. Без всяких стилей, позиционирования, css вообще!
Другими словами, Microsoft Word в таком случае — в стопицот раз более мощный инструмент для веб-вёрстки. ;)
Наоборот, большие сложные сайты и интерфейсы в индизайне делать удобнее — как сказали выше, это гибкая работа с текстовым контентом и большой упор на стили-шаблоны-наследование. Опять же, очень удобная система наследуемых друг от друга мастеров — закинуть туда хедеры-футеры, основную разметку, а на страницах менять лишь информационное наполнение и иллюстрахи.
Я говорю прежде всего об информационных ресурсах, а не про промо-сайты.
Я говорю прежде всего об информационных ресурсах, а не про промо-сайты.
Постойте. Вы видели индизайн?
Для создания интерфейсов там вообще нет ни одного инструмента.
Поймите, абстракция индизайна — это лист бумаги. Конечного размера. Со всеми вытекающими.
Не верите, попробуйте сами.
Для создания интерфейсов там вообще нет ни одного инструмента.
Поймите, абстракция индизайна — это лист бумаги. Конечного размера. Со всеми вытекающими.
Не верите, попробуйте сами.
Эмм… Ну это смотря что вы под «интерфейсами»и что под инструментами подразумеваете :) Я кагбэ последние пару лет занимаюсь созданием сложных биржевых интерфейсов: прототипирую в нём (вне конкуренции!) и потихонечку переползаю на навешивание рюшечек в нём же. Мне — удобно, но я на истину в последней инстанции не претендую, да.
Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
Эмм… Ну это смотря что вы под «интерфейсами»и что под инструментами подразумеваете :) Я кагбэ последние пару лет занимаюсь созданием сложных биржевых интерфейсов: прототипирую в нём (вне конкуренции!) и потихонечку переползаю на навешивание рюшечек в нём же. Мне — удобно, но я на истину в последней инстанции не претендую, да.
Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
Если уж на то пошло — вам красные плюсики на эскизе ничего не напоминают? ;)
img.artlebedev.ru/everything/ilim/process/ilim-ideas-02.jpg
Прототипы и скетчи — да, вне конкуренции, согласен! Я вообще считаю индиз лучшим продуктом у Adobe. Но мы же изначально говорили о веб-вёрстке, или я вас неправильно понял?
Нет, я говорю про создание эскиза как такового, особенно если речь идёт про что-то многостраничное или часто обновляемое. Далее всё это щастье отдаётся фронт-енд разработчику, который нарежет всё как ему надо, сверстает и т.п. Я не думаю, что профессиональнгый фронт-енд использует фотошопный слайсинг, разве что в очень ограниченых случаях, а дизайнеру оно нужно по-моему ещё реже.
Я вообще слабо понимаю последнюю часть статьи, где идёт речь про нарезку на файлы с именами типа «website_copy_21.jpg» :)
Я вообще слабо понимаю последнюю часть статьи, где идёт речь про нарезку на файлы с именами типа «website_copy_21.jpg» :)
Да. Я с вами вполне солидарен. Просто эта ветка началась со слов:
Замечу, что верстку больших сайтов удобнее делать в InDesign (на то она и верстка).ну да ладно, не будем больше оффтопить.
оки :) видимо, «вёрстку» здесь употребили в полиграфическом контексте, что оказалось чревато.
Блин, а только я один предпочитаю нарезать макет в процессе работы, а не сразу на много файлов?)
Это кому как нравиться. Я вообще «режу» картинки вручную без всяких слайсов. Но только потому, что мне так удобнее.
Ну да, я вот тоже без слайсов, в ручную =)
Просто прочитал топик, подумал, может я что-то вопиюще не правильно делаю =)
Просто прочитал топик, подумал, может я что-то вопиюще не правильно делаю =)
Я об этом уже давно не думаю, т.к. перепробовал различные подходы и сейчас использую единственно-удобный для себя.
Слайсы очень полезны, когда вёрстка рутинная (например, огромное количество однотипных элементов / в однотипных макетах). В остальных случаях, особенно на этапах обучения верстке, полезно повырезать элементы вручную, чтобы научиться держать в голове варианты наложений слоёв и увидеть все возможные варианты нарезки макета (часто за рутиной можно обнаружить более удачный вариант)
Честно говоря, это менее продуктивно. На мой взгляд, лучше сразу нарезать и не дёргаться потом стотыщ раз.
а вот зачем? если есть фотошоп
Сайты бывают разные.
Зависит от необходимости в пиксельной точности.
Собственно, в последнее время бытовая необходимость в ней всё падает и падает…
С другой стороны, при первом уклоне в «фотографический дизайн» макет должен плавно перекочевывать в шоп и алиаситься уже там.
Зависит от необходимости в пиксельной точности.
Собственно, в последнее время бытовая необходимость в ней всё падает и падает…
С другой стороны, при первом уклоне в «фотографический дизайн» макет должен плавно перекочевывать в шоп и алиаситься уже там.
спасибо!
а теперь бы следующий шаг, для друпала)
а теперь бы следующий шаг, для друпала)
Файрворкс, да.
Использовать для создания скетчей не для того созданные монстры типа Illustrator или Photoshop — либо маразм, либо незнание.
Если бы Адоб FW ещё отдельно от CS раздавал. Впрочем, спасибо Адобу, что не загубил.
Использовать для создания скетчей не для того созданные монстры типа Illustrator или Photoshop — либо маразм, либо незнание.
Если бы Адоб FW ещё отдельно от CS раздавал. Впрочем, спасибо Адобу, что не загубил.
Я уже как-то заплутался в чем лучше макет делать.
Раньше думал, что фотошоп для всего подходит.
Раньше думал, что фотошоп для всего подходит.
Фотошоп подходит для сборки макета. Вообще не суть в чем делать. Главное — чтобы удобно было и привычно.
В Фотошоп, без проблем, всякие векторные объекты из Иллюстратора можно переносить как SmartObject. Все прекрасно работает…
Да и вообще не стоит запариваться где НАДО делать, важно другое — где УДОБНО делать :)
В Фотошоп, без проблем, всякие векторные объекты из Иллюстратора можно переносить как SmartObject. Все прекрасно работает…
Да и вообще не стоит запариваться где НАДО делать, важно другое — где УДОБНО делать :)
Сборка макета в Illustrator во многом быстрее аналогичной работы в Photoshop. Однако требуется особая тщательность и аккуратность, особенно при работе с линиями.
В частности, необходимо вот таким вот образом установить метку привязки в палитре Align (прошу прощения, если об этом уже говорили):
кроме того, в том Illustrator CS3, что гуляет по России есть баг с перетаскиванием слайсов, а так же мега-баг: при создании файла с указанием размера в пикселах, мы видим Crop Area нужного нам размера, но при этом ArtBoard принимает чудовищные размеры 14400х14400 пикселов. В результате Illustrator отказывается выполнять команду Save for web. Лечится просто — идём в File > Document Setup и ставим нормальные значения для Artboard.
Итого: для собственных работ, которые и верстаем самостоятельно Illustrator очень даже может пригодится, а вот при вёрстке чужими руками стоит десять раз подумать.
В частности, необходимо вот таким вот образом установить метку привязки в палитре Align (прошу прощения, если об этом уже говорили):
кроме того, в том Illustrator CS3, что гуляет по России есть баг с перетаскиванием слайсов, а так же мега-баг: при создании файла с указанием размера в пикселах, мы видим Crop Area нужного нам размера, но при этом ArtBoard принимает чудовищные размеры 14400х14400 пикселов. В результате Illustrator отказывается выполнять команду Save for web. Лечится просто — идём в File > Document Setup и ставим нормальные значения для Artboard.
Итого: для собственных работ, которые и верстаем самостоятельно Illustrator очень даже может пригодится, а вот при вёрстке чужими руками стоит десять раз подумать.
Отличный совет, как пересесть с фотошопа на иллюстратор. Стоит задуматься
На выходе мы должны получить растровые изображения, глупо для этого использовать векторный редактор.
Не могу понять, чем не устраивает растр.
О, дабы тема развивалась, вспомню, что один раз использовал Кварк 7.0 для «скелетного» макетирования будущего большого сайта. В принципе, остались неплохие впечатления
Уже год, как бросил рисовать сайты в фотошопе, и переехал на иллюстратор. (Хотя что значит переехал… в любом случае копипастный экспорт туда обратно использую и много пнг-гифов разных через фотошоп готовлю)… но это технология… работаю под движки, а там как правило мало картинок — много верстки.
Могу сказать свое имхо мнение. Для сайтов — «большая картинка и три ссылки» — проще полностью в фотошопе, зачем заморачиваться. Сайты с заметным текстово-ссылочным объемом ЗАМЕТНО удобнее рисовать в AI. В Индизайне я бы стал делать проекты, где заказчик требует отрисовать до полного финиша большое количество страниц. Но в любом случае… Фотошоп для картинок тоже нужен ))) почти всегда. А АИ для вектора… так что спор несколько… «что лучше — плоскогубцы или напильник».
И я например в иллюстраторе часто тект пишу-редактирую.
Так что для меня расклад такой:
Маленький «красывый» сайт: Фотошоп
Средний «почитать» сайт: Фотошоп — Илюстратор
Большой «мэга-портал» сайт: Фотошоп — Илюстратор — Индизайн (или кварк или...)
Ну и TopStyle + UltraEdit + FireBug + Drupal
Могу сказать свое имхо мнение. Для сайтов — «большая картинка и три ссылки» — проще полностью в фотошопе, зачем заморачиваться. Сайты с заметным текстово-ссылочным объемом ЗАМЕТНО удобнее рисовать в AI. В Индизайне я бы стал делать проекты, где заказчик требует отрисовать до полного финиша большое количество страниц. Но в любом случае… Фотошоп для картинок тоже нужен ))) почти всегда. А АИ для вектора… так что спор несколько… «что лучше — плоскогубцы или напильник».
И я например в иллюстраторе часто тект пишу-редактирую.
Так что для меня расклад такой:
Маленький «красывый» сайт: Фотошоп
Средний «почитать» сайт: Фотошоп — Илюстратор
Большой «мэга-портал» сайт: Фотошоп — Илюстратор — Индизайн (или кварк или...)
Ну и TopStyle + UltraEdit + FireBug + Drupal
Диву даюсь. Как вы векторные редакторы используете для растровой графики? На слайсы порезать и растрировать две задачки такие разные слегка. Хочу сказать, что если верстать по-хорошему то нужно со всеми картинками работать в индивидуальном порядке. Имеются в виду закгругленные уголки, прозрачные всякие слои на странице, градиенты на прозрачность.
Конечно в зависимости от дизайна и без фанатизма (типа демо-джипеги-плейсхолдеры можно и через слайсы оптимизировать), но вот к PNG точно надо в индивидуальном порядке подходить. Хотя опять же, при желании сделать, шоп все круто было.
В любом случае финальный растровый результат следует в растровом редакторе делать. FW/PS.
Что до меня, то векторную графику я оптимизирую и растрирую через фильтры в АИ и импортирую в ФШ как смарт-объекты.
Tschüss.
Конечно в зависимости от дизайна и без фанатизма (типа демо-джипеги-плейсхолдеры можно и через слайсы оптимизировать), но вот к PNG точно надо в индивидуальном порядке подходить. Хотя опять же, при желании сделать, шоп все круто было.
В любом случае финальный растровый результат следует в растровом редакторе делать. FW/PS.
Что до меня, то векторную графику я оптимизирую и растрирую через фильтры в АИ и импортирую в ФШ как смарт-объекты.
Tschüss.
Мы меня конечно же простите, но то, что описано выше, ерунда полная. Я бы даже сказал, издевательство над самим собой. Есть конечно куча способов выкопать яму, первый. это лапатой, второй ложкой. так вот, строители копают лападами, автор же взял почему-то ложку. Нарезку слайсов и прочий вектор умеет отлично делать фотошоп.
Наш дизайнер юзает фотошоп и все довольны пока что были)
Можете зайти сюда — оценить наш сайтик, также сайты клепаем.
Можете зайти сюда — оценить наш сайтик, также сайты клепаем.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Используем Adobe Illustrator для создания макета страницы