Кодирование дизайна сайта, что лучше из PSD (Adobe photoshop) или EPS (Adobe illustrator)? [дубликат]

В чем разница между EPS и PSD при создании макета: 1. Качество 2. Размер загружаемой страницы 3. Простота использования 4. Сходство между ними обоими

Заранее спасибо....

Ответы (4)

Неважно. Ни .psd, ни .eps не подходят для размещения в Интернете.

Используйте в творчестве все, что вам удобно. Затем вы разбиваете свой макет на части и создаете код (HTML/CSS) и используете части своего документа Photoshop или Illustrator для любых необходимых вспомогательных изображений.

Ни в коем случае файл .psd или .eps нельзя просто размещать в Интернете в качестве веб-страницы.

Обновление после редактирования вопроса:

С точки зрения макета, ваш вопрос слишком широк.

Например, eps — довольно мертвый формат для большинства вещей, особенно для любого мокапа веб-дизайна. Вы бы использовали .ai или даже .pdf, прежде чем прибегать к eps.

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

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

Легче в использовании... действительно зависит от ваших знаний.

Сходство между AI и PS... проверьте Adobe.com.

Метод «Slice-n-Dice» немного устарел. Это было популярно десять лет назад, но в наши дни это действительно не рекомендуемый подход. Я бы посоветовал: используйте любое приложение (AI/PSD), чтобы «набросать» сайт. Не стесняйтесь использовать высокую точность, но относитесь к этому просто как к макету. как только вы это установили, начните создавать сайт. Погрузитесь в HTML/CSS/JS. при необходимости перейдите в PhotoShop, чтобы создать отдельные графические элементы, которые вам нужны. Но мне нужно знать, когда я увеличиваю свой psd-файл, он становится пиксельным, когда я увеличиваю масштаб @ 182,21%, когда я увеличиваю любую веб-страницу, я не нахожу ее пиксельной, можете ли вы объяснить?
На самом деле так оно и есть, но не так, как было в 90-х. Вы по-прежнему нарезаете макеты, но не используете инструменты нарезки. Вы можете использовать градиент или изображение в качестве фона для CSS. Мое использование «среза» относилось к извлечению изображений по мере необходимости, а не к разрезанию целых макетов для устаревшей формы кодирования. В любом случае, psd и eps не подходят для Интернета.
мне нужно знать, когда я увеличиваю свой psd-файл, он становится пиксельным, когда я увеличиваю @ 182,21%, когда я увеличиваю любую веб-страницу, я не нахожу ее пиксельной, независимо от того, насколько я увеличиваю, в чем секрет в этом, дизайнер сделал это поскольку векторные eps или программное обеспечение CSS сохранят пиксели дизайна, просто меня смущает, не могли бы вы объяснить, пожалуйста?
Такие приложения, как Photoshop или Illustrator, поддерживают PPI ​​изображения независимо от процента масштабирования, что позволяет выполнять детальное редактирование. Вот почему все становится размытым. Вы увеличиваете масштаб в пикселях. Веб-браузеры просто увеличивают размер изображения и интерполируют изображение с разрешением монитора.
Другими словами... приложение показывает истинные пиксели независимо от масштаба. Браузеры просто растягивают пиксели при масштабировании.
Я бы не стал заходить так далеко, но пожалуйста ;)
Просто чтобы уточнить, даже для градиентов вам не нужно использовать метод «срез», поскольку он поддерживается с помощью CSS в современных браузерах. В любом случае, я думаю, что Fireworks будет лучшим приложением для макетов веб-дизайна. Он делает почти то же, что Illustrator и Photoshop, но в одном продукте.
Спасибо за добавление этой информации, Крис, я хотел бы знать, какова ширина веб-страницы в пикселях, когда я разрабатываю свой веб-сайт, у меня уже есть ширина 1321 пикселя!
Ага. Градиенты можно создавать в CSS3, если вам не нужно поддерживать старые версии IE. Но есть лучшие методы (svg) для старых версий IE. @ahmedamro не существует «установленного размера» для ширины веб-страницы, но в общих чертах я пытаюсь ограничить любой макет, чтобы он работал с шириной 960 пикселей или 1000 пикселей. Если вы пойдете выше этого, у вас могут быть пропущенные элементы из-за разрешения экрана. Конечно, с адаптивным дизайном есть медиа-запросы, которые можно использовать для управления внешним видом при разной ширине.
Немного не по теме, но я обычно использую это для градиентов: colorzilla.com/gradient-editor
Согласен с Крисом насчет фейерверков!
@ahmed, дизайн для фиксированной ширины в пикселях ушел в прошлое. Устройства могут иметь ширину от 300 пикселей (или меньше) до нескольких тысяч.
@ahmedamro, этот ваш первый комментарий — это моя прямая цитата отсюда: graphicdesign.stackexchange.com/questions/538/… . Почему вы публикуете это здесь как свой собственный комментарий к собственному вопросу?

Я предпочитаю AI PSD для композиций, несмотря на его недостатки, по нескольким причинам.

  1. Связывание файлов (вместо встраивания, как в Photoshop) уменьшает размер файла и упрощает удаленное обновление и совместное использование элементов компонентов.
  2. Редактирование векторов в Illustrator проще , учитывая хорошее знание обоих приложений, а работа с векторами становится все более важной для функциональности на разных устройствах.
  3. С типом легче работать .
  4. Простота пересечения носителей , что важно в более крупной экосистеме бренда, где печатные и цифровые технологии взаимодействуют.

Конечно, макет — это только часть уравнения. Сообщать, что он должен делать в действии, так же важно, независимо от вашего художественного приложения. В этом ответе я дал краткий обзор своего подхода к UX SE .

Fireworks предлагает собственное векторное редактирование и неразрушающее редактирование исходных растровых изображений (если вы знаете, что делаете). Экспортированные файлы (png, css и т. д.) в любом случае будут легкими, но PNG Fireworks обычно не такие большие, если вы не работаете с изображением, которое намного больше, чем вам нужно. В этом случае я бы рекомендовал деструктивную даунсэмплинг. Это не похоже на то, что вы перезаписываете оригинал.
Fireworks — это здорово, но, похоже, у Adobe нет большого будущего. Я действительно хотел бы, чтобы они потратили больше времени на его разработку, чем на эту глупую штуку Dreamweaver. Ну что ж. Они купили его, чтобы убить, если вы спросите меня.

Фейерверк.

  • Быстрое прототипирование пользовательского интерфейса
  • Обширные шаблоны пользовательского интерфейса, доступные в Fireworks и в Интернете для мобильных и веб-интерфейсов, которые вы можете разрабатывать на основе
  • Интеграция с jQuery Mobile Theme Roller означает, что вы можете перейти от дизайна пользовательского интерфейса к CSS в одном и том же инструменте.
  • Гибрид между Photoshop и Illustrator для нужд веб-дизайна
    • Photoshop отлично подходит для редактирования изображений 4000x2000 без потери качества, но для Интернета вам не нужны такие возможности редактирования изображений - возможно, 5% времени. Точно так же Illustrator очень мощен для работы с векторной графикой, но вам не нужна эта мощь все время.
    • Fireworks — это гибрид двух из них, который гораздо больше ориентирован на рабочий процесс веб-/мобильной разработки.
  • Но не менее мощный, чем два других! Вам нужен 6-ступенчатый градиент? Вы можете легко сделать это и в Fireworks.
  • Генерирует CSS из вашего дизайна; Вы можете сделать красивую кнопку градиента, перейти к инспектору свойств CSS и скопировать туда CSS, отправить своему разработчику (для меня это все еще довольно круто :p)

Единственное, что меня раздражает в FW, это то, что сочетания клавиш иногда отличаются от Photoshop.

Спасибо за этот хороший ответ и мотивацию о Fireworks, я уже разработал 50% своего веб-сайта в фотошопе, должен ли я перейти к фейерверкам, у меня просто есть опыт в фотошопе и ноль в CSS, какие-нибудь советы, пожалуйста?
да, опыта в фотошопе должно быть достаточно, чтобы быстро набирать фейерверки. Такая же ситуация была и у меня. Коллега-дизайнер порекомендовал фейерверк, и я выбрал его после просмотра нескольких видео и понимания страниц и слоев.

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

Кодирование дизайна сайта, что лучше из PSD (Adobe photoshop) или EPS (Adobe illustrator)? [дубликат]
СпросиСетьПолитика конфиденциальности1y, 0v