Разработка сайта с нуля - иллюстратор или фотошоп?

11

Если я создаю веб-сайт с нуля и собираюсь нарезать его и кодировать в Adobe Dreamweaver позже, должен ли я создать дизайн веб-сайта в Illustrator или Photoshop? Почему?

— JFW
источник

1

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

— Jichao

6

Вы не должны разрабатывать веб-сайты, используя старую методологию «нарезать изображение». В идеале, вы бы начать в HTML / CSS и использовать приложение изображений , как вы идете вперед.

— DA01

@Jichao: Ваш комментарий должен быть сделан в ответ.

— Philip Regan

2

@ DA01 "не должен" может быть слишком императивным для такого субъективного вопроса. Там нет лучших практик, чтобы удовлетворить всех.

— Яри Кейнянен

2

@koiyu очень верно. Тем не менее, ломтики-н-кости в наши дни менее эффективны. Я разработать в ответ.

— DA01

26

Быстрый буквальный ответ: между Illustrator и Photoshop, PhotoShop, как и растр, как и веб-сайт.

Чуть более подробный ответ: вы бы использовали оба.

Альтернативный ответ: рассмотрите возможность использования Adobe Fireworks. Fireworks намного проще в использовании, если вы освоите его для создания веб-графики.

Длинный скучный ответ на лекцию:

Метод «Slice-n-Dice» немного устарел. Он был популярен десять лет назад, но в наши дни этот подход не рекомендуется. Я бы предложил:

Используйте любое приложение (AI / PSD), чтобы «зарисовать» сайт. Не стесняйтесь идти с высокой точностью, но относитесь к этому просто как к макету.
как только вы это установили, начните строить сайт. Погрузитесь в HTML / CSS / JS.
при необходимости перейдите в PhotoShop, чтобы создать нужные графические элементы.

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

— DA01
источник

Возможно, мы могли бы просто зафиксировать ширину холста, так как существует очень много известных сайтов фиксированной ширины. Для получения дополнительной информации, пожалуйста , см 960.gs .

— Jichao

это поможет вам на полпути. для некоторых экранов.

— DA01

Это должно быть проблемой. Однако у меня нет больших ЖК-дисплеев, поэтому у меня нет возможности их протестировать.

— Jichao

1

извините, если я был тупым. Я имел в виду, что гораздо важнее не быть фиксированным холстом, а тем, является ли сайт фиксированной шириной ... контент, мобильные устройства, вспомогательные технологии, SEO, несоответствия браузеров и т. Д.

— DA01

2

+1 за рекомендацию Фейерверк в вашем ответе. Очень недооцененное, но мощное приложение для веб-дизайна.

— Дуэйн Чаррингтон

7

Используйте Fireworks или Illustrator для создания логотипов и иконок. Для редактирования фотографий используйте Photoshop. Для всего остального это мало что значит. Я знаю, что были споры о том, какое графическое программное обеспечение использовать, но это действительно личное предпочтение.

Однако имейте в виду:

Фейерверк лучше для сжатия PNG. Размеры файлов, как правило, на 20% -30% меньше, чем у Photoshop.
Если вы знаете, что в будущем вы будете разрабатывать другой не веб-контент для сайта (футболки, плакаты, листовки и т. Д.), Лучше начать с векторной программы.

— Jin
источник

+1 для «Если вы знаете, в будущем ...», на самом деле, я считаю, что лучше всего работать, предполагая, что ключевые визуальные элементы будут необходимы в других форматах. Клиенты почти никогда не знают, для чего они захотят что-то использовать, пока не увидят этого, и никогда не поймут, что заставить RGB-веб-изображение работать для печати не так просто, как они ожидают ... Хорошо иметь что-то в своем заднем кармане для случайный «Это выглядит великолепно, можете ли вы взять этот стиль и применить его к этим настенным плакатам A0, которые мы печатаем для нашей большой конференции в следующий вторник? Это легко сделать, верно?»

— user56reinstatemonica8

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

— штатском

6

Я должен не согласиться с DA01.

Тот факт, что веб-документ не является статичным изображением, не имеет отношения к полезности графического редактора для размещения и разработки веб-сайта. Ваш макет дизайна не должен (и не должен) быть рабочим прототипом вашего сайта. Макет дизайна - это документ, который помогает визуализировать и создавать эстетический дизайн вашего сайта.

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

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

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

— Кэлвин Хуан
источник

2

Я не думаю, что мы не согласны. Я полностью согласен с вами на основе переменной «опытный веб - дизайнер». Проблема заключается в том, что люди, ответственном за макеты PSD часто не веб - дизайнеров опыта и что вызывает все виды головных болей как продвижения проекта. Что касается «макета полного макета» Я также согласен. Я бы не сказал, что всегда должен быть или всегда должен быть файл PSD с высокой точностью. Каркасы достаточно часто.

— DA01

3

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

— DA01

Я бы придерживаться и ваших мнений, и , вероятно , это зависит от проектов , а также. Я могу понять обе точки, хотя я должен сказать , что я не пациенту достаточно часто или чувствовать себя потерянным в деталях , если я придумываю целую страницу в PS первым. Кроме того , дизайн в CSS выглядеть иначе , чем PS. Кроме того, я обнаружил, что если вы привыкнете к кодированию, по крайней мере для меня, я быстрее, чем менять его в PS. И последнее, но не менее важное: все может измениться (даже после тщательного планирования каждой детали), и при кодировании я все еще часто сталкиваюсь с трудностями в дизайне (из CSS и т. Д.), И мне придется измениться - в PS это случается редко .. .

— Крис

1

Вот хороший пост объясняя это смешно :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

Здесь лучшее объяснение из очень надежного источника «http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator»

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

— Ved
источник

4

99designs не является надежным источником чего - либо.

— DA01

Есть ли какая-то конкретная причина, по которой вы бы это сказали? Просто для пояснения, я не работаю с ними и не связан с ними каким-либо образом, однако в прошлом я находил их статьи и блоги очень полезными. Они также были узнаваемы многими крупными медиа-именами, такими как msnbc, New York Times и т. Д. Так что, я что-то здесь упускаю? Поделись, пожалуйста.

— Вед

2

И просто чтобы доказать свою точку зрения Логотип Stack over flow был разработан на 99 Designs 99designs.com/users/245023

— Ved

2

@ DA01: пожалуйста, всегда объясняйте, почему что-то ненадежно, иначе в вашем комментарии нет ничего конструктивного.

— Littlemad

1

Конкурс дизайна через краудсорсинг никогда не был для меня полезным и не должен продвигаться профессиональными дизайнерами. (Плюс, это немного незаконно в моей стране: D)

— Шикирю

1

Если вам нужно «нарезать», вы можете использовать Photoshop напрямую, не переходя в Dreamweaver.

В фотошопе есть два способа нарезки: автоматически и вручную, выбрав нужную часть изображения и сохранив ее по одному для Интернета.

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

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

— Littlemad
источник

0

фотошоп к картинке готов. То есть речь идет о содержании сайта. Клиент не платит за улучшение вашего портфеля. KL

— Кен Лакс
источник

2

Добро пожаловать в GD. Я думаю, что понимаю, к чему вы клоните, но не могли бы вы немного рассказать об этом, пожалуйста?

— Farray

0

Совершенно очевидно, что вы должны использовать Photoshop для всесторонних макетов веб-дизайна.

Проекты иллюстраторов все еще имеют тенденцию обрабатываться медленнее, чем проекты фотошопов.

Если вы разрабатываете иконки и веб-элементы, я бы предложил создать их в иллюстраторе, а затем поместить эти элементы в фотошоп.

Если вы создаете макеты в фотошопе, вы можете легко перенести эти документы в Fireworks для быстрого создания прототипов.

— Marsman
источник

-1

Фотошоп будет лучше. Это поможет пользователям нарезать.

— Лахиру Чатуранга
источник

4

Этот ответ немного короток. Можете ли вы объяснить, что вы имеете в виду?

— Mensch

2

кто больше ломтиками?

— Скотт