веб-дизайн PSD к HTML-> более прямые пути? [закрытый]
Другой способ, который может быть проще для новичков:
some█
code
here
Поместите курсор на первую строку, например,
: 1 Enter
и введите следующее, чтобы войти в режим вставки и добавить свой текст :
I / / Пробел
// █some
code
here
Нажмите < kbd> Esc , чтобы вернуться в командный режим и использовать орграф:
j . j .
// some
// code
//█here
j - это команда движения для перехода на одну строку вниз и . повторяет последнюю введенную вами команду редактирования.
10 ответов
Для меня делать это вручную - это преимущество. Вам нужно сделать это правильно только один раз, и если вы собираетесь специально для визуальной привлекательности, у вас, вероятно, впереди много работы, чтобы сделать его кроссбраузерным ...
Хотел бы услышать другие ответы . Это всего лишь мой взгляд на это, поскольку я делаю больше сайтов, ориентированных на данные, чем на визуально привлекательные.
Полностью пропустите Photoshop и просто заставьте своих дизайнеров рисовать прямо в HTML-представлении. Вы не только удалите сложный, неловкий процесс, который вы чувствуете, но и получите лучший, более устойчивый дизайн, потому что он на 100% будет основан на возможностях HTML / CSS, а не на том, что возможно в Photoshop.
Дополнительная литература:
Это прекрасная мечта типа «пирожок в небе», но я думаю, что пока веб-сайты написаны на (X) HTML / CSS, в конце концов, вы всегда приходится делать часть, большую часть или всю работу вручную.
Существует фундаментальный разрыв между статическими пикселями в некоторых «программах для покупок» и динамическими, изменяющимися, расширяющимися, ориентированными на контент текстовыми сайтами. Лучшим инструментом для преодоления этого разрыва по-прежнему остается ... человек-профессионал.
Такие инструменты, как iWeb (полностью WYSIWYG) или DW / Fireworks (где-то посередине), только помогают вам или имеют серьезные ограничения. Вы получаете только готовые шаблоны в случае iWeb, часто неоптимальный код в случае DW / Fireworks. Вам нужно будет решить, с какими ограничениями вы можете жить и когда лучше всего это делать вручную.
В настоящее время многие люди проектируют прямо в браузере, используя ( X) HTML / CSS из-за именно этой проблемы - вся возня с Photoshop, а затем переход к написанию кода после того, как клиент подтвердил статический дизайн.
Хорошее прочтение - Walls Come от Энди Кларка. Презентация "Падение вниз" .
Омега коснулась этого вопроса, но я думаю самая большая проблема - кроссбраузерность. Если бы всех этих причуд браузеров не существовало (coughInternetExplorercough), то, что вы предложили, было бы намного проще. Однако часто требуется много ручного кодирования, чтобы он выглядел идеально по пикселям в каждом браузере.
Еще одна вещь - это мелкозернистый контроль. Конечно, вы можете просто вставить свой PSD-шаблон в Dreamweaver или еще что-нибудь и получить рабочий веб-сайт, но он будет использовать хитрости и уродливые вещи, такие как таблицы, чтобы заставить его работать. И даже тогда это, вероятно, не будет работать полностью так, как вы этого хотите. Вы также должны помнить о таких вещах, как специальные возможности и SEO, а Dreamweaver просто не может вам этого дать.
Есть несколько инструментов, таких как Sitegrinder , которые делают именно это.
У самих Adobe в лаборатории есть проект под названием Catalyst , который делает то, что вы описать и многое другое для Flash:
Он берет фрагменты из Photoshop, позволяет изменять их свойства и экспортировать их в рабочий файл Flash. (Щелкните правой кнопкой мыши поле, добавьте текстовое поле, оно станет текстовым полем ...)
Если вы посмотрите их видео (а вам стоит - это потрясающе), вы увидите, что они заблуждаются, думая, что скоро будут созданы веб-сайты. таким образом.
До того, как Zimbra была куплена Yahoo, казалось, что они направлялись к такому инструменту, который выводил бы кроссплатформенный HTML, аналогичный тому, что делает Catalyst для flash. Больше не надо. Но после встряски Yahoo такое программное обеспечение все еще может возродиться из пепла Zimbra.
На мой взгляд, при необходимости сайт должен быть смоделирован в Photoshop, с вырезанием частей для использования на реальном сайте, но чтобы полностью спроектировать сайт в Photoshop, то хотите, чтобы это работало в сети, просто делает это наоборот. На самом деле эти два аспекта должны выполняться параллельно.
Короче говоря, графические дизайнеры создают внешний вид веб-сайта, но вам нужен программист, чтобы программировать его.
My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design.
Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.
Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)
The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.
Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.
If you need traction in this method you can use a standard css grid like 960 (http://960.gs/). It handles a lot of the arithmetic and floaty business that makes layout such a chore.
In addition to Rahul's link above I also recommend: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
Лично я сначала создаю его в html / css, используя границы и цвета фона. Затем я беру PSD и вставляю изображения в качестве фоновых изображений или изображений HTML. Это довольно быстро, код ваш, поэтому вы знаете, что означает каждое правило css, которое ускоряет процесс разработки (в отличие от неудобных имен нарезанных изображений PS и имен селекторов css)
What Вам, вероятно, стоит пойти на то, чтобы научить дизайнеров работать в рамках хорошо зарекомендовавшей себя сеточной системы для дизайна своих сайтов. Если они смогут понять макет как систему сеток / блоков, можно будет реализовать множество интересных проектов в рамках этих ограничений. Но это не будет прямым преобразованием из PSD в HTML, потому что это два совершенно разных способа представления визуальных данных.
Существует множество фреймворков, облегчающих работу css. Один из них - Blueprint CSS
Существует множество шаблонов для представления системы сеток в Photoshop.
http://konigi.com/tools/photoshop- template-blueprint-css-comps
Думайте о сетке как о слое визуальных ограничений, тогда дизайн может быть сопоставлен между фотошопом и конкретной реализацией HTML / CSS. Визуальные элементы должны быть ограничены чистыми ячейками сетки. Некоторые элементы или единицы в сетке могут быть сопоставлены с фоновыми изображениями. Другие сплошные цвета или пустое пространство с контейнерами div, содержащими контент.
С хорошо понятной структурой сетки вы можете довольно близко подойти к идеальным макетам.
Кроме того, хорошие дизайнеры поймут, как эффективно использовать пустое пространство в макете дизайна. Если в визуальном дизайне много странных пересекающихся линий и пересекающихся элементов, то это представляет собой реальную проблему для реализации. Просто потому, что вы можете визуально представить это, не означает, что его легко реализовать в браузере, не делая определенных компромиссов для работы HTML и CSS. Думайте о сетке как об ограничениях и эффективном способе оценки требований к компоновке.