конвертировать PSD в веб-сайт

Я изучаю web dev, и я уже в какой-то момент застрял..

Как преобразовать шаблон PSD в веб-сайт html/css ?

я обрезал всю часть изображения и сохранил их.гиф отдельно, но потом ? Нужно ли вручную помещать их в пустой шаблон dreamweaver ? Я думал, что есть автоматический способ сделать это..

кроме того, я попытался "сохранить для интернета и устройств.."но при сохранении он создает .html-файл и одно изображение, которое содержит каждый элемент ?! Я ожидал увидеть несколько образов, чтобы переставить их в dreamweaver.

5 ответов


  1. в то время как некоторые приложения рекламируют/обеспечивают автоматизацию процесса "преобразования" из составной графики в веб-макет, вы хотите избежать использования этих функций. Они причинят вам больше неприятностей, чем стоят. Особенно если вы собираетесь использовать CSS для макета (который я настоятельно рекомендую). Это не значит, что эти функции не имеют некоторых ограниченных допустимых применений (подробнее об этом в пункте 2), просто они не собираются волшебным образом генерировать ваш сайт из графический.
  2. для использования " Save for Web..."вам нужно использовать инструмент среза, чтобы срезать изображение на разные изображения, необходимые для макета. Затем, когда вы сохраните для web и deices с html, он будет экспортировать html / css и изображения. Опять же, это не магия, и, скорее всего, вам придется полностью переделать большую часть того, что он сделал для вас - что делает его бесполезным для чего-то большего, чем нарезка определенной области макета (скажем, одного меню).

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

суть в том, чтобы сделать это, вы должны изучить HTML/CSS. И чем больше вы узнаете, тем больше вы будете ненавидеть Dreamweaver (по крайней мере, в "макете"). Garaunteed.


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


Добро пожаловать в реальность.

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


этой может помочь вам, он проведет вас через процесс.


существует ряд автоматизированных сервисов, которые конвертируют PSDs для вас:

однако вы также можете рассмотреть подход, основанный на обслуживании. Существует процветающее сообщество профессиональных слайсеров (просто google " psd в HTML" и вы увидите, что я имею в виду).

вы также можете попробовать перепроектировать программу или фреймворк, например as:

Это действительно зависит от вашего бюджета, сроков и ваших навыков.

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

Я думаю, что объявление окончания день, нет "правильного" решения. Разные люди имеют разные требования, которые изменят выбор.