конвертировать PSD в веб-сайт
Я изучаю web dev, и я уже в какой-то момент застрял..
Как преобразовать шаблон PSD в веб-сайт html/css ?
я обрезал всю часть изображения и сохранил их.гиф отдельно, но потом ? Нужно ли вручную помещать их в пустой шаблон dreamweaver ? Я думал, что есть автоматический способ сделать это..
кроме того, я попытался "сохранить для интернета и устройств.."но при сохранении он создает .html-файл и одно изображение, которое содержит каждый элемент ?! Я ожидал увидеть несколько образов, чтобы переставить их в dreamweaver.
5 ответов
- в то время как некоторые приложения рекламируют/обеспечивают автоматизацию процесса "преобразования" из составной графики в веб-макет, вы хотите избежать использования этих функций. Они причинят вам больше неприятностей, чем стоят. Особенно если вы собираетесь использовать CSS для макета (который я настоятельно рекомендую). Это не значит, что эти функции не имеют некоторых ограниченных допустимых применений (подробнее об этом в пункте 2), просто они не собираются волшебным образом генерировать ваш сайт из графический.
- для использования " Save for Web..."вам нужно использовать инструмент среза, чтобы срезать изображение на разные изображения, необходимые для макета. Затем, когда вы сохраните для web и deices с html, он будет экспортировать html / css и изображения. Опять же, это не магия, и, скорее всего, вам придется полностью переделать большую часть того, что он сделал для вас - что делает его бесполезным для чего-то большего, чем нарезка определенной области макета (скажем, одного меню).
там это не полностью автоматизированный способ сделать это, вообще говоря, потому что в зависимости от того, что вам нужно, чтобы сделать макет, вы должны идти о том, чтобы выложить вещи по-разному, и в то время как его теоретически возможно учитывать все возможные потенциальные требования в хорошем маленьком графическом интерфейсе экспорта его не очень возможно.
суть в том, чтобы сделать это, вы должны изучить HTML/CSS. И чем больше вы узнаете, тем больше вы будете ненавидеть Dreamweaver (по крайней мере, в "макете"). Garaunteed.
да, веб-дизайн не работает по волшебству. Правильный способ сделать это вручную написать фактический код, который позиционирует элементы, а не просто ударяет их на месте в Dreamweaver. Там есть много хороших учебников, проверьте это для пример:
Добро пожаловать в реальность.
вам придется нарезать и кости себя (ну, нарезать и кости изображение себя, но не нарезать себя, независимо от того, сколько вы хотите), а затем поместить каждую отдельную часть в HTML или шаблон.
существует ряд автоматизированных сервисов, которые конвертируют PSDs для вас:
однако вы также можете рассмотреть подход, основанный на обслуживании. Существует процветающее сообщество профессиональных слайсеров (просто google " psd в HTML" и вы увидите, что я имею в виду).
вы также можете попробовать перепроектировать программу или фреймворк, например as:
- http://html.adobe.com/edge/reflow/
- https://webflow.com/
- http://www.ekomobi.com/en/home.html
- http://macaw.co/
- http://foundation.zurb.com/
- http://getbootstrap.com/
- http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
Это действительно зависит от вашего бюджета, сроков и ваших навыков.
Я большой сторонник понимания чего-то очень хорошо, прежде чем пытаться автоматизировать его. Итак, как и другие плакаты, нарезка по царапинам (наручники) очень ценна, особенно если вы еще не понимаете ее хорошо. Однако вы можете просто не захотеть тратить время, необходимое для достижения хорошего понимания предмета. И это тоже совершенно нормально.
Я думаю, что объявление окончания день, нет "правильного" решения. Разные люди имеют разные требования, которые изменят выбор.