конвертировать PSD на сайт - PullRequest
8 голосов
/ 28 января 2010

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

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

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

Также я попробовал «Сохранить для Интернета и устройств ...», но при сохранении он создает файл .html и одно изображение, которое содержит каждый элемент ?! Я ожидал нескольких изображений, чтобы переставить их в Dreamweaver.

Ответы [ 5 ]

11 голосов
/ 29 января 2010
  1. Хотя некоторые приложения рекламируют / обеспечивают автоматизацию процесса «преобразования» из составной графики в веб-макет, вы хотите избегать использования этих функций. Они доставят вам больше хлопот, чем они того стоят. Особенно, если вы собираетесь использовать CSS для верстки (что я настоятельно рекомендую). Это не значит, что эти функции не имеют ограниченного использования (подробнее об этом в пункте 2), просто они не собираются волшебным образом генерировать ваш сайт из графики.
  2. Чтобы использовать «Сохранить для Web ...», вам нужно использовать инструмент «Срез», чтобы разрезать изображение на различные изображения, необходимые для макета. Затем, когда вы сохраните для веб-сайтов и устройств с HTML, он будет экспортировать HTML / CSS и изображения. Опять же, это не волшебство, и есть вероятность, что вам придется полностью переделывать большую часть того, что он для вас сделал, - делая его бесполезным для чего-то большего, чем нарезка определенной области макета (скажем, одного меню).

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

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

9 голосов
/ 29 января 2010

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

8 голосов
/ 29 января 2010

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

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

6 голосов
/ 29 января 2010

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

5 голосов
/ 13 марта 2014

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

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

Вы также можете попытаться изменить дизайн программы или фреймворка, таких как:

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

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

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

...