Css html photoshop: Tutorial: how-to code your PSD into a HTML-CSS layout

У нас есть InDesign созданный файл, и теперь мы хотели бы заполнить базу данных содержимым, доступным в файле InDesign. Есть ли SDK для чтения содержимого файлов InDesign и заполнения его в базу…

Можно ли конвертировать элементы, которые я создал с помощью Photoshop. f.e. Если бы я создал skin для кнопки в Photoshop без какого-либо текста в ней. Могу ли я преобразовать его в CSS, чтобы…

У меня есть страница на моем сайте, где пользователь может загрузить файл Photoshop, Illustrator или InDesign. Это для типографии, и им нужно сделать такие вещи, как посмотреть, какие шрифты…

Я могу использовать AppleScript, чтобы отправить ExtendScript в Photoshop и получить обратно результат: Это отправляет 2 в stdout: tell application Adobe Photoshop CC 2017 do javascript var x = 2; x…

У меня есть сценарий, который пытается: сканируйте документ InDesign для всех изображений отправьте все изображения в Photoshop через объект   BridgeTalk   измените размер всех изображений…

Этот сценарий пытается: создайте новую папку сканируйте документ InDesign для всех изображений преобразование всех изображений в оттенки серого в Photoshop сохраните новые изображения в оттенках…

Я хочу (программно) преобразовать хранилище файлов шаблонов Adobe Indesign (.indd) во что-то более простое для манипулирования людьми (то есть файлы CSS/HTML). Меня больше интересует точное…

Пытаясь создать дизайн translate photoshop в код HTML/CSS, я застрял с проблемой смешивания цвета и изображения. В дизайне Photoshop у меня есть следующие слои: Изображение (20% непрозрачность) Цвет…

Мне нужен экспорт SQLdata в InDesign. Потом я прочитала документации и поиска библиотеки, но библиотека поиск. XML просто экспортируется в InDesign, но как сделать его автоматическим с php или…

Быстрое создание CSS шаблона в Photoshop | CSS | Статьи | Программирование Realcoding.Net

Может показаться, что мы возвращаемся в 1999 год. Данная статья, автор которой Casper Voogt покажет, как при помощи Photoshop и ImageReady создать валидный XHTML/CSS макет.
 

Графические WYSIWYG (визуальные) редакторы, такие как Fireworks, GoLive и ImageReady позволяют сгенерировать код HTML, однако в экспортированном коде присутствуют таблицы и абсолютное позиционирование. Однако эти программы могут делать некоторые полезные вещи (даже больше чем вы можете себе представить), относительно валидности и дальнейшего использования кода. Я покажу простой способ, как создать макет при помощи Photoshop, затем подготовить его в ImageReady и в завершении очистить полученный код.

Предпосылки

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

Сделать в ImageReady CSS-ready

Как известно, в состав Adobe Photoshop CS входит ImageReady CS. Adobe Fireworks больше пригоден для векторной графики, чем растровой. И наоборот, ImageReady идеально подходит для работы с растровыми изображениями, чем с векторными. Используя ImageReady можно экспортировать порезанный шаблон в блоки с абсолютным позиционированием, которые затем можно легко перевести в относительное.

Это означает, что можно начать делать все в Photoshop, тени, фильтры и т.д., затем переключиться в ImageReady для порезки шаблона. Убедитесь, что шаблон выровнен по левому краю, не центрируйте его. При помощи ImageReady можно стилизовать навигационное меню (даже если вы сделали его простым текстом) и создать роловеры. (При создании шаблонов, конечно можно и не использовать роловеры от Adobe, их наверняка вы сделаете при помощи CSS либо JavaScript, однако для нашей задачи такие роловеры вполне сгодятся)

Разрезаем

Для порезки шаблона используйте инструментом Slice. По окончании для выбора и переименования воспользуйтесь инструментом Slice Select. Например, у вас есть заголовок, который позже станет тэгом div. ImageReady любит названия, типа “Yourfile_1_01″, однако старайтесь давать логически понятные имена с самого начала, например “header”. Это пригодится в дальнейшем, при редактировании CSS. Аналогично поступаем и с контентом, любыми боковыми колонками, футером и др. называя их соответственно.

Вернемся назад и поработаем над дизайном, постоянно переключаясь между Photoshop и ImageReady, до тех пор, пока не протестим дизайн в браузере. Идем в ImageReady, меню File › Preview In ›, выбираем любимый браузер. Смотрим, чтобы в браузере все выглядело, как задумано в дизайне, меняя соответственно, что не так.
Экспортируемые части будут представлять из себя код с тэгами div, в которые вставлены графические файлы JPG или GIF. Позже можно будет вставить в них или в другие div‘ы фоновые изображения.

Экспорт HTML & CSS

Настройка: выбрать File › Output Settings › HTML и измените по своему усмотрению. Тут же можно выбрать опцию создавать код XHTML. Дальше жмем “Next”, выбираем Saving HTML Files.

Нажать снова “Next”, настройка для Slices. Выбираем “Generate CSS“. В выпадающем списке “Referenced” можно выбрать By ID, Inline или By Class. Выбираем By ID. Можно также поэкспериментировать с именами разрезанных частей в “Defailt Slice Naming”.

Экспортируем наш макет в (X)HTML/CSS с помощью меню File › Save Optimized As, выбираем место, куда сохранить. ImageReady создаст поддиректорию /images в папке, куда вы сохраняете это дело

Пример CSS кода, созданного ImageReady

#header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:150px;
}

Пример HTML кода, созданного ImageReady

<div>

  <div>

    <img src="images/header.jpg" »
width=”800″ height=”150″ alt=”" />
  </div>

  <div id=”navigation”>
    <img id=”navigation” src=”images »
/navigation.jpg” width=”200″ height=”450″ »

alt=”" />

  </div>
  <div id=”content”>
    <img id=”content” src=”images/content.jpg” »

 width=”600″ height=”450″ alt=”" />
  </div>
</div>

Что еще?

Итак, мы имеем части, состоящие из абсолютно позиционированных блоков div непосредственно с кодом CSS. Если абсолютное позиционирование вам подходит, то на этом можно и закончить. Если же нет, то давай те подумаем, как привести эти блоки в относительное позиционирование.

Во-первых, скопируйте полученный код в любой редактор (Dreamweaver, BBEdit и т.д.). Можно “обернуть” все div‘ы еще одним блоком для более четкого позиционирования. ImageReady экпортирует разрезанные части CSS блоками и “заворачивает” их в блок div с названием “Table_01″. Переименуем div “Table_01″ в “container”, например, и зададим ему стиль при помощи CSS, либо вообще попробуем его удалить вместе с его СSS кодом

Дальше, переводим все div‘ы в относительное позиционирование, удалив абсолютное, давая им унаследовать относительное, следя за элементами float и clear. Можно все сделать сразу и одним махом, но лучше менять по очереди каждый блок, проверяя результат.

Для блоков, содержащих изображения, нужно определиться, какие из них включить в CSS как фон. Фон страницы задавайте в CSS отдельно. Если этот шаблон пойдет на создание сайта, вынесите таблицу стилей отдельно. Проверьте весь код на валидность.

Пример конвертированного и “очищенного” CSS

#header {
float: left;
clear: right;
}

Вам придется добавить соответствующие высоты и ширины в блоках, если будете вставлять фоновые изображения в них.

Пример конвертированного и “очищенного” HTML

<div>
  <img src="images/header.jpg" alt="" »
name=”headerimg” width=”800″ height=”150″ »

id=”headerimg” />

</div>

Автоматизация процесса

Если придется что-то менять или пересмотреть в шаблоне, просто меняем графику в Photoshop и ImageReady, потом ре-экспортируем в HTML файл, заменив первоначальный, со всеми новыми графическими изображениями. Только не забудьте сохранить отредактированный или “очищенный” HTML файл для простоты последующего изменения нового.

Источник alistapart.com

Перевод — Дмитрий Папуца

Оригинал статьи

Translated with the permission of A List Apart Magazine and the author[s].

Автоматическая HTML/CSS верстка сайта из Photoshop

Пошаговая инструкция для создания HTML5/CSS3 верстки сайта из PSD файла

Для автоматической верстки сайта из дизайна Photoshop вам не потребуется практически никаких усилий. Сервис сделает за вас почти все. Мы стремимся к полной автоматизации процесса CSS верстки, но полностью автоматизировать такой творческий процесс, как HTML верстка сайта, невозможно. Вы можете значительно улучшить автоматически создаваемую верстку сайта, если будете следовать нескольким простым правилам.

1.   Не препятствуйте генерации CSS3 стилей для слоев. При создании макета используйте ‘Shape’, ‘Layer mask’ и ‘Clipping Mask’, эффекты слоев. При этом используйте для слоев только те эффекты, которые возможно преобразовать в CSS3 (все, кроме: ‘Satin’, ‘Bevel & Emboss’). Ни в коем случае не растеризовывайте слои!
2. Помечайте слои тегами в соответствии с документацией сервиса автоверстки. Если из слоя или группы слоев в Photoshop требуется получить в HTML верстке сайта такие элементы, как ссылка, форма ввода, таблица, список, и т.п., то следует пометить слой или группу соответствующим тегом. Все поддерживаемые теги смотрите на странице документации.
3. Группируйте слои логически. Некоторые начинающие дизайнеры не следят за структурой слоев в Photoshop. Профессиональные дизайнеры всегда объединяют слои в логические группы и соблюдают строгую структуру в PSD макете. Настоятельно рекомендуем объединять все слои в логические группы (такие как заголовок, футер, основной контент, колонки и т.п.).  Для этого используйте группы слоев (Layer Group) в Photoshop. Это поможет сервису автоматически создать ожидаемую структуру документа.
4. Одно логическое изображение — один слой / Smart Object / группа с тегом #merge. Из каждого видимого слоя в Photoshop в создаваемой HTML вёрстке сайта получается отдельный HTML/CSS элемент. Если в макете для создания одного изображения (такого как логотип/бэкграунд/т.п.) используется несколько слоев — объедините слои в группу и пометьте группу тегом #merge. Либо создайте из этих слоев один Smart Object. В противном случае, в верстке сайта для представления одного логического изображения будет использовано несколько изображений, что ухудшит качество верстки.

Photoshop vs. Sketch: битва за самый чистый HTML / CSS

Еще в марте я написал статью, в которой изложены 3 причины использования Sketch и сравнил функцию «Экспорт» с «Извлекаемыми активами» в Photoshop.

В этой части Sketch вышел с небольшим преимуществом, на мой взгляд. Однако ресурсы изображений не являются единственным типом ресурсов, которые можно удалить из композиции макета. В этой статье мы рассмотрим, как оба приложения справляются с деликатной задачей генерации кода HTML / CSS.

Метод 1: Старый путь, с фотошопом

Начиная с CS6, Adobe разрешила своему сообществу создавать собственные расширения для Photoshop. Это привело к созданию многих признанных критиками инструментов извлечения кода, таких как CSS Hat и CSS3Ps , которые бесплатны.

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

Способ 2. Экспорт кода с помощью приложения Sketch

Стили слоев Sketch App очень ориентированы на CSS (в конце концов, это инструмент проектирования пользовательского интерфейса), поэтому очень легко щелкнуть правой кнопкой мыши и «Копировать атрибуты CSS». «Тень», например, принимает четыре значения; X, Y, Blur и Spread , и это переводит прямо в CSS box-shadow: X Y Blur Spread На мой взгляд, это самая простая форма извлечения кода, и она хорошо работает.

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

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

За последние 18 месяцев Adobe добилась потрясающих успехов в плане непрерывности; Существует ряд мобильных приложений для захвата векторов, кистей и цветов из реальных моментов с помощью камеры устройства, и эти снимки автоматически синхронизируются с вашей учетной записью Creative Cloud.

Но самое впечатляющее сотрудничество — это работа со скобками и Photoshop. Brackets — это редактор кода с открытым исходным кодом для внешних разработчиков, созданный на основе HTML, CSS и JavaScript. Несмотря на возможности «Live Preview» и интеграцию с веб-шрифтами Edge, его пользовательский интерфейс на самом деле весьма минимален, поскольку ожидается, что вы добавите только те функции, которые вам нужны, с помощью расширений, созданных сообществом.

Импорт документов Photoshop в скобки

Начиная с выпуска Brackets 1.0 (когда Adobe отказалась от своего форка «Edge Code» и застряла с именем «Brackets»), веб-разработчики теперь могут импортировать документы Photoshop непосредственно в Brackets и извлекать информацию о дизайне, такую ​​как цвета, шрифты и другие атрибуты CSS, одновременно кодирование, даже если на их компьютере не установлен Photoshop.

Фактически, подписчик Creative Cloud может отправить вам «общую ссылку», которую вы можете скопировать в скобки, что позволит вам начать извлечение, даже не имея файла вообще. Давай попробуем.

Во-первых, найдите правую боковую панель и найдите значок, который показывает всплывающую подсказку «Извлечь для скобок (предварительный просмотр)» — нажмите на нее, и вы увидите образец документа Photoshop со всеми слоями в целости, где вы можете переключать эти слои и выкл, как если бы вы были в самом Photoshop. Скобки очень хорошо справляются с этой задачей, поэтому я постараюсь быть кратким.

Измерение расстояния между двумя слоями

Вы можете измерить расстояние между двумя слоями в Sketch App, щелкнув первый слой, удерживая Shift , а затем щелкнув второй слой. Я думал, что это было невероятно интуитивно (потому что это так), пока я не сделал то же самое в Extract for Brackets и понял, что могу скопировать значение в буфер обмена и использовать его в своей таблице стилей, не выходя из приложения. В действительности вы можете удерживать Shift и копировать любое значение в буфер обмена.

Как сделать Rapid-код с помощью CSS Hinting

CSS-хинтинг — это исключительная особенность, и он показывает, что большая часть Brackets созревает, несмотря на то, что Dreamweaver CC все еще участвует в гонке. На следующем шаге мы выберем слой из PSD и извлечем из него все стили.

Итак, сначала выберите слой, а затем переключитесь на таблицу стилей. Когда придет время объявить стиль, скобки не только предложат косвенные подсказки кода, основанные на вашей типизации, но также предложат уже определенные значения, основанные на выбранном слое.

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

Вердикт

Приложение Sketch и Photoshop борются уже довольно давно. Photoshop — это огромный многофункциональный инструмент. Хотя некоторые, безусловно, будут утверждать, что для обычного дизайнера пользовательского интерфейса это слишком «радует», у Sketch App есть две вещи, которых нет, и, возможно, никогда не будет — непрерывность и совместная работа.

Возможность конвертировать PSD в код CSS в рабочем режиме с разделенным экраном, даже без необходимости наличия PSD на вашем компьютере, — лучшая совместная функция, с которой я столкнулся в последние месяцы.

И что самое приятное, Brackets бесплатен , независимо от того, есть ли у вас Photoshop или подписка на Creative Cloud.

Photoshop против Sketch битва за чистейший HTML/CSS

Еще в марте мы написали статью, в которой изложили 3 причины использования Sketch и сравнили функцию “Export” с функцией Photoshop “Extract Assets”.

Тогда, на наш взгляд, Sketch выигрывал с небольшим преимуществом. Однако image assets не единственный тип активов, который вы можете взять из состава макета. В этой статье мы рассмотрим, как оба приложения справятся с такой деликатной задачей, как генерация HTML/CSS кода.

Метод 1: старый способ с Photoshop

С появления CS6, Adobe позволил их сообществу создавать свои собственные расширения для Photoshop. Это привело к созданию многих инструментов извлечения кода, как CSS Hat и CSS3Ps, который является бесплатным.

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

Метод 2: экспорт кода в Sketch

Стили слоев в приложении Sketch очень CSS-ориентированные (это, в конце концов, инструмент дизайна пользовательского интерфейса), так что очень легко щелкнуть правой кнопкой мыши и “Copy CSS Attributes”. “Shadow”, например, принимает четыре значения; X, Y, Blur и Spread, и это непосредственно переносится в CSS box-shadow: X Y Blur Spread. На мой взгляд, это самая простая форма извлечения кода.

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

Это означает, что мы должны переключаться между приложением Sketch и каким-нибудь редактором кода, чтобы вручную заполнить этот пробел между стилями Sketch и переносимым кодом.

Метод 3: извлечение кода с Adobe Brackets

За последние 18 месяцев Adobe прогрессировал; есть ряд мобильных приложений для снимка векторов, цветов из реальной жизни с помощью камеры устройства, и эти снимки автоматически синхронизируются с вашим аккаунтом Creative Cloud.

Но самым впечатляющим является сотрудничество Brackets и Photoshop. Brackets – редактор с открытым исходным кодом для фронтенд разработчиков, созданный с HTML, CSS и JavaScript. Несмотря на возможности “Live Preview” и интеграции с Edge Web Fonts, его пользовательский интерфейс довольно минимален, потому что вы добавляете только необходимые функции.

Импорт документов Photoshop в Brackets

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

Фактически, подписчик Creative Cloud может отправить вам “общую ссылку”, которую можно скопировать в Brackets, что позволяет начать расширение, не имея файла вообще. Давайте попробуем.

Во-первых, найдите боковую панель и иконку подсказки “Extract for Brackets (Preview)” – нажмите на нее, и вы увидите, образец документа Photoshop со всеми неповрежденными слоями, где вы можете переключать эти слои, как если бы вы были в самой программе Photoshop. Brackets очень хорошо вводит вас в курс дела, я постараюсь, чтобы он был кратким.

Измерение расстояния между двумя слоями

Вы можете измерить расстояние между двумя слоями в Sketch, нажав на первый слой, удерживая клавишу Shift, а затем щелкнув второй слой. Я сделал то же самое в Extract for Brackets и понял, что я могу скопировать значение в буфер обмена и использовать его в своей таблице стилей, не выходя из приложения. В действительности вы можете держать клавишу Shift и скопировать любое значение в буфер обмена.

Быстрое кодирование с подсказками CSS

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

Итак, сначала выберите слой, а затем перейдите в таблицы стилей. Когда наступит время объявить стиль, Brackets не только предложит подробные подсказки кода на основе вашего ввода, но также предложат уже определенные значения на основе выбранного вами слоя.

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

Вердикт

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

Преобразование PSD в CSS код в рабочем процессе стиля split-screen, даже без PSD на вашем компьютере, является лучшей функцией, которую я видел в последние месяцы.

А самое лучшее это то, что Brackets бесплатен, независимо от того, есть ли у вас Photoshop или подписаны ли вы на Creative Cloud.

Высоких конверсий!

11-03-2016

Настройка Photoshop для верстки | Only to top

Настройка Photoshop CC, а именно: приветственный экран, единицы измерения, цвета, горячие клавиши и многое другое.

Настройка фотошоп для верстальщика

Настройка цветов

Редактирование » Настройка цветов

Это делается для того чтобы при загрузке нового документа не появлялись дополнительные всплывающие окна.

Начальная среда (экран приветствия)

Возможно кому-то не нравится, или в зависимости от той или иной ситуации нужно убрать, делается это следующим образом.

Редактирование » Настройки » Основные.

Снимаем чекбокс с пункта Показывать начальную среду …

Количество шагов в истории

Для изменения этого параметра заходим Редактирование » Настройки » Производительность.

По умолчанию стоит 50, вы можете выставить своё значение.

Единицы измерения

Редактирование » Настройки » Единицы измерения и линейки.

Как правило верстальщику удобнее работать с пикселями.

Рабочие диски

Редактирование » Настройки » Рабочие диски.

Должен быть активен диск, на котором установлен Photoshop и диск, имеющий много свободного места

Настройка панели инструментов

Для изменения панели инструментов заходим Редактирование » Панель инструментов. В данном окне мы можем перемещать инструменты в удобном для нас порядке и группировать, а также назначать горячие клавиши для самых используемых элементов.

Настройка окон рабочей среды

Так выглядит моя панель для работы с наиболее часто используемым инструментами. Вы можете кастомизировать под себя, используя меню Окно » Выбор окна.

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

Горячие клавиши

Их просто бесконечное множество, их все вы можете изменить как вам угодно. Но всё же стоит остановиться на нескольких из них.

1. tab — скрыть/показать панели инструментов, оставим лишь рабочее пространство и меню;
2. с зажатым CTRL крутить колесо мыши — увеличить/уменьшить масштаб;
3. с зажатым SPACE и левой кнопкой мыши — можно перемещаться по полотну;
4. CTRL + H, CTRL + ; — показать/спрятать направляющие;
5. » [ » или » ] « — уменьшение/увеличение размера кисти/ластика;
6. CTRL + N — создание нового документа;
7. CTRL + S / CTRL + SHIFT + S — сохранить/сохранить как;
8. CTRL + T — трансформация.
9. CTRL + Z — отмена/повторение последнего действия;
10. CTRL + SHIFT + Z — последовательная отмена по шагу назад.

Это лишь малая толика наиболее часто используемых стандартных сочетаний клавиш.

Если вам понравилась данная статья, то рекомендую к прочтению создание сниппетов в VS Code.

PSD в HTML мертв

PSD в HTML есть во всем Интернете. На самом деле, многие люди спрашивали меня, почему на Treehouse нет учебника из PSD в HTML. В дополнение к учебным пособиям существует множество компаний, которые принимают PSD и конвертируют его в веб-страницу примерно за 100 долларов США.

Ознакомьтесь со всеми нашими курсами HTML в Treehouse.

Google возвращает более 48 миллионов результатов для поиска «psd в html». Это популярный, но не лучший способ создавать сайты.

Если он так популярен, то как я могу сказать, что он мертв? Что ж … Я бы хотел, чтобы каждая проблема веб-дизайна могла уместиться в поэтический твит из 140 символов, но это нечеткая проблема, требующая более четкого объяснения. Давайте копаться.

Бесплатная пробная версия Treehouse: Хотите узнать больше о HTML и стратегии дизайна? Щелкните здесь, чтобы попробовать бесплатную пробную версию Treehouse.

Что такое PSD в HTML?

В общем, «PSD в HTML» — это рабочий процесс. Сначала веб-страница создается в документе Photoshop (PSD), а затем преобразуется в код (с использованием HTML, CSS и JavaScript).Вы можете поменять Photoshop на любой другой редактор изображений (например, Pixelmator, GIMP и т. Д.), Но принцип тот же. Вот несколько более подробная пошаговая разбивка:

1. Создайте в Photoshop макет с высокой точностью до пикселя в формате , точно так, как вы хотите, чтобы ваш сайт выглядел.
   
2. Используйте инструмент нарезки, чтобы разделить изображения вашего веб-сайта, а затем экспортировать их в Интернет.
3. Напишите HTML и CSS, используя изображения, экспортированные из Photoshop.

На первый взгляд это может показаться хорошей идеей. Может быть сложно начать кодирование, если вы не знаете, как будет выглядеть окончательный результат, поэтому сначала поэкспериментировать в Photoshop, а затем «экспортировать» его в HTML звучит как гранулярный и разумный процесс.

В Photoshop функция срезов в диалоговом окне «Сохранить для Интернета» раньше была важным инструментом для дизайнеров, сохраняющих ресурсы из PSD. Это позволило легко «нарезать» дизайн на изображения, а затем разместить его на веб-странице с помощью HTML и CSS.

Продолжая эту идею, многие веб-компании использовали PSD в HTML в качестве шаблона для командных рабочих процессов. Другими словами, дизайнер создает макет Photoshop, а затем передает его разработчику, который пишет весь код. В наше время рабочая роль веб-дизайнера, как правило, включает в себя эстетику, а также кодирование HTML и CSS.

Был ли PSD в HTML хорошей идеей?

Да, рабочие процессы из PSD в HTML были одним из лучших способов создания веб-сайтов. Есть две важные причины, по которым PSD в HTML имеет смысл использовать .

Первая причина — изображения. До того, как браузеры поддерживали все замечательные функции современного CSS (тени, закругленные углы, градиенты и т. Д.), Было очень сложно создавать кроссбраузерные эффекты без использования изображений. Дизайнеры создавали тени и закругленные углы как изображения, а затем применяли хитрые приемы кодирования, чтобы разместить изображения на странице. Эти активы необходимо реализовать, несмотря ни на что, поэтому создание их одновременно с макетом с высокой точностью фактически сэкономило время.

До разработки и повсеместного внедрения CSS многие веб-сайты представляли собой набор графических ресурсов, которые выглядели примерно так. Одним из самых новаторских методов того времени была техника раздвижных дверей для создания вкладок еще в 2003 году.

Во-вторых (и, возможно, что более важно) Интернет раньше был доступен только для настольных браузеров, а на самом деле не присутствовал на телефонах и планшетах, как сегодня. Когда-то разработка для одного фиксированного разрешения 1024 × 768 была вполне жизнеспособной.

По этим двум причинам понятно, почему дизайнер будет использовать Photoshop как свой основной инструмент веб-дизайна. Ресурсы изображений были необходимы для разрешения одного экрана.

Что не так с PSD в HTML сейчас?

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

Адаптивный веб-дизайн

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

Screensiz.es предоставляет таблицы с информацией о популярных аппаратных устройствах.

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

Дизайн CSS

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

Срок погашения

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

Это также означает, что существуют гораздо лучшие инструменты для поддержки современных рабочих процессов. CSS-фреймворки, такие как Bootstrap и Foundation, делают его более удобным для разработки в браузере. Такие приложения, как Balsamiq и Omnigraffle, помогают быстро создавать макеты сайтов.Карандашные и бумажные макеты выдержали испытание временем, потому что они допускают чрезвычайно быструю итерацию.

Означает ли это, что Photoshop мертв?

Нет! Даже не близко. Photoshop по-прежнему очень важен для веб-дизайна. Проблема возникает, когда мощный инструмент, такой как Photoshop, используется в качестве универсального решения, не думая о задаче более высокого уровня (разработка веб-сайтов). Photoshop отлично подходит для редактирования и экспорта фотографий для использования в Интернете. Также существует множество ситуаций, когда все же имеет смысл создавать макеты с полной детализацией (в Photoshop, Illustrator или другом) как часть более полного процесса.Вот пара примеров:

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

Эти два примера имеют ключевое отличие от образа мышления PSD и HTML. Мокапы с высокой детализацией все еще иногда создаются, но не для того, чтобы их можно было «перебросить через забор» команде разработчиков или нарезать на код.Скорее, макеты Photoshop можно использовать в качестве наглядного пособия для обсуждения идей. В рабочем процессе PSD в HTML документ Photoshop представляет собой конечный сайт, и ожидается, что он будет выглядеть точно так же в браузере. Это тонкое, но важное отличие.

Различные штрихи

Рабочий процесс у всех разный, и никто не знает, как создать идеальный веб-сайт. Вы всегда должны делать то, что наиболее эффективно для вас и ваших коллег. Перемещать пиксели в Photoshop — это очень весело, но я могу признать, что во многих случаях я зашел слишком далеко.Ключ в том, чтобы знать себя и то, что заставляет вас работать с максимальной эффективностью. Если у вас есть какие-либо вопросы или мнения, я хотел бы услышать о них в комментариях!

 Попробуйте нашу шпаргалку из PSD в HTML, чтобы быстро ознакомиться со многими уникальными функциями, которые Export Kit поддерживает с преобразованием PSD в HTML и CSS. 

 Попробуйте наше новое подробное руководство из PSD в HTML5 - Просмотреть сейчас 

  ВАЖНО:  Используйте настройки цвета  RGB , это значение по умолчанию для большинства сред - узнайте больше. 

  ВАЖНО:   ВЫ ДОЛЖНЫ ИСПЫТАТЬ, ИСПЫТАТЬ, ИСПЫТАТЬ!  

  ПРИМЕР:  Если ширина вашего документа 2400 пикселей - ширина вашего вывода будет 2400 пикселей. 

  ПРИМЕР:  Если ваш PSD-дизайн имеет поле содержимого в 500 пикселей - ваш выходной контент будет начинаться с 500 пикселей.

  СОВЕТ:  Обрежьте лишнее пустое пространство в PSD, чтобы избежать визуальных ошибок - узнайте больше. 

  ПРИМЕЧАНИЕ:  После преобразования этих слоев в уважаемый смарт-объект, изображение или папку - ваш экспорт будет отображен на 100%, как и ожидалось. 

  СОВЕТ:  Вы можете (а) удалить маску ссылок элементов или (б) создать новую папку и перетащить содержимое группы в новую папку, а затем удалить старую группу. 

 Просмотрите шпаргалку по элементам, чтобы предварительно просмотреть нашу поддержку HTML5. 

  ПРИМЕЧАНИЕ:  Каждый слой обрабатывается, начиная с последнего или нижнего слоя (обычно это «фоновый» слой), затем вверх.

  ВАЖНО:  Если элементы четко помечены, вы можете легко добавить сценарии для управления объектами на выходе.

 Вам необходимо (1) удалить слой из вашего PSD или (2) добавить содержимое к слою. 

  ВАЖНО:  Мы рекомендуем вам использовать как можно больше слоев и папок для создания PSD-файла. Чем больше слоев, тем лучше! Вы всегда должны группировать слои в папки, если они связаны. 

  ВАЖНО:  Невозможно создать веб-страницу без использования форм и текста на современном веб-сайте, с другой стороны,  HTML5 НЕ МОЖЕТ  обрабатывать формы или стили без CSS или SVG. 

  ВАЖНО:  Фигуры экономят трафик! Образы всегда должны загружаться на клиентский компьютер, что требует дополнительной полосы пропускания. Чтобы уменьшить это, по возможности используйте фигуры - узнайте больше. 

  СОВЕТ:  Кодом все формы являются прямоугольниками! Очень часто можно ошибочно принять визуальный дизайн фигуры за ее измеренную площадь. Во всех языках программирования элементы трактуются как прямоугольная область   - подробнее. 

  ** Только Lightning Storm v128 **  

  ПРЕДУПРЕЖДЕНИЕ:  Для простых форм идеально подходят векторы, но при использовании векторов для сложной графики - выходной файл  (например, файл HTML)  может быстро увеличиваться в размере = более длительное время загрузки. 

  ПРИМЕЧАНИЕ:  Нет  специальных настроек, необходимых  для обработки текста, выбора инструмента текста, шрифта и настроек; Все остальное сделает Export Kit.

  ВАЖНО:  Ни одна среда не поддерживает слои, начинающиеся с цифр, а некоторые символы недопустимы в качестве идентификаторов слоев - узнайте больше. 

  ПРИМЕР:  Разработчик  НИКОГДА  не будет создавать текстовый элемент с размером шрифта 16 пикселей, а затем масштабировать текст с помощью CSS до 187% - это  НЕ отраслевые стандарты , вы должны изменить размер шрифта! 

  ВАЖНО:  Вы можете спроектировать что угодно, но если вы ожидаете результатов , готовых к производству,  - тогда вы должны создать  готовый к производству проект . 

  ВАЖНО:  Каждый браузер имеет индивидуальную поддержку шрифтов CSS, поэтому требуется тестирование желаемого шрифта и целевого браузера.
 

 1
2
 

 Скопируйте приведенный выше код и вставьте его в настраиваемую ГОЛОВУ. 

  ПРИМЕЧАНИЕ.  HTML5 и CSS3  НЕ поддерживает все эффекты слоев Photoshop.

  ВАЖНО:  В зависимости от вашего эффекта и угла, размер вашего элемента может измениться, чтобы отразить эффект, примененный к элементу - узнайте больше. 

  $ {skip}  - ВСЕ СЛОИ 

  $ {img}  или  $ {image}  - ТОЛЬКО СЛОИ (НЕ ПАПКИ) 

  ПРИМЕЧАНИЕ:  Чтобы отобразить папку как изображение, мы рекомендуем преобразовать папку в смарт-объект - узнайте больше.

  $ {link: [URL_ADDRESS]}  - ТОЛЬКО СЛОИ ТЕКСТА 

  $ {p}  - ТОЛЬКО ТЕКСТОВЫЕ СЛОИ 

  ПРИМЕЧАНИЕ.  Добавление стилей  span  в файл CSS бессмысленно, так как вы, скорее всего, будете использовать стиль один раз.

  $ {object | [TYPE]: [URL_ADDRESS]}  - ТОЛЬКО СЛОИ ФОРМЫ 

  $ {form | [TYPE]: [URL_ADDRESS]}  - ТОЛЬКО ПАПКИ 

  $ {input: [TYPE]}  - ТОЛЬКО СЛОИ ТЕКСТА 

  $ {css | style: [name]}  - ВСЕ СЛОИ 

  $ {css | styles}  - ТОЛЬКО ПАПКИ 

  $ {code}  - ТОЛЬКО ТЕКСТОВЫЕ СЛОИ 

  $ {class | [CLASS_NAME]: [PROPERTIES]}  - ТОЛЬКО ПАПКИ 

  $ {page: [PAGE_NAME]}  - ТОЛЬКО ПАПКИ 

  ПРИМЕЧАНИЕ.  Вы можете экспортировать неограниченное количество страниц, но использование нескольких страниц увеличит время экспорта. 

  $ {css | screen: [SCREEN_SIZE]}  - ТОЛЬКО ПАПКИ 

  ПРИМЕЧАНИЕ.  Вы можете экспортировать экран неограниченного размера, но несколько размеров экрана увеличат время экспорта. 

 Вы почти у цели - идеальный HTML5 за несколько минут! 

  НЕ ПЫТАЙТЕСЬ   FORCE  Выход для работы на  ВСЕХ браузерах и устройствах  - это  НЕВОЗМОЖНО , поверьте нам - мы постоянно это тестируем! 

 Export Kit позволяет создавать каркасные конструкции и пользовательские скины для элементов, которые генерируются на выходе. 

 Используйте Image Kit Pro, чтобы сохранить снимок или водяной знак вашей работы в процессе работы, а также веб-иконки для ваших HTML-страниц.

 Включите «Сохранить ресурсы PSD» для создания шаблонов PSD, связанных с проектом. Каждая папка в вашем документе будет сохранена в виде файла [.psd] для удобства использования и редактирования. 

  ТОЛЬКО АКТИВНЫЙ ДИЗАЙН  - Включите отзывчивые изображения для создания адаптивных графических ресурсов. Каждое изображение в папках экрана css будет сохранено как новое изображение с измененным размером. 

  2 - 5 секунд  = Модуль (например,Навигационное меню)
  30-40 секунд  = Базовая веб-страница
  1-2 мин.  = сложная веб-страница
  6–8 мин.  = Одностраничный веб-сайт
  6-8 мин.  = 3 адаптивных экрана
  8–10 мин.  = 5-страничный веб-сайт
  20–25 мин.  = 5 страниц адаптивного веб-сайта (3 экрана) 

  НЕ сохраняйте документ .На данный момент слои были переименованы! 

 Воспользуйтесь нашей шпаргалкой по HTML5 для быстрого ознакомления со многими уникальными функциями, которые Export Kit поддерживает с преобразованием PSD в HTML и CSS. 

  Ошибка : вы экспортируете стопы на слой формы 

  Ошибка : ваша веб-страница содержит  текста и НЕКОТОРЫЕ изображения , но не все 

  Ошибка : ваша веб-страница содержит  текста и НЕТ изображений  вообще 

  Ошибка : ваш элемент HTML5 не отображался на 100%, как слой PSD. 

  Ошибка : вы застряли, и у вас есть вопрос 

 После завершения вывода вы, скорее всего, захотите загрузить его сейчас на свой веб-хост. Это пошаговое видео покажет вам, как.