Макеты для верстки для новичков: PSD макеты для вёрстки сайтов

Простые макеты для верстки для начинающих

PSD файл состоит из 3-ёх экранов с использованием специальной сетки Golden Ratio, что позволяет в

Этот шаблон хорошо подходит для агенства, портфолио, современного бизнеса и личного использования

Шаблон создан для продвижения своих услуг и продуктов стартапами. Также подойдёт разработчикам.

Простой и красивый шаблон, который сразу отображает необходимую информацию.

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

Шаблон сделан специально для портфолио разработчику.

В архиве 6 различных цветовых схем. Тема выполнена очень аккуратно и гармонично смотрится.

В дизайне шаблона присутствуют яркие, синие тона. Красивая страница для бронирования билетов.

В архиве присутствуют 9 PSD файлов. Взгляните на них в предпросмотре.

Этот шаблон можно использовать для галереи или для собственного портфолио.

Чистый и опрятный дизайн шаблона с удобной навигацией. Скачивайте и пользуйтесь бесплатно!

В дизайне шаблоно много свободного, белого пространства.

Красивый премиум шаблон, который можно использовать бесплатно.

Аккуратный и креативный дизайн. Вы можете изменять слои по своему усмотрению в PSD файле.

В архиве присутстуют 2 PSD файла. Дизайн яркий и в нём много разноцветных элементов.

Очень простой, но аккуратный дизайн. Больше всего подойдёт для блога с видео и фото.

Дизайн шаблона выполнен в синих тонах. PSD файл легко редактируется под свои нужды.

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

Шаблон подойдёт для любого вида использования.

ПИРАТСКАЯ БУХТА для РАЗРАБОТЧИКОВ

Traveler это PSD макет веб-дизайна.
Сайт связан с некой онлайн програмкой, которая поможет вам в вашем путешествии.
Очень креативная и интересная задумка для сайта.

Очень красочный PSD макет, который следовало бы сверстать.
Довольно простой но, в то же время сложный в некоторых элементах.
Bloom это идеальная грань между красотой, минимализмом и незаменимым опытом.

Довольно интересный макет киносайта, который можно (и нужно!) сверстать для практики.
Так как здесь используется новый принцип построения и вывода контента.
Опыт будет бесценным 💯

Интересный PSD макет интернет магазина по продаже одежды.
Верстать такой должен уметь каждый!

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

В меру сложный, но в то же время простой PSD шаблон вебсайта.
Как нельзя лучше подойдет для тренировки вёрстки из PSD и/или оттачивания своих навыков.

Довольно крутой шаблон для интернет магазинов.
Готовую верстку осталось только адаптировать под любимую CMS.

Верстка данного шаблона, насколько я помню, продаётся (или продавалась) на Envato Themeforest.

А потому он является премиум шаблоном в стиле Magazine (нечто круче блога).

Сверстать его правильно и точно – это довольно высокий скилл.

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

Новичкам уметь верстать такое – Must Have.

Довольно креативный PSD шаблон, который имеет смысл сверстать ради опыта верстки из PSD.

Довольно интересный PSD шаблон портфолио в трёх цветовых решениях.

Желательно верстать в Pixel Perfect.

Простой, но тем не менее красивый PSD шаблон лендинга на тему спорта.

Его верстка даст Вам много полезного опыта, главное не забывать о контентной части и Pixel Pefect.

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

Главнное не забыть решить вопрос с контентной частью =)

Довольно креативный и в то же время простенький PSD шаблон лендинга по продаже квадрокоптеров.

Верстать в Pixel Perfect совсем не обязательно, но чем ближе к макету – тем лучше.

Достаточно интересный PSD шаблон лендинга, выполненный в интересной цветовой схеме, но в тоже время он довольно простой.

Желательно верстать в Pixel Perfect.

ПИРАТСКАЯ БУХТА для РАЗРАБОТЧИКОВ

Проект «Клондайк Программиста» создан с целью коллекционирования наиболее интересных материалов из различных сфер деятельности.
Мы не преследуем цель незаконного распространения материалов, поэтому если Вы являетесь правообладателем, сообщите нам о нарушении по указанным здесь контактам.

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

Такие макеты создаются дизайнерами в Photoshop и, по сути, представляют собой обычные графические файлы страниц. Они не порезаны, а идут едиными файлами. Их преимущество в том, что верстальщик сможет самостоятельно настроить дизайн под индивидуальные нужды клиента. Да и стоят PSD-шаблоны довольно дешево. На одной из передовых площадок шаблонов Themeforest цены на макеты начинаются от 3$.

Обычным пользователям макеты сайтов будут не особенно полезны, поэтому я рекомендую не тратить лишнее время и нервы и сразу выбирать готовый шаблон сайта. Да, они стоят дороже, чем PSD-шаблоны, но эта разница с лихвой окупится сэкономленным временем и отсутствием необходимости в дальнейшей верстке и привлечении специалиста для адаптации под конкретную систему. На нашем сайте есть целый раздел, посвященный тысячам шаблонам WordPress для любых целей. Также у нас есть шаблоны Drupal, Joomla и других CMS. С ними вы сможете понять, что разработка сайта это, на самом деле, очень просто!

Профессиональным пользователям мы представляем двадцатку лучших PSD-макетов под различные цели: бизнес, творчество, блог и интернет-коммерция. Почти все PSD-макеты имеют WordPress-версию, так что начинающим пользователям я тоже советую прочесть этот обзор.

Макеты сайтов для верстки для начинающих и опытных пользователей

Zonex – трендовый макет PSD для онлайн-магазинов

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

MyTravel – универсальный шаблон для сайта бронирования/туроператора

MyTravel — PSD шаблон для бронирования туров и путешествий. Этот шаблон идеально подходит для компаний и агентств, которые предоставляют услуги отеля, проката автомобилей, недвижимости, а также различные туры на выбор, прогулки на яхтах и многое другое. MyTravel включает в себя 70 тщательно разработанных страниц, которые вы сможете легко редактировать и настраивать в соответствии с вашими потребностями. Этот макет является идеальным решением для создания уникальных веб-проектов.

Prelude – макет для создания профессионально выглядящих сайтов

Prelude — это многофункциональный, современный и простой в использовании PSD шаблон, который подходит для всех направлений деятельности. Универсальность заключается в большом количестве разнообразных страниц, которые вы получаете вместе с Prelude. Данный макет станет идеальным выбором для любого вашего проекта. Вы можете легко редактировать этот PSD, все настраивается на 100%. Все, что вы увидите в комплекте, может быть изменено без потери качества. Этот PSD шаблон также идеально подходит для конвертации в HTML, WordPress и Joomla.

TheFox – макет сайта для многоцелевого использования

В этом самом популярном макете есть компоненты для блога, магазина, лендинга, портфолио и корпоративного сайта. Все они выполнены с чувством вкуса и стиля. В комплект входит 280 PSD-файлов. Любителям WordPress доступна готовая версия под эту CMS.

Avada – универсальный PSD-макет

В этом макете собрано 59 PSD-файлов с уникальным оформлением сайтов различной направленности, в том числе интернет-магазинов, портфолио и блогов. Доступна коробочная и широкая версия. Также есть полноценная WordPress-версия шаблона Avada, который является самым популярным в мире WordPress-решением (360 тысяч довольных клиентов).

AdelFox – многоцелевой шаблон PSD

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

Black + White – простой макет с минималистичным оформлением

Чистый элегантный вариант для тех, кто хочет сделать свой сайт более уникальным. Идеально подойдет для сайтов с красивыми фотографиями. Ничего лишнего – только самое необходимое.

HUGE – универсальный PSD-макет для идеального сайта

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

Для этого макета есть версии под WordPress и Joomla, чтобы упростить разработку.

Enfold – популярные макеты сайтов для верстки в формате PSD

Это универсальный макет для любой компании, работающей в любой сфере деятельности. 31 хорошо организованный Photoshop-файл позволит вам немного подшаманить настройки, получив на выходе уникальный дизайн. Все иконки и шрифты в макете бесплатные. Есть и WordPress тема Enfold для тех, кто не хочет париться.

Waxom – чистый универсальный макет Photoshop

238 файлов, чистый дизайн, Google-шрифты и сетка Bootstrap. Сферы применения: портфолио, хостинг, медицина, путешествия, церковь, недвижимость, автомобили, онлайн-коммерция и бизнес. Есть также мобильные макеты и WordPress тема всего за 59$.

Circles – крутые макеты сайтов с идеальным дизайном

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

Travelo – комплект макетов для бюро путешествий

В этом макете собраны стильные оформления для туроператоров и туристических агентств. 21 вариант слайдера с поддержкой Revolution и Layer Slider. 12 макетов домашней страницы. Также есть версия под WordPress.

Delimondo – отзывчивый макет сайта ресторана

В этом макете доступно 5 стилей оформления с 10 страницами в каждом. Всего 50 PSD-файлов для тщательной настройки дизайна. Поддержка слайдеров, формы бронирования и бесплатных шрифтов Google.

Также прочтите обзор шаблонов WordPress для ресторанов, клубов и баров.

R.Gen – готовые макеты магазинов под OpenCart

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

Book Your Travel – макеты сайтов для верстки туроператора

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

Travel Agency – многозадачный туристический PSD макет сайтов

Чистый дизайн с функциями бронирования для турагентств и агентств недвижимости. Идет в трех цветовых стилях: голубой, зеленый и оранжевый. Всего целых 59 PSD-файлов!

Обзоры готовых сайтов под WordPress для туристической сферы смотрите здесь и здесь.

Super Duper – стильный макет для любого бизнеса

В этом макете в 150 файлах Photoshop вы найдете 21 макет домашней страницы, 50+ вариантов онлайн-магазина, 10 страниц блога и даже 2 вида одностраничного сайта. Предусмотрены мобильные макеты.

Carry Hill – PSD макет сайта школы

Уникальный дизайн этого макета отлично подходит как для школьного, так и для творческого сайта. 8 простых PSD-файлов с оформлением главной страницы, блога, галереи, контактных данных и других страниц. Есть поддержка Doodle’ов.

Образовательные темы WordPress мы рассматривали в нескольких обзорах: 1, 2 и 3.

TheGem – творчески оформленные PSD макеты сайтов для верстки

В этом стильном макете, поддерживающем полноценную WordPress-тему, спрятано 200+ PSD-файлов, 50 вариантов домашней страницы, 25 страниц блога, полный набор макетов магазина и 20 видов портфолио.

BVD – красивые макеты для стильного веб-дизайна

В этом отличном макете с крутым дизайном содержится полноценный шаблон для бизнес-сайта, портфолио и блога. Удобное оформление сетки с размером 960. Всего в комплекте 6 PSD-файлов и файл помощи.

Marine – универсальные макеты под любой сайт

Для этого макета характерен минималистский дизайн и идеальная структура сетки. 35 PSD-файлов с хорошо организованной структурой слоев. Поддержка любых версий Photoshop.

After Sunday – гибкий макет для НКО и религиозных организаций

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

А вот под WordPress у нас есть целый раздел шаблонов под эти применения.

Argo – макеты сайтов для верстки одностраничного портфолио

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

Десятки тем портфолио для WordPress есть в этом и этом обзоре.

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

Макеты сайтов • .PSD

Макеты сайтов в формате psd

Светлый макет Landing Page для стартапа

Свежий, светлый макет сайта landing page для стартапа или агентства….

• Макеты сайтов

 4356

Креативный макет сайта для агенств

Современный, креативный, универсальный макет для современного сайта любого агенства. Psd…

• Макеты сайтов

 3487

Макет для сайта фото студии

Креативный макет сайта для фотостудий или фотографов. Отлично подойдет для…

• Макеты сайтов

 4030

Макет для сайта доставки еды

Аккуратный, современный, яркий, но не перегруженный дизайн макета для сайта…

• Макеты сайтов

 9383

Стильный макет сайта о путешествиях

Современный, стильный, профессиональный и привлекающий внимание веб-дизайн, который легко отличит…

• Макеты сайтов

 9387

Минималистичный, темный макет для портфолио

Чистый и минималистичный макет, выполнен в темных цветах, отлично подходит…

• Макеты сайтов

 12443

Яркий макет музыкального сайта

Яркий, изящный и стильный psd макет для музыкального сайта. Разработан…

• Макеты сайтов

 8713

Легкий макет для интернет-магазина

Легкий и стильный psd макет для интернет-магазина. В архиве есть…

• Макеты сайтов

 8974

Макет сайта для игрового проекта

Макет был разработан в первую очередь для игровых веб-ресурсов. Хотя…

• Макеты сайтов

 8342

Легкий, современный макет для интернет магазина

С этим впечатляющим дизайном вы можете открыть собственный интернет-магазин и…

• Макеты сайтов

 7602

Макет блога о путешествиях

Потрясающий, бесплатный psd макет блога о путешествиях, созданный с использованием…

• Макеты сайтов

 5102

Макет для игрового сайта

Очень стильный, современный макет для игрового сайта. Имеет простой, интересный…

• Макеты сайтов

 5257

Лучшие бесплатные PSD макеты сайтов для верстки

Представляем вашему вниманию 20 бесплатных psd макетов сайтов. Эти psd макеты послужат хорошим примером, как нужно правильно рисовать дизайн сайта, вы сможете заглянуть в исходники, посмотреть как расположены и отсортированы слои в Фотошопе. А так же вы сможете потренировать свои способности верстки шаблонов, вам не нужно заморачиваться с дизайном, у вас есть готовый, красивый psd исходник шаблона. Узнайте как создать шаблон для WordPress, прочитав мой курс уроков. Ниже под каждым примером вы сможете перейти на страницу автора, чтобы скачать psd исходники.

Modus Versus шаблон с разными цветовыми вариациями

Скачать

Экстраординарный исходник шаблона для блога

Скачать

Бесплатный исходник шаблона Sevent

Скачать

Бесплатный креативный макет для портфолио и блога

Скачать

Адаптивный шаблон

Скачать

Одностраничный макет шаблона Legend

Скачать

Kitchenwall psd исходник для блога

Скачать

Корпоративный psd макет Revenant

Скачать

Пользовательский интерфейс Flat Ui

Скачать

PSD исходник ViewPort для блога или журнала

Скачать

BlueBox psd исходник Flat дизайна

Скачать

Исходник шаблона в стиле винтаж

Скачать

Исходник макета для веб приложения

Скачать

Одностраничный шаблон Motion

Скачать

PSD макет дизайна сайта для хостинга

Скачать

Исходник Webpaint для блога или корпоративного использования

Скачать

Бесплатный макет сайта в ретро стиле

Скачать

Одностраничный макет для блога или портфолио

Скачать

Бесплатный бизнес макет сайта

Скачать

Шаблон FOX

Скачать

Макет страницы Twitter Bootstrap 3

Скачать

Бесплатный адаптивный макет

Скачать

Адаптивный фрейм для вашего сайта

Скачать

Автор подборки speckyboy.com

Похожие записи

Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?

Свяжитесь со мной

3 комментария к “Лучшие бесплатные PSD макеты сайтов для верстки”

Оставить отзыв

Что такое Pixel Perfect вёрстка и зачем она нужна — Блог HTML Academy

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

Заказчик еще до появления сайта знает, как должен выглядеть каждый элемент на
странице. И если в процессе работы что-то изменится, он может не принять
работу. Поэтому веб-разработчик должен не просто сверстать сайт по образцу,
а сделать это близко к согласованному макету.

Чтобы сайт как можно точнее совпадал с утвержденным дизайном,
веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки
строго по макету, при котором размеры и интервалы из макета соблюдаются с
точностью до нескольких пикселей.

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

Зачем учиться Pixel Perfect вёрстке начинающему разработчику?

Концепция Pixel Perfect вёрстки распространена в компаниях, которые
занимаются разработкой сайтов и веб-приложений. Чтобы не испытывать проблем
с заказчиками в коммерческой разработке и не затягивать сроки сдачи
проектов, полезно сразу, ещё во время обучения, научиться верстать сайты
«пиксель в пиксель». Для этого нужны время и практика, ноо с каждым проектом
вы начнете быстрее разрабатывать сайты и проекты, полностью соответствующие
макету.

Как верстать под Pixel Perfect?

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

Чтобы добиться еще большего сходства, разработчики используют программы и
скрипты: X-Precise, pixLayout, Crosspixel и другие. Но один из наиболее
удобных способов проверить совпадение сайта и макета — работа со специальным
плагином PerfectPixel.
С его помощью можно в браузере наложить макет на вёрстку и проверить, какие
элементы нужно исправить.

Пример наложения макета на страницу в режиме инверсии. Белая «обводка» —
разница между элементами двух слоёв.

Как проверить вёрстку с помощью PerfectPixel?

Чтобы проверить вёрстку, для начала нужно скачать плагин
PerfectPixel для браузера Chrome, Opera или Edge. Для Firefox можно
использовать Pixel
Perfect Pro, а вот для Safari плагин пока находится в стадии
разработки.

После установки в панели браузера появится розовая иконка — это и есть
PerfectPixel Если она не появилась, добавьте самостоятельно. Для этого
откройте «Расширения» (находится на панели или в настройках браузера) и
закрепите иконку в меню быстрого запуска.

Так выглядит иконка PerfectPixel в браузере Chrome.

Иногда плагин бывает недоступен для работы с сайтами, запущенными локально,
то есть не размещёнными в интернете. В таких случаях откройте в браузере
раздел «Расширения» и найти в нём PerfectPixel. Затем нажмите на кнопку
«Подробнее» и измените в настройках две функции: «разрешить открывать
локальные файлы по ссылкам» и «разрешить доступ на всех сайтах».

Следующий этап — экспорт страницы макета в формате PNG из Figma или Adobe
Photoshop. Если не помните, как работать с Figma, прочитайте статью «Старт в Figma для
верстальщика».

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

OS X — Control + Command + I

Windows — F12

Linux — Ctrl + Shift + I

В инструментах разработчика нажмите на значок переключения устройств (toggle
device mode), а затем установите подходящую ширину вьюпорта (окна). Это
нужно для того, чтобы макет точно ложился на страницу сайта, ведь макеты
экспортируется статичными, а ширина страницы в браузере зависит от
разрешения экрана вашего устройства.

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

Далее нажмите на иконку PerfectPixel и добавьте слой для сравнения — макет
страницы. После загрузки макета уточните размеры: на примере ниже показано,
как установить размер 1:1. Если нужно, выровняйте расположение макета по
высоте и ширине или зафиксируйте по центру.

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

Работа с PerfectPixel: загружаем слой, выравниваем его и проверяем в режиме
прозрачности или инверсии.

Что может пойти не так

Самые частые ошибки новичков при Pixel Perfect вёрстке — неправильное выравнивание слоёв, игнорирование межбуквенного интервала или высоты строк и
хаотичный порядок редактуры. Из-за этого вёрстка начинает «ползти», а
наложение вновь и вновь показывает разницу между расположением элементов.
Есть несколько способов избежать таких ошибок.

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

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

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

Насколько точным должно быть совпадение?

Сверстать сайт пиксель в пиксель с макетом невозможно и не нужно, и на это
есть причины. Одна из них — специфика отображения шрифтов в разных браузерах
и операционных системах. Например, если вёрстка в Chrome сделана точно по
образцу, то в Safari элементы могут отличаться.

Резиновая вёрстка тоже не позволяет достичь полного сходства. Причина в том,
что дизайнер готовит макеты только в нескольких размерах. Например, 320px
для мобильной версии, 768px для планшета и 1440px для экранов компьютеров.
Этого достаточно, чтобы проверить фиксированную или адаптивную вёрстку. Но
страница, которая меняет размеры элементов и перестраивает сетки в
зависимости от ширины окна браузера, на промежуточных состояниях будет
отличаться от макета.

Дизайнер подготовил макеты только для двух разрешений: 320px и 1920px. Так
как других макетов нет, разработчику не с чем сравнивать отрисовку сайта на
промежуточных состояниях.

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

Не пытайтесь добиться идеального совпадения: в реальной коммерческой
разработке допускаются небольшие расхождения в отступах. Например,
горизонтальная погрешность до 1-2px и вертикальная до 5px. Важнее научиться
понимать сам принцип использования PerfectPixel.

Научиться концепции Pixel Perfect можно на профессии «Фронтенд-разработчик».
Под контролем личного наставника вы создадите сайты, которые соответствуют
концепции Pixel Perfect и требованиям коммерческой разработки.

пример нарезки макета для верстки – Zencoder

В Интернете существует (на момент написания статьи) мало материалов с примерами как нарезать макет в Photoshop. Для новичков-верстальщиков этот факт является камнем преткновения.

И хотя на форумах, посвященных web-дизайну, много говориться о том, что … да там все просто — нечего учитьcite>, … в сети полно информации по этому вопросуcite>, но на самом деле это не совсем так. Я могу судить об этом по самом себе. Мне потребовалось немало времени, чтобы самому разобраться и докопаться до процесса нарезки.

В этой статье я постараюсь описать нарезку макета на примере одного из его объектов и тем самым внести посильную помощь в процесс освоения верстки. Думаю, данная статья будет полезна для новичков, каким я был совсем недавно сам.

Итак, у нас имеется psd-макет, созданный неким “гением” web-дизайна:

Как и положено, макет представлен в формате psd (в исходном коде) со всеми слоями так, как нарисовал его дизайнер.

Нам необходимо вырезать логотип будущего сайта. В данном случае это красивая цветастая напись POLO360. Видим, что логотип состоит из двух текстов — самого POLO360 и нижней строки “My kind of business blog”. Также имеется некое графическое изображение (слева от надписи), которое также является частью логотипа. В сумме все эти объекты являются одним целым и представляют логотип сайта.

Вот нам и предстоит задача вырезать его. Первым и самым трудным делом является нахождение всех слоев, отвечающих за прорисовку логотипа. Для этого нужно выбрать инструмент “Move Tool (V)”. В панели инструментов Photoshop необходимо проверить, что стоит галочка в разделе “Auto — Select”:

Это необходимо для того, чтобы при выделении объекта на макете в Палитре слоев автоматически выделились все слои, отвечающие за отрисовку данного объекта. Другими словами — так проще искать нужные слои при нарезке.

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

Но такое бывает редко и слои разбросаны по палитре как попало. нам необходимо методом “научного тыка” найти нужные нам.

Для этого открываем (если еще не открыли) Палитру слоев и пробуем отключать или включать отображение слоя, щелкая мышью на значке “глаза” слева от названия слоя. Тем самым, мы проверяем, входит ли этот слой в состав нужного объекта или нет. Как только находим нужный слой, то отмечаем его цветом, чтобы потом не потерять.

Когда все слои найдены, картина в “Палитре слоев” будет примерно такой:

Теперь объединяем отмеченные нами слои. Для этого держим зажатой клавишу Ctrlkbd> и выделяем каждый из слоев одинарным щелчком мыши. Получаем следующую картину:

Далее необходимо объединить выделенные слои в один. Другими словами, мы сведем нужные нам слои в один и в результате изображение (в нашем случае — логотип) будет цельным. Только так мы можем вырезать его впоследствии. Для объединения слоев щелкаем правой кнопкой мыши на любом из выделенных слоев и в открывшемся контекстном меню выбираем “Merge Layers”:

Видим такую картину:

Несколько слоев слились в один. Все, теперь мы готовы к нарезке.

Выбираем в панели инструментов “Rectangular Marquee Tool(M)” и обводим логотип произвольным прямоугольником:

Теперь копируем выделенную нами область — нажимаем на клавиатуре комбинацию клавиш Ctrl+C.

Создаем в Photoshop новый документ — нажимаем Ctrl+N. Откроется новая вкладка с диалоговым окном настройки создаваемого документа:

Здесь самым важным является поле “Preset”. В его значении должно стоять “Clipboard (Буфер обмена)”. Если все было сделано правильно, то Photoshop автоматически создаст новый документ с размерами той области, которую мы скопировали. Размеры программа возмет из “Буфера обмена”, куда была помещена выделенная нами область. Остальные параметры для нас неважны. Нажимаем ОК.

Появится новая вкладка, но пока еще пустая. Точнее, в ней уже будет создан документ с указанными в диалоговом окне размерами. Но ничего, кроме белого фонового изображения, этот документ содержать не будет:

Нам осталось вставить в этот документ выделенную область, которая все еще находится в “Буфере обмена”. Для этого нажимаем на клавиатуре Ctrl+V. Результат:

Как видим, Photoshop автоматически обрезал изображение так, чтобы не было пустых областей вокруг него (ведь при выделении мы создали произвольный прямоугольник — лишь бы выделить логотип).

Однако, белый фон остался. А он нам совсем не нужен. Это делается очень просто. Переводим взгляд на “Палитру слоев”” и видим там всего два слоя: “Layer 1” и “Background”. Слой “Layer 1” — это вставленная нами область, а “Background” — фоновое изображение. Щелкаем мышью на значке “глазика” напротив слоя “Background”:

Само изображение в окне Photoshop изменилось — вместо белого фона появилась шахматная “доска”. Это говорит о том, что фоновый слой у нас теперь прозрачный.

Теперь нам осталось только сохранить отредактированное изображение. Переходим в меню “File — Save for Web”:

Здесь нам нужны два поля.

Верхнее — для выбора формата сохраняемого файла. В Интернете имеются подробные описания, как выбрать нужный формат. На самом деле все просто. Формат GIF имеет поддержку прозрачного фона, но не имеет поддержки передачи градиентов. Формат JPEG наоборот, хорошо передает плавные переходы цветов (градиент), но у него отсутствует прозрачный фон. Формат PNG-8 очень похож на GIF, только имеет лучший алгоритм сжатия. Формат PNG-24 имеет как поддержку градиентов, так и прозрачный фон (по другому называется — прозрачные пиксели). В нашем случае нам нужен как градиент, так и прозрачный фон, поэтому выбор однозначен — PNG-24.

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

Все, сохраняем файл с выбранными настройками и задаем ему имя — logo.png.

На этом обзор примера нарезки макета в программе Photoshop заканчиваю. Думаю, он был достаточно полным и понятным.

photoshop

10 полезных замечаний и советов

Примеры ниже написаны с использованием соглашения по именованию селекторов БЭМ, препроцессора Sass и шаблонизатора Jade.

Code-review для верстки часто пренебрегают, отчасти, возможно, из-за сложившегося стереотипа, что верстать нужно, набрав побольше воздуха, зажмурившись и раскидываясь хаками и костылями, пока не будет достигнута та самая неуловимая кроссбраузерность. А поддерживать чужую верстку — только человеку с крепкими нервами и достаточным запасом медикаментов.

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

Ошибка 1: Не продумана структура проектной папки

Довольно часто верстальщикам ставят задачи постранично и макеты предоставляют тоже постранично. Это иногда порождает иллюзии, что работы мало и вся верстка будет прекрасно себя чувствовать в 2–3 папках, а если нет, то всегда найдется время поправить структуру. Но чем больше блоков и страниц сверстано, чем ближе к релизу и чем больше страниц / компонентов уже интегрировано, тем сложнее что-то изменить.

Предлагаю с первого же коммита поддерживать прозрачную структуру. Вот пример структуры проектной папки, которую мы использовали на зимней стажировке 2016:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Совсем необязательно в точности копировать эту структуру, достаточно обратить внимание на ряд моментов:

1. Вспомогательные документы, блоки и страницы живут отдельно

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

В scss общие стили типа reset, или подключения шрифтов, или лейаута верхнего уровня стоит также хранить отдельно от стилей для страниц и блоков. Также целесообразно импортировать все в один документ (например, main.scss) и только этот документ компилировать в css. По объективным причинам таких документов может быть несколько (например, из-за ограничения по количеству селекторов / весу css-документа в IE9 или для поставки специфических стилей для редко встречающихся устройств отдельно от основного документа), но, как и с Jade, не стоит компилировать все подряд.

2. Jade-блоки = БЭМ-блоки

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

В итоге в коде index.jade и других страниц должна быть строчка, указывающая на базовый шаблон, возможно, 1–2 тега верхнего уровня, инклюды и вызов миксинов.

Например:

extends ../0_base/_base.jade

block main
    .main.main--wide
        include ../1_blocks/banner.jade

3. Scss зеркалит Jade

Если в Jade-директории blocks есть какой-то документ, то стили для него должны находиться в Scss-директории blocks в документе с таким же названием.

Например, согласно структуре, указанной выше, стили для jade/1_blocks/header.jade должны лежать в scss/3_blocks/header.scss, а не где-то еще. Если следовать этому простому правилу, то вносить изменения будет удобно всем разработчикам на проекте, даже новым.

Для тех, кому необходимо запушить структуру проектной папки сразу после создания (т.е. когда большая часть папок пуста), напоминаю про существование .gitkeep, документа, который позволит гиту «затрекать» вашу пустую директорию.

Добавить .gitkeep во все пустые папки можно с помощью этой команды:

find . -type d -empty -not -path '*/\.*' -exec touch {}/.gitkeep \;

После заполнения папок не забудьте удалить ненужные .gitkeep.

Ошибка 2: копипаста есть, комментариев нет

С копипастой нужно быть особенно аккуратным: вдумчиво все перечитать, исправить «под проект» и удалить лишнее. Однажды мне встретилось:

<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">

, при этом обычный <title> содержал совершенно другую строку :).

Не важно, делаете вы редизайн или используете решение из интернета, пока копипаста не будет переработана, рядом с ней должен быть комментарий с TODO, чтобы:

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

Например:

<!-- TODO: change content attribute  -->
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">
<!--  -->

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

.block {
    font-size: 1.2 rem;
    …
    font-size: 18px;
}

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

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

Ошибка 3: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

Великая сила амперсанда в Sass позволяет писать стили по БЭМ и делать это еще нагляднее. Такой код:

.block {
    font-size: 1.2rem;
    &--dark {
        background: #000;
    }
    &__element {
        text-aling: center;
        &--big {
            width: 100%;
        }
        .ie9 & {
            &::before {
                content: 'hello ie'
            }
        }
    }
}

Будет скомпилирован в:

.block {
    font-size: 1.2rem;
}

.block--dark {
    background: #000;
}

.block__element {
    text-aling: center;
}

.block__element--big {
    width: 100%;
}

.ie9 .block__element::before {
    content: "hello ie";
}

Когда есть такой удобный инструмент, даже речи быть не может о повторе и переопределении стилей для одного блока. Если селектор .block уже написан в каком-то документе, то в другом документе его быть не должно. Встретиться снова этот селектор может только в медиазапросе (причем, за редким исключением, медиазапрос должен находиться в этом же документе), подробнее о медизапросах поговорим чуть позже.

Блок — это отдельный компонент, который не знает о других блоках и их расположении.

«Блок — логически и функционально независимый компонент страницы, аналог компонента в Web Components… Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.» (источник)

Такой код будет ошибочным, т.к. состояние одного блока влияет на элемент в другом блоке:

.block {
    &:hover .another-block__element {
        color: red;
    }
}

Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

Ошибка 4: не использовать миксины, когда можно использовать миксины

Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Также советую обратить внимание на плейсхолдеры, которые, к сожалению, мне пока не встречались в верстке новичков.

В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Ошибка 5: беспорядок в медиазапросах

Частая ошибка — смешивать mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width,  используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.

Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:

@media (min-width: 1024px)

должно получиться:

$laptop-landscape: 1024px;

@media (min-width: $laptop-landscape)

Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой).

В scss есть возможность вкладывать медиазапросы в правила. Например:

.block {
    width: 100%;
    @media screen and (min-width: 768px) {
        width: 60%;
    }
}

Это будет скомпилировано в:

.block {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .block {
        width: 60%;
    }
}

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

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

Ошибка 6: не интересоваться UX-проектированием

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

Для начала предлагаю обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт. Чтобы такого не происходило с вашими пользователями, советую почитать гайдлайны от Google или SmashingMagazine.

Ошибка 7: все в пикселях, даже font-size

Советую сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

• размер шрифта и высота строки,
• размеры иконок,
• размеры кнопок,
• вертикальный ритм.

В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

1. em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,
2. rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаю обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

Также с псевдоэлементами и em стоит быть осторожней:

«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

Ошибка 8: не думать о переполнении и предельных значениях

Верстая по макету, мы имеем дело с идеальной ситуацией. Так новички довольно часто забывают про угрозу переполнения, т.е. когда контент не помещается в блок или элемент и выходит за его пределы. Эту ситуацию нужно срочно исправлять, ведь верстальщик — это еще и своего рода переводчик интерфейса с языка дизайнерского на язык, понятный программистам. Поэтому очень важно в процессе верстки выявить предельные значения объема текста для кнопок, заголовков и прочих элементов с ограниченной вместимостью. Об этих предельных значениях стоит сообщить разработчикам (как минимум написать комментарий в HTML) и по возможности ограничить переполнение в css:

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

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

Идёт загрузка… Если ничего так и не загрузилось, то посмотрите пример здесь.

Можно также с надеждой смотреть в сторону object-fit, однако у этого свойства пока довольно слабая поддержка.

Ошибка 9: уделять недостаточно внимания графике

Графику обычно делят на 3 части: иконки, изображения контента, фоновые изображения. С фоновыми изображениями у новичков обычно проблем не возникает,  а вот с иконками и контентными изображениями все не так хорошо.

Сегодня стоит предпочесть svg-спрайты иконочным шрифтам, если нет требований к поддержке совсем старых версий IE. Подробное сравнение двух подходов можно прочитать тут и тут. SVG-спрайт тоже можно кешировать, т.е. можно ссылаться на внешний файл, если набор иконок большой и повторяется от страницы к странице. Для кешируемых спрайтов есть полифил, добавляющий поддержку в IE. А в одностраничных приложениях спрайт обычно добавляется в базовый шаблон.

Контентные изображения, например, фото товара, — главная причина большого веса сайтов. На десктопах (особенно на экранах с большой плотностью пикселя) нам нужны изображения в большом разрешении. Их вес обычно не вызывает проблем, т.к. в основном десктопы используют высокоскоростные подключения с неограниченным трафиком. Пользователи мобильных устройств же вынуждены выкачивать лишние мегабайты изображений. А если у них низкая скорость передачи данных, бывают обрывы? Получаем не очень довольных пользователей. Остается только надеяться, что они не в роуминге. Эту ситуацию легко исправить с помощью атрибута scrset у <img> или с помощью тега <picture>. Постепенно поддержка этих возможностей становится лучше, а для старых браузеров есть полифил. Для подробного ознакомления с техникой поставки разных контентных изображений для разных устройств советую бесплатный курс «Responsive images» от Udacity.

Ошибка 10: Pixel Perfect? Не, не слышал.

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

В случаях, когда нет причин отклоняться от макета, стоит четко ему следовать (помочь в этом может, например, расширение для Chrome — Pixel Perfect).

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

За материал выражаем благодарность международной IT-компании Noveo.

Оценить

Графические редакторы | Основы современной вёрстки

Изучение вёрстки — это не только познание способов стилизации элементов, но и вёрстка макетов. Чтобы начать верстать макеты, их нужно как-то увидеть и понять, как с ними работать.

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

1. Adobe Photoshop. Самый старый редактор, который был стандартом много лет. Сейчас же отступает на второй план ввиду своей сложности в освоении. Перегрузка различными функциями также не красит его — многие функции просто не нужны для верстальщика, но память устройства они благополучно съедают. Редактор доступен на системах под управлением Microsoft Windows и macOS. Официальной версии под системы Linux сейчас нет.
2. Gimp. Аналог Photoshop для систем Linux. Имеет схожий функционал и может корректно открывать некоторые файлы в формате Photoshop. Но не стоит надеяться, что он может стать полноценной заменой. Если дизайнер присылает исходники в Photoshop, то нет полной уверенности в корректном открытии файла через Gimp. Так же, как Photoshop, Gimp не является специализированным инструментом для веб-дизайнеров, поэтому многие функции не нужны.
3. Sketch. Специализированный редактор для проектирования мобильных и веб интерфейсов. Это является большим плюсом, так как разработчики ориентируются именно на удобное проектирование интерфейсов. Для верстальщиков здесь множество плюсов: удобный просмотр макета, размеров, отступов и другой информации, которая поможет при переносе макета. Главным минусом редактора является поддержка одной операционной системы — macOS. Разработчики ориентированы на работу только с этой системой, и переноса редактора на другие ОС не ожидается.
4. Figma. Редактор, который работает в браузере. Просмотр макетов в нём доступен с любого устройства, которое имеет браузер и выход в интернет. Если ваша кофемолка умеет это, то можно верстать и с её помощью. Редактор, как и Sketch, ориентирован на создание интерфейсов, что положительно сказывается на удобстве работы с ним. Именно этот редактор используется для проектов и некоторых испытаний, где вам даётся макет для вёрстки. Также является бесплатным для личного пользования.

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

В этом уроке мы рассмотрим базовые действия при работе с редактором Figma

Установка

Как и было сказано выше, Figma не требует установки. Её работа осуществляется через браузер. Достаточно перейти на сайт figma.com и зарегистрироваться.

Помимо этого есть возможность поставить отдельное приложение. Это скорее вопрос удобства, так как вместо вкладки вы получите отдельное окно для работы с редактором. Сейчас приложение доступно для операционных систем Windows и macOS. Скачать их вы можете на странице загрузки Figma.

Используйте тот вариант, который вам удобен.

Работа с макетом

В этом разделе посмотрим на основные действия при работе верстальщика с редактором. В качестве примера будет использован шаблон испытания Hero Section курса CSS: Flex.

1. Зарегистрируйтесь в сервисе Figma. Это позволит вам удобно просматривать элементы макета.
2. Откройте макет испытания Hero Section

Окно работы с Figma можно разбить на 4 функциональные области:

Шапка

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

Слои

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

Слои можно объединять в различные группы. Так удобно разделять слои различных частей макета. В макете Hero Section есть следующие группы:

Инспектор

Самая полезная секция для верстальщика. Инспектор позволяет увидеть все настройки выбранного элемента в секции «Слои».

Сейчас выбран текст «Фронтенд программист». Какие параметры можно получить об этом элементе:

• Properties
  • Ширина текста: 580px
  • Высота: 141px. Обратите внимание, что это значение именно текста, а не блока, в котором он лежит.
  • Значения top и left. Это значения относительно левого верхнего края макета. Чаще всего эти значения бесполезны, но бывают ситуации, когда есть смысл присмотреться к этим значениям.
• Content
  • Здесь находится тот контент, который расположен внутри слоя. Этот пункт актуален для текста. Если кликнуть по контенту, то он автоматически копируется.
• Typography
  • Font: название шрифта. Определяется свойством font-family
  • Weight: насыщенность шрифта. Определяется свойством font-weight
  • Style: стиль шрифта. Определяется свойством font-style
  • Size: размер шрифта. Определяется свойством font-size
  • Line height: межстрочный интервал. Определяется свойством line-height
• Colors
  • Здесь можно увидеть цвет элемента. При клике можно скопировать значение цвета.
• CSS
  • Здесь находится автоматически сгенерированный CSS для выбранного элемента. Не стоит полагаться на эти значения, так как многие свойства используются некорректно. Например, значения позиционирования.

Окно просмотра макета

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

Если выбрать слой «Узнать больше», зажать клавишу Alt или cmd для macOS и навести на соседний элемент, то Figma автоматически подскажет расстояние между элементами.

По этому изображению можно сразу узнать несколько параметров элемента:

1. Размер элемента «Узнать больше» — 127×40 пикселей.
2. Расстояние от текста до элемента «Узнать больше» — 16 пикселей.

Самостоятельная работа

Используя примеры из урока, узнайте все доступные свойства основного текста:

1. Параметры шрифта
2. Цвет шрифта
3. Расстояние от текста до заголовка «Фронтенд программист»

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Макет в масштабе N для начинающих из листа фанеры

Модели железных дорог в масштабе

N по очевидным причинам часто представляют собой небольшие компоновки, основанные на листах фанеры размером 4 x 8 футов. Плоскую столешницу построить намного проще, чем скамейку с L-балкой, и почти в любом доме есть место для стола 4 x 8 с одной стороны спальни или подвала.

На одном листе фанеры сделано великое дело. Однако такая форма накладывает определенные ограничения. Интересные возможности открывает разрезание листа фанеры на две-три части.

Железная дорога Хаусатоник-Вэлли
Для этого плана пути в масштабе N один прямой и один S-образный вырез в стандартном листе фанеры дает три длинных куска фанеры, которые собираются в U-образную пешеходную дорожку размером 8 x 9 футов. в макете. Использование кривых 9-1 / 2 ″ и 11 ″ позволяет нам спланировать петли на концах двух полуостровов для базовой конструкции собачьей кости. Размещение железной дороги на холмистой местности Новой Англии дает нам основание скрыть обратный путь и даже пару промежуточных путей под засаженными деревьями холмами вдоль внешних краев схемы.(Если вы строите этот план вдоль стен, обязательно сделайте холмы съемными для доступа.)

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

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

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

Industries в долине Хаусатоник помогает создать ощущение места.В морском порту в Истпорте есть рыбацкая лодка, пришвартованная к консервному заводу, склад и командная трасса. Льняной завод, гравийный карьер, чугунолитейный завод и маслозавод представляют собой отрасли, характерные для этого района, а осенняя листва, дома в стиле Кейп-Код и крытый мост через железнодорожные пути возле Миддлборо вызывают известные достопримечательности Новой Англии.

В одном углу плана есть еще одна общая достопримечательность Новой Англии — небольшая плотина гидроэлектростанции. Хитрость здесь в том, что уровень воды в верхнем резервуаре на самом деле находится выше скрытой дорожки.Самый простой способ смоделировать эту воду — использовать промышленный пластиковый водяной лист. Только не забудьте покрасить дно или подкладку непрозрачным материалом, чтобы ваши гости не видели поезда, движущиеся через шкафчик Дэви Джонса!

Из статьи «Три пути на один лист фанеры» модели железной дороги от августа 2008 года.

Щелкните здесь, чтобы получить версию плана пути в формате PDF.

Обзор маршрута

Название: Housatonic Valley Ry.
Масштаб: N (1: 160)
Размер: 8 x 9 футов
Прототип: внештатный
Регион: Новая Англия
Эра: 1930-е годы
Стиль: Walk-in
Mainline пробег: 43 фута
Минимальный радиус: 9,5 ″
Минимальная стрелка: шт. 5
Максимальная оценка: нет

Предлагаемые конструкции

Рыболовное судно: Sea Port Model Works h214N 83-футовый контейнеровоз для сардин
Консервный завод Seagold: GC Laser 507 Brennon Seed Co.
Склад в Истпорте: Американские конструкторы моделей 604 передаточное здание
Герберт Миллс: Wm. K. Walthers Modulars наборы 933-3295 и 933-3283
Насадка для гравия: Wm. K. Walthers 933-3241 Glacier Gravel Co.
Крытый мост: GC Laser 418
Patriot Ironworks: Model Power 1546 Holland Iron & Steel, 1573 National Casket и 2608 General Electric Co.
Aardmore Coal & Lumber: Филиалы 893 Valley Fuel & Supply

Макет инфографики для начинающих почти на все

Вы можете узнать что-то новое в любой момент своей жизни, если хотите быть новичком.Если вы действительно научитесь любить быть новичком, весь мир откроется вам. — Барбара Шер

Тебе нужно где-то начать, а?

Пуск не из легких. Будь то создание бизнеса, освоение новых навыков или знакомство с новыми людьми, выходить из зоны комфорта… ну, неудобно. Многие из нас не хотят уезжать оттуда. Знакомо. Это уютно. Мы знаем мысли и чувства, которые находятся в этой зоне. Мы знаем, какая там жизнь.

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

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

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

Эти шаблоны:

1 — Доска Presenta

2 — 2015 Постановление

Приступим!

Использование Presenta Board для представления данных или информации

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

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

Вот как мы это сделаем, и вы тоже можете выполнить эти простые действия.

Сначала запустите Piktochart и войдите в свою учетную запись. Как только вы войдете, используйте панель поиска, чтобы найти Presenta Board, и нажмите «Создать».Как только вы это сделаете, не забудьте назвать это!

Следующий очень важный шаг — изменение заголовка. Это то, что привлекает внимание читателей и побуждает их использовать ваш контент. Просто дважды щелкните заголовок, который есть прямо сейчас, и замените существующий заголовок своим собственным. Он должен быть кратким, лаконичным и отражать суть вашей инфографики!

А теперь давайте продолжим спускаться по лестнице. Второй шаг — настройка остального содержимого.Это очень просто и делается точно так же, как и с заголовком. Просто помните, что все должно быть кратко и лаконично. Инфографика должна быть наглядной. Старайтесь держаться подальше от текста, так как изображения лучше рассказывают историю.

После того, как вы позаботились о письменном содержании, вам следует перейти к центральной части инфографики — графику. Графики — лучший способ быстро отобразить сложную информацию в очень простой для понимания форме. Piktochart имеет встроенный редактор диаграмм, в котором вы можете создавать, редактировать и изменять анимированные диаграммы прямо из вашей учетной записи Piktochart!

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

Продолжим. Теперь, когда раздел графика готов, нам нужно сосредоточиться на последнем элементе головоломки «содержание»: значка . В Piktochart есть библиотека с тысячами предварительно загруженных значков. Чтобы изменить те, что в шаблоне, просто удалите их и используйте значок загрузки слева, чтобы заменить его другим, который вам нравится!

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

Кроме того, если вам не очень нравятся цвета фона, вы можете изменить и их! Это очень просто.

Использование разрешения 2015 года для преобразования списков в красивую инфографику

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

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

Это результат преображения!

Во-первых, нам нужно выбрать шаблон Решения 2015 года.

Для начала изменим блок заголовка. Сюда входят заголовок, подзаголовок и цветные значки под ним.

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

В этом случае я воспользовался преимуществом предыдущего дизайна и выбрал «6 Delicious Paleo Foods».

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

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

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

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

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

Начните создавать прямо сейчас, зарегистрируйте для бесплатной учетной записи Piktochart, чтобы получить неограниченный доступ к творческим и профессиональным шаблонам!

Этот пост является частью сентябрьской серии макетов.Не стесняйтесь проверить это!

Руководство для начинающих по разметке сетки CSS — Medialoot

Узнайте, что такое CSS Grid Layout, как он работает и почему он облегчит вашу жизнь как дизайнера или разработчика, с помощью этого доступного введения в CSS Grid Layout. Мы рассмотрим терминологию, основные инструкции и пример макета, чтобы вы начали работу с новой сеткой.

Что такое CSS Grid Layout?

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

В отличие от предыдущих методов для веб-макета (HTML-таблицы и, в последнее время, CSS-плавающие объекты) CSS Grid Layout в двух словах позволяет вам определять сетку, состоящую из столбцов и строк, а затем указывать браузеру, где в этой сетке вы хотите, чтобы ваш HTML-контент быть отображенным … даже если это означает, что ваш контент находится в другом порядке, чем он отображается в структуре HTML.

Терминология макета сетки CSS

Сетка

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

Линии сетки

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

Столбец сетки

Столбец сетки — это вертикальная дорожка сетки или область между двумя вертикальными линиями сетки.

Строка сетки

Строка сетки — это горизонтальная дорожка сетки или область между двумя горизонтальными линиями сетки).

Ячейка сетки

Ячейка сетки — это пересечение строки и столбца, определяемое как область между 4 линиями сетки.

Область сетки

Область сетки — это область на сетке между 4 линиями сетки, такая как ячейка сетки, но может содержать несколько ячеек сетки, которые расположены рядом друг с другом.

Основные функции

Начнем с базового HTML, включая контейнер

 
 Заголовок 
 
 Боковая панель 1 
 
 Основное содержание 
 
 Боковая панель 2 
 

.сетка {
 дисплей: сетка;
 сетка-пробел: 25 пикселей;
 сетка-шаблон-столбцы: 200 пикселей 350 пикселей автоматически;
 сетка-шаблон-строки: 25% 75%;
 маржа: 25 пикселей авто;
 ширина: 800 пикселей;
 высота: 600 пикселей;
}
/ * Простой стиль * /
.grid-area {
 семейство шрифтов: Helvetica Neue, Helvetica, Arial, без засечек;
 цвет фона: # c1d798;
 цвет: #fff;
 отступ: 50 пикселей 25 пикселей;
 выравнивание текста: центр;
} 

.grid-area-1 {
 сетка-столбец: 1;
 сетка-ряд: 1;
} 

.grid-area-1 {
 начало столбца сетки: 1;
 конец столбца сетки: 4;
 сетка-начало-строки: 1;
 конец ряда сетки: 2;
} 

.grid-area-1 {
 сетка-столбец: 1/4;
 сетка-ряд: 1/2;
} 

площадь сетки: 1/1/1/4; 

сетка-шаблон-столбцы: [col-1] 200px [col-2] 350px [col-3] auto [col-3-end];
сетка-шаблон-строки: [строка-1] 20% [строка-2] 80% [строка-2-конец]; 

@media only screen и (max-width: 800px) {
 .сетка {
 столбцы-шаблон-сетки: [col-1] 100% [col-1-end];
 сетка-шаблон-строки: [строка-1] авто [строка-2] 350 пикселей [строка-3] авто [строка-4] авто [строка-4-конец];
 ширина: 90%;
 }
 .grid-area-1 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-1;
 }
 .grid-area-2 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-3;
 }
 .grid-area-3 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-2;
 }
 .gridarea-4 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-4;
 }
}