Верстка сайта по макету псд: Как научится верстать из PSD макетов в html+css? — Хабр Q&A

Верстка сайта по вашему PSD макету: быстро заказать, получить качественный сайт по доступной цене

Главная

Услуги

Верстка сайта по вашему PSD

Описание

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

Адаптивная верстка

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

Шрифты

Если на сайте предполагается использовать нестандартную таблицу шрифтов, то и этот момент необходимо предварительно указать в сопроводительном описание и приложить файл со шрифтом к PSD макету. Если же шрифт является платным, то его следует приобрести и так же приложить к PSD макету. Мы рекомендуем использовать шрифты из библиотеки Google Fonts

Почему следует заказать услугу у нас

Мы работаем с любыми PSD макетами сайтов, даже если они сделаны любителем

Помощь в дальнейшем внедрении во все популярные системы управления контентом

Гибкая система оценивания стоимости предстоящей работы

Сколько стоит услуга?

Точную стоимость верстки Вы сможете узнать после того как предоставите макет с приложенным к нему описанием. Мы работаем честно и открыто и ни оцениваем воздух с завышением стоимости работы.

Стоимость услуги зависит от:

Количества макетов

Количество блоков на странице

Тип верстки (адаптированная или нет)

Внедрение в дальнейшем в CMS

Разработка анимации

Узнать стоимость

Прикрепить файл*

Пожелания к PSD макету

обязательные

1. Макет должен быть представлен в формате .psd
2. Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
3. Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины. Указания значений не должны быть дробными!
4. Слои ни в коем случае не должны быть склеены.
5. Выравнивание слоев – строго по “Rulers (линейки)”. Их необходимо оставлять в макете.
6. В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
7. Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
8. Не допускается растрирование текста или размещение его в smart-объекте.
9. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам.
10. Передаваемые шрифты должны быть только форматов ttf и otf.

желательные

1. Все слои одного логического элемента должны быть в одной папке (Шапка сайта, слайдер, главное меню, баннер, карточка товара и т.п.).
2. Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.). Придерживаемся иерархии «сверху вниз» и «слева направо».
3. Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д.
4. «Rulers» должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
5. Если требуется адаптивная верстка, нужны макеты для реперных точек и комментарии по поведению верстки между этими точками, например,
   320—480px
   480—1024px
   1024—2520px
   Но вы можете ни рисовать все эти макеты, для нас главное, чтобы был готов макет в максимальном разрешение, мы поможем и продумаем за Вас адаптирование макета по все разрешения от Вашего максимального до минимального 320px.
6. Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
7. Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т. д.)

Что Вы получаете после выполнения услуги

Архив с готовой версткой по-Вашему PSD макету, что входит в архив:

01

HTML страницы

02

CSS стили

03

JS скрипты

04

Папка с картинками

Сделать заказ

Прикрепить файл*

Экспорт параметров и графики из PSD‑макетов — HTML Academy

Описание навыка

Профессиональная задача:

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

Зачем нужен этот навык:

Входные данные для вёрстки сайта — обычно макет, часто в формате PSD. Верстальщик самостоятельно открывает макет в графическом редакторе Photoshop, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать. Графический редактор Photoshop — один из самых распространённых на рынке, он работает на Windows и MacOS и более десяти лет используется дизайнерами для создания макетов.

Расположение относительно других навыков:

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

Минимальные требования для освоения:

Пройдено три главы курса Знакомство с HTML и CSS:

• Ссылки и изображения,
• Основы CSS,
• Оформление текста.

Состав навыка

Подготовительный материал

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

Углублённая теория

3 раздела углублённой теории общим объёмом 16 страниц.

Включает следующую информацию:

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

Инструкция по работе с макетами

Методики получения данных о тексте, определения цвета элементов, работы с эффектами, измерения расстояний и экспорта графики общим объёмом 40 страниц.

Демонстрационные кейсы

Два демонстрационных кейса, по одному для лёгкого и сложного уровня.

Показывают как применять описанные выше инструкции по работе с макетами.

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

Так выглядят некоторые страницы кейсов:

Пошаговые разборы кейсов

Один разбор для каждого демо-кейса.

Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и премерами кода.

Так выглядит один из шагов разбора кейса лендинга «Yes»:

Тренировочный материал

Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.

Шесть тренировочных кейсов: 2 лёгкого уровня, 3 среднего уровня и 1 сложного уровня.

В качестве входных данных вы получаете дизайны страниц, на выходе должны получиться снятые параметры макетов и графика.

Для тренировочных кейсов разборы более компактные и включают эталонное решение от авторов, которое можно сравнить со своим.

Так выглядят некоторые страницы кейсов:

Что такое PSD? Первый шаг к веб-дизайну

Делиться:

Джереми Х.

Поскольку мы являемся лучшим сервисом для преобразования PSD в HTML в Интернете, мы довольно часто используем термин «PSD». Мы ответили на вопрос «Что такое PSD для HTML?» и предоставили список определений общих терминов веб-разработки, но теперь мы разбиваем его еще дальше.

Что такое PSD?

Проще говоря, PSD — это файл дизайна Photoshop . Технически это означает документ Photoshop, который является проприетарным типом файла от Adobe. Adobe Photoshop — это программное обеспечение , наиболее широко используемое для веб-дизайна и лучше всего подходящее для процесса проектирования в код.

Файлы PSD

обычно открываются и редактируются с помощью Adobe Photoshop, но их можно открывать с помощью Adobe Photoshop Elements и даже некоторых продуктов сторонних производителей, таких как Corel PaintShop Pro и GIMP. Однако программы, отличные от Photoshop, не смогут полностью редактировать или даже читать сложные слои, используемые во многих файлах PSD.

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

Если вас интересует бесплатная программа для простого просмотра PSD-файлов в виде плоских изображений (без слоев), Apple QuickTime, которая включает в себя Picture Viewer, подойдет, но вы не можете использовать эту программу для редактирования PSD-файла. Он предназначен исключительно для просмотра файлов PSD в виде изображений.

Как я могу создать сайт с PSD?

файлов PSD могут быть «нарезаны» и преобразованы в HTML-код опытным веб-разработчиком. Сервисы преобразования PSD в HTML, такие как The Site Slinger, специализируются именно на этом. Мы берем PSD-файлы и возвращаем HTML/CSS-разметку , готовую к внедрению в качестве работающего сайта.

Иногда дизайнеры используют другие типы файлов. Хотя мы можем работать с файлами PNG, IDD или AI, мы настоятельно рекомендуем файлы PSD. Для работы с другими типами файлов может потребоваться дополнительный этап преобразования дизайна в файл PSD.

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

Технический материал

Тип файла PSD поддерживает все режимы изображения (растровый рисунок, оттенки серого, двухцветный, индексированный цвет, RGB, CMYK, лабораторный и многоканальный), что является одной из причин, по которой он так широко используется. Он также поддерживает обтравочные контуры, каналы, информацию о прозрачности и многоуровневые слои, в то время как другие форматы просто представляют «плоские» изображения.

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

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

Также интересно отметить, что файлы Photoshop иногда имеют расширение .PSB, что означает «Photoshop Big». Согласно Adobe, «формат больших документов (PSB) поддерживает документы размером до 300 000 пикселей в любом измерении. Поддерживаются все функции Photoshop, такие как слои, эффекты и фильтры. Вы можете сохранять изображения с высоким динамическим диапазоном и 32 битами на канал в виде файлов PSB.

В настоящее время, если вы сохраняете документ в формате PSB, его можно открыть только в Photoshop CS или более поздней версии».

Вы можете прочитать больше о Спецификации форматов файлов Adobe Photoshop, если хотите углубиться в технические аспекты типа файлов PSD.

Ресурсы

Прочтите советы и рекомендации по веб-дизайну.

• Полезные термины для служб PSD в HTML 
• Как использовать композиции слоев Photoshop 
• 7 советов по веб-дизайну 
• 10 причин, по которым НЕ следует кодировать собственный HTML 
• Правила проектирования для PSD в HTML
• Мы все еще нарезаем PSD?
• Что такое HTML? Назад к основам

Делиться:

Разработка сайта с использованием макета PSD

Отрывок.

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

В начале 2018 года мы начали сотрудничество с . Поработав со сторонними дизайнерами, они смогли предоставить нам оригинальный макет сайта. Мы реализовали проект в полном соответствии с дизайном и улучшили его функции.

Давайте обсудим ваш проект

Давайте обсудим ваш проект, чтобы узнать, чем мы можем вам помочь. Запланируйте бесплатную 15-минутную встречу

Заказать бесплатную консультацию

Поделиться этой статьей

История клиента.

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

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

Чуть ранее компания сотрудничала с дизайнерами, которые разрабатывали макет будущего сайта в формате PSD (Photoshop). В силу определенных причин, таких как длительное время разработки, заказчик решил найти новых разработчиков программного обеспечения.

Он нашел важным следующее:

• С использованием готового проекта (оплачен и соответствует требованиям)
• Идентичность визуальной части сайта макету
• Макет под ключ с необходимыми функциями для сайта в короткие сроки

Наше решение.

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

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

При HTML кодировании сайта мы руководствовались известной концепцией Pixel Perfect. Вы можете узнать об этом подходе в нашем проекте разработки шаблона Pixel perfect для WordPress.

Результат.

Главная страница

Страница содержит следующие элементы:

• Полноэкранное слайд-шоу с атмосферными фотографиями интерьеров
• Классификатор продукции (каталог по видам продукции: ламинат, плитка, паркет, винил, ковры)

Старая версия главной страницы:

Старая версия главной страницы

Макет новой домашней страницы:

Макет новой домашней страницы/разработка сайта из PSD

Наша версия главной страницы:

Новая версия главной страницы/разработка сайта из PSD

Каталог товаров

Для каталога товаров мы реализовали интеграцию между сайтом и складской ERP системой Visma Horizon. Менеджеры могут редактировать товары, их количество, свойства и цены в складском приложении. Все изменения автоматически появляются в разделе сайта «Каталог».

Каждый из 5-ти разделов — Плитка, Ламинат, Ковры, Паркет, Винил — представлен в 3-х категориях:

• Коллекции
• Интерьеры
• Каталог

Старая версия страницы Каталога

Старая версия страницы Каталога/разработка сайта из PSD

Макет новой страницы Каталога:

Макет новой страницы Каталога/разработка сайта из PSD

Наша версия Каталога страница:

Новая версия страницы Каталога/разработка сайта из PSD

Фильтр поиска товаров

Значок поискового фильтра находится в левой части экрана.

Поможет подобрать продукцию по следующим параметрам:

• Помещение
• Текстура
• Цена
• Вариации
• Износостойкость
• Материал
• Тип поверхности
• Противоскользящее покрытие
• Текстура
• Форма
• Цвет

Подобно загрузке элементов коллекции, поисковые фильтры работают, динамически загружая данные из системы хранения Visma Horizon . Изменения в этом приложении динамически отображаются на сайте.

Новая версия фильтра поиска товаров/разработка сайта от PSD

Landing page

Это лендинг для целевой аудитории. Например, для контекстной рекламы. На нем отображается важная информация о компании для различных целевых аудиторий — строителей, проектировщиков, архитекторов.

Старая версия лендинга

Старая версия лендинга/разработка сайта из PSD

Макет лендинга:

Макет лендинга/разработка сайта из PSD

Наша версия лендинга:

Новая версия лендинга/разработка сайта от PSD

Страница контактов

Страница содержит контактную информацию, встроенный виджет Google Maps с местонахождением компании и контактную форму.

Старая версия страницы Контакты

Старая версия страницы Контакты/разработка сайта из PSD

Макет страницы Контакты

Макет страницы Контакты/разработка сайта из PSD

Наша версия страницы Контакты:

Новая версия страницы Контакты/разработка сайта из PSD

Резюме.