2010-01-28 3 views
8

Я учусь веб-Дев, и я уже stucked в какой-то момент ..конвертировать PSD на сайт

Как конвертировать PSD шаблон для веб-сайта HTML/CSS?

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

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

+0

Photoshop - это не подходящий инструмент для создания веб-дизайна. В нем предполагается, что печать не будет работать в Интернете. –

+1

О, и кстати: использование 'gif' в наши дни - это действительно плохая идея. Вместо этого используйте 'png'. (Некоторые ограничения применяются, но в большинстве случаев «png» - это способ пойти.) –

+0

Согласно частому переполнению стека (http://stackoverflow.com/faq), вы должны задавать такие вещи в Doctype (http://doctype.com/). – Tae

ответ

11
  1. В то время как некоторые приложения рекламе/обеспечить автоматизацию процесса «конверсии» из композитных график в веб-макет, который вы хотите избежать использования этих функций. Они вызовут у вас больше проблем, чем они того стоят. Особенно, если вы собираетесь использовать CSS для макета (который я настоятельно рекомендую). То, что нельзя сказать, что эти функции не имеют ограниченных действительных порядков (подробнее об этом в пункте 2), это просто то, что они не собираются волшебным образом генерировать ваш сайт из графики.
  2. Чтобы использовать «Сохранить для Интернета ...», вам необходимо использовать инструмент «Слайс», чтобы обрезать изображение на разные изображения, необходимые для макета. Затем, когда вы сохраните для веб-сайтов и сайтов с помощью html, он будет экспортировать html/css и изображения. Опять же, это не волшебство, и, скорее всего, вам придется полностью переделать большую часть того, что он сделал для вас, что делает его бесполезным для чего-либо большего, чем нарезка определенной области макета (скажем, одного меню).

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

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

9

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

+0

Спасибо, я посмотрю эти ссылки. – user251356

+0

+1: Спасибо; Я собирался задать вопрос о том, как «преобразовать PSD, нарезанную или иным образом» на идиоматическую веб-страницу, не ориентированную на таблицу, и не использовать, например, «display: table-cell» для имитации таблиц с DIV. Я все еще могу задать вопрос, но я думаю, что вторая ссылка содержит верхнюю ссылку, которая отвечает на мой вопрос. – JonathanHayward

8

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

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

+1

+1 за неохотную любовь к профессии :-) – prodigitalson

6

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

5

Есть целый ряд автоматизированных услуг, которые преобразовывают РСП для вас:

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

Вы также можете попытаться перепроектировать из программы или структуры, такие как:

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

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

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

+1

Спасибо @ Homer6, http://converxy.com работал на меня –