Растр или вектор в дизайне сайтов

Недавно на одном ресурсе меня обкидали камнями, что разрабатывать дизайн сайта в шопе не продуктивно, не правильно, не в тренде и для этого нужно использовать векторный редактор... И я что то подумал неужели я в танке? :cry:

Выразите свое мнение по этому поводу, стало реально дико интересно и решил создать пост

Комментарии пользователей

evocati

Нет принципиальной разницы в чем делать, свои плюсы и минусы есть в каждом редакторе, в том же фотошопе есть шейпы для масштабирования без потери качества (если конечно попадаете в пиксельную сетку), в иллюстраторе же, как и в других векторных редакторах меньше возможностей для разработки скевоморфичного дизайна, в общем делать можно хоть в пеинте, главное чтобы получалось круто и сверстать можно было

oxStudio

evocati, да я также вот думаю.. только пните меня, но чем удобнее вектор для веба диза?

winstonby

Ладно уж разрабатывать сам дизайн в векторных редакторах. Как то раз подруге в одном из белорусских университетов (не будем уточнять в каком) задали сделать сайт, вернее типо личную страничку (не онлайн, а оффлайн просто показать). Она попросила меня помочь в этом деле, что собственно было и сделано чистенько и аккуратненько за пару часов и верстал все это дело через notepad++. Однако принеся все это дело к преподу, он сказал что это лажа и нужно было верстать через MS Word... WORD... Вот тут вот поясните мне, может это тоже какие-то новые стандарты и я о чем то не вкурсе? :surp:

oxStudio

winstonby, мне в универе сказали рекламную продукцию нельзя делать в растре :ag:

Selestial

Ещё Быстроновский говорил, что в люстре достаточно удобно делать и верстать макеты. В люстре, если знания не ограничиваются созданием прямоугольника, очень даже удобно делать сайты, там удобная работа со стилями текста, лучше работают линки на смарт-объекты, меньше всё весит, быстрее работает, практически вечный кэш, рабочие области на одном экране. Кучу крутых вещей из люстры не интегрируют в шоп, а жаль ( Редкий трендовый дизайн потребует работу именно в шопе, зачастую можно всё это сделать в векторе.

brusher

Просто препод в танке и сам плохо в этом разбирается. Или вредничает =) Что же касается дизайна, то вектор входит в моду вместе с дисплеями с повышенной плотностью: проще и легче (по размеру) вставить векторную иконку в SVG/шрифтом, чем делать несколько спрайтов под разные дисплеи и писать медиа-запросы/джски для их корректного отображения. Кроме того есть множество плюшек у SVG. Безусловно, это не значит что нужно маньячить и рисовать в векторе сложные фотореалистичные изображения, если только этого не требует задача =) А еще нынче в моде Bohemian Sketch для дизайна сайтов/приложений (по своему опыту могу сказать — оч удобно!). Про плюшки SVG вот несколько ярких примеров с codrops: http://tympanus.net/Tutorials/MotionBlurEffect/ http://tympanus.net/Tutorials/ResponsiveSVGs/index6.html http://tympanus.net/Development/CreativeGooeyEffects/index.html http://tympanus.net/Development/ElasticSVGElements/collapseexpand.html

oxStudio

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

oxStudio

brusher, насчет svg соглашусь )

Selestial

Selestial, так ведь люстра как многое позволяет что не позволяет шоп, так и не позволяет кучу творческих и прочих фишек. Помоему люстра для веба это больше для трендовых флет дизайнов и "типовых" макетов, со смартами вроде в сс2014 тоже двинулось всё. Наверное тут просто кому что удобно, ну как я считаю что удобнее делать в шопе т.к. ты делаешь сразу и интерфейс и растр для него и не метаешся по прогам
Я и не говорю, что она во всём идеальна, шоп в довесок юзать только в плюс. Как и люстру, когда делаешь диз в шопе. Иконки и пиктограммки уже давно только в люстре и только в свг, ибо технологи требуют :)

Kurilshik

ни разу не видел сайт в векторе разработанный

foxo

У меня глаз начинает дёргаться, когда вижу, что разрабатывает сайт в люстре, один знакомый такой точно есть) ему там якобы удобно, хотя особо вебом он не занимается, а скорей полиграфией.

kurdyumov

ни разу не видел сайт в векторе разработанный
Это жесть... сам не давно если кто помнит озадачивался этим вопросом. Не в обиду поклонникам люстры.
Я и не говорю, что она во всём идеальна, шоп в довесок юзать только в плюс. Как и люстру, когда делаешь диз в шопе. Иконки и пиктограммки уже давно только в люстре и только в свг, ибо технологи требуют :)
А в чем проблема svg из шопа? Я работаю в шопе, все сайты из шейпов, все отлично сохраняется в svg, а благо в шопе появился генератор (на счет люстры не знаю), дак вообще сказка. Дал слоям/папкам имена с нужным расширением и все отлично сохраняется, отдал сгенерированную папочку фронтам вместе с жипежкой сайта и усе, psd фронтам даже открывать не надо. А в итоге кому что удобно, тот то и юзает, как было выше сказано, делать можно везде. Я видал макеты сайтов и в кореле )) И в заключении, дизайн то может и можно делать где угодно, только вот фронты потом плюются от люстры. Может тоже только наши и также дело привычки, хз...

oxStudio

Cracker_, вот моё мнение совпадает с твоим в точности)

Kurilshik

Cracker_, а не вру, год назад делали сайт по чужому дизайну чувак в люстре сделал сайт 6800 по ширине, потом мы уменьшали, все элементы херились. в общем каждому свой софт, при желании конечно и в 3дмаксе можно сайт сделать)

kurdyumov

Ну и зависит еще конечно от приблуд клиента. В моей недавней практике строго на строго надо было делать макеты в ai, по словам клиента для адаптации. И как клиенту объяснить, а тем более крупному, которого нельзя просто взять и послать, что адаптивность под устройства нифига не зависит от редактора. К тому же он просил делать макеты одной страницы под несколько разрешений. Спрашивается зачем тогда ai, если макеты все равно делаются дизайнером в ручную под разные разрешения?!... А на счет того, что шоп лагает... ну тут зависит от железа.... Был у меня файлик ai, было там порядка 40 экранов под айпад на одной борде. Тот же файлик я переделал для работы под себя в psd. Лагало и там и там одинаково. В шопе, если рисовать все шейпами, ничего не будет лагать, шоп и люстра лагают от жипежек. Но жипежки можно линковать в смарты и будет счастье.

brusher

ни разу не видел сайт в векторе разработанный
Опрометчивое заявление ;)
Cracker_, а не вру, год назад делали сайт по чужому дизайну чувак в люстре сделал сайт 6800 по ширине, потом мы уменьшали, все элементы херились. в общем каждому свой софт, при желании конечно и в 3дмаксе можно сайт сделать)
Тут дело в прямоте рук, а не инструменте. Когда рисуешь сайт в векторе то нужно его и рисовать сразу в нужных размерах. Мне однажды довелось побывать в похожей ситуации (в 2005 году) когда макет сайта прислали в CDR и непонятных размерах (несколько метров в ширину, про пиксели ваще молчу). Тогда я проклинал тех кто делает сайты в векторных редакторах. -- Сам я до недавних пор использовал только фотошоп и иногда открывал люстру для сложного вектора (поудобнее все-таки, чем шейпы) или простых 3д-фигур. И SVG из него сохранял. С тех пор как попробовал Sketch 3 — не могу как раньше рисовать макеты в фотошопе. И он векторный ;) Можно долго перечислять какой он няшный, но если вы обладатель мака и до сих пор не видели его — просто почитайте и посмотрите ролики, скачайте и попробуйте триал. А если мака нет — то нечего и слюну пускать, вряд ли он выйдет где-то еще (там использует граф. движок мака).

spdif

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

Mclaut

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

oxStudio

Mclaut, покажите результаты своих работ в люстре, интересно посмотреть очень

Mclaut

oxStudio, да вот хоть вот эти, например навскидку: http://sv-bogolubovo.ru/ http://vladimirskaya-rus.ru/news/ http://levleschenko.ru/ http://impladent.pro/ http://megasalon.ru/ Более-менее нормально получается, ящитаю)

Levitan

Без разницы, в чем удобнее в том и работай =) Если можешь добиться нужного результата, то хоть в скетч буке делай )

Volkova

Киньте камни в них обратно) ерунду же говорят

Mclaut

TVO, да причем же тут флет, простибудда, я же сказал - что я лично считаю фотошоп громоздким и неуклюжим, и лично мне он неудобен. Поэтому лично для меня -- удобнее и комфортнее работать именно в люстре. Если вам неудобно -- дело опять же ваше. Но мне всегда кажется, когда люди начинают с упорством защищать какую-то прогу, то скорее всего просто не могут хоть немного переключиться и представить, что возможно решить ту или иную задачу несколькими способами. Насчет редизайна -- слова ваши довольно подленько звучат, хоть и прикрытые "Всем мир". Клиенты довольны соотношением цена/качество/функционал/сроки, для меня это является главным показателем. Что люди хотели, то и получили. И не важно, хоть бы я даже сделал материалы для верстака с помощью поверпоинта, главное — всё работает и выглядит норм.

Mclaut

Да будет так, TVO, пожимаю руку и готов к сотрудничеству. Всегда приятно встретить воспитанного собеседника. Во многом согласен также и насчет портфолио. И как резюме нашего обсуждения — пришла интересная формулировка, что каждый специалист использует в своей деятельности коктейль инструментов. Кто-то любит замешать побольше ингредиентов, кто-то предпочитает только один. Главное — хорошо провести время.) Всех благ и успехов в творчестве!

kurdyumov

Какая люстра мать вашу. О чем вы говорите ? Как можно разрабатывать дизайн сайта в этих неуклюжих прогах ? они никогда не заменят богатейший функционал фотошопа. Как раз таки, что бы нарисовать дизайн в стиле flat - достаточно ограничиться знаниями создания прямоугольника и круглешка если так проще. Люстра никогда не выместит фотошоп, хотя бы потому, что она предназначена для иных целей - для отрисовки печатной продукции, или тех же иконок / иллюстраций. У меня тоже дергается глаз, когда я вижу как люди рисуют сайты в люстре/кореле. (Считаю, что 80% всех таких горе-дизайнеров сначала сидели в полиграфии, а потом, что бы не изучать новую программу для себя, делают в том, в чем умеют. Примерно как заказчики в пэйнте объясняют иногда ) Mclaut, во всех ваших 5 примерах созданных с помощью вектора, я вообще не увидел ничего даже рядом стоящего с "Flat", каких либо иконок или еще чего то, для чего бы понадобилось как на ломаном иностранном языке разрабатывать в векторе (и не в обиду, но с такими сайтами обычно приходят на редизайн). Да простят меня коллеги, но сайты правильно рисовать в шопе! Делайте сразу правильно, называйте слои правильно, не сложно нажать пару кнопок и сгруппировать слои назвав их логически, а не "layer 49 copy 73" Не знаю как другие, а я можно сказать вырос на этом ресурсе и других подобных, где и научился полезным привычкам, за которые отдельно благодарят верстаки и заказчики. Всем мир.
Соглашусь со всем выше сказанным. И заодно обращусь к коллегам. Товарищи дизайнеры, приводите пожалуйста файлы для верстки в соотвествующий вид. У вас это займет пару минут, а фронтам чтобы разобраться в вашей не разобранной каше, уйдет день. А связано это с тем, что частенько приходят файлы от другой студиий на верстку, а это одна из крупнейших студий россии, и ее 100% все знают. И файлах там, честно сказать, творится [censored]п*№%?ц[/censored]! Мне жаль моих фронтов, да и мне приходится разбираться в файлах, дабы помочь им. И не важно, люстра, шоп, в шопе папки, в люстре группы и борды. Относитесь уважительней к коллегам.

brusher

На самом деле спор о том кто какой инструмент предпочитает и как строит разработку. Многие дизайнеры вообще не обременяют фронтендщиков нарезкой и передают им архивчик assets уже нарезанный как надо и в нужных размерах и прикладывают PSD/AI/SKETCH/INDESIGN для того чтобы посмотреть размеры, учесть какие-то нюансы. А порой еще и спецификации прикрепляют, гифки и т.п. Это дело процесса. А заявление «кто не в фотошопе — горедизайнеры» наводит на мысль, что у вас был лишь неудачный опыт использования других инструментов. Приведу пару примеров где фотошоп сильно проигрывает перед той же люстрой или индизайном (изначально, программами для полиграфистов): — множество артбоардов: весь сайт и структура в одном файле (правда получается тяжелый файл) — в люстре «appearance» из которого легко заверстать элемент с помощью css3 (да, в фотошопе тоже можно сделать шейпы и применить стили, но чтобы их вытащить придется залазить внутрь окошка «Layer Styles») — Символы и стили текста. Когда клиент вдруг решает перекрасить ссылки на всем сайте или сменить иконку корзины всюду в каталоге, и непременно хочет увидеть макеты, у вас уже не возникает головной боли. — Всякие там пунктирчики и прочие няшки, которые только недавно появились в фотошопе. И то не полноценно =) Безусловно есть и несколько минусов, которые для многих, очевидно, являются решающими: техдизайном и ретушью не займешься. А в индизайне и векторные иконки не порисуешь — нужно закидывать файлы из других программ. Итого, что мы имеем: Для нормальной разработки современного сайта (особенно если речь про большой и сложный проект со сложной структурой и разными экранами) необходима целая пачка программ от Адобы. Или же делаем по старинке стопицот псдшек и либо вносим правки часами (даже с учетом вставки одинаковых элементов через смарт-объекты — открывать, обновлять и пересохранять их все равно приходится), либо же передаем на верстку с пояснениями «последняя версия этого элемента в файлике таком, а последняя версия этого — в том» и фронтендщик все равно вас ненавидит. Из моего опыта: Все время работал в фотошопе. Когда дорос до крупных проектов и стала очевидна нехватка множества артбоардов пробовал работать в индизайне. Правки вносить в нем было куда проще, а работа с графикой и лэйаутом полностью разделилась на две независимые части, что тоже помогало. Кроме того получалось сначала изобразить прототип, а потом улучшать его до приличного вида и вставлять графику, попутно согласовывая и не особо теряя время на промежуточные этапы, как это бывает прототипируя отдельно от общего потока разработки дизайна. Но мне не нравилось переключение между программами и в итоге я вернулся к фотошопу. Благо я сам себе еще и фронтендщик и если что я могу позволить себе не тратить время на перерисовки макетов (когда это возможно). Ну и стараюсь работать по аджайлу — вместо параллельной разработки десятков экранов — делаем несколько и в продакшн. Не так давно познакомился со Скетч 3. Все проблемы решились: макеты легкие, все в одном файле, правки вносятся за секунды, иконки и прочее фигачим прям тут (вектор онли). Нарезка и верстка идет в разы быстрее. А если нужна красивая графика или ретушь фоток — все равно открываем Фотошоп или другой растровый редактор. К чему это я всё: Не будьте твердолобыми и уверенными в идеальности ваших старых-добрых инструментов. Разбирайтесь в новых, изучайте новые технологии, иначе через пяток-десяток лет вас сменят юнцы, которые будут делать все намного быстрее и круче вас. Всем мира и хорошей погоды =)

Ionium

Соглашусь с brusher, что есть инструменты куда удобнее фотошопа, когда проект крупный. Хорошо еще, что в шоп подтянули стили текста и абзацев, линкованные смарт-объекты и автоматический экспорт, но раньше (по сравнению с Идизайном тем же) вносить сквозные правки было адовой задачей. Да и скорость разработки для меня лично в Индизайне намного быстрее, чем в Шопе. Единственное существенное ограничение было то, что большинство верстальщиков работают только с фотошопом.

Rakutin

Только фотошоп, только хардкор!) Я вообще в CS3 сайты рисую мне хватает. Для иконок и прочего векторного люстра.