Преобразование макета изображения веб-страницы в HTML

Question

Графический дизайнер создал дизайн веб-страницы, и теперь у меня есть его в PSD.

Каковы инструменты или приемы, используемые для простого преобразования этого изображения в HTML.

Answer 1

проверить http://www.bolducpress.com/tutorials/from-photoshop-to-html/ за отличный учебник о «разрезании», который является одним из методов «преобразования» psd-файла на веб-страницу.

Answer 2

Используйте Slice Tool, чтобы разрезать файл psd на куски графики, которые можно выложить на веб-странице. Затем выберите «Сохранить для Интернета» ..., чтобы сохранить эти фрагменты в отдельные jpeg, gif или png-файлы.

Answer 3

Чтобы получить наилучший результат, вам нужно скопировать html самостоятельно, интегрируя соответствующую графику, когда это необходимо. если вы не можете сделать это самостоятельно, существует довольно много компаний, которые возьмут PSD и закодируют его в HTML для вас. Одним из примеров является www.psd2html.com - выполните поиск в google для получения дополнительных примеров.

Answer 4

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

Есть инструменты для резки, о которых другие смогут рассказать больше. Я лично считаю, что нет лучшего способа, чем создать базовый HTML и CSS вручную. Поскольку то, что вы строите сейчас, является основой для всего вашего веб-сайта и любых будущих расширений для него, это действительно стоит усилий.

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

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

Answer 5

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