Макеты сайта psd: Где брать PSD шаблоны сайтов для вёрстки? — Хабр Q&A

29.05.2023 alexxlab

Содержание

Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет

«Я не делаю брак, я не принимаю брак, я не передаю брак»
Toyota Production System

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

Если макеты создаются в студии, то разработчик может легко уточнить у менеджера проекта или дизайнера любые вопросы, например, что конкретно имелось в виду в техническом задании, или же как в представлении дизайнера должен выглядеть итог работы. Но если заказчик уже начал с кем-то проект, а затем пришел к нашему специалисту, наладить такую коммуникацию будет невозможно. Особенно много сложностей это доставляет, когда в макетах есть ошибки, ведь исправлять их теперь некому. Каковы самые распространенные огрехи горе-дизайнеров? Что стоит проверить перед тем, как отдать макеты на верстку? Эти и другие вопросы по теме мы рассмотрим в данной статье.

Макет должен быть представлен в формате (.psd). В противном случае сайт будет отличаться от макета.
Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины . Указания значений не должны быть дробными!
Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
Слои ни в коем случае не должны быть склеены.
Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д. Допускаются элементы shape и smart-объекты с ai-элементами.

Выравнивание слоев – строго по “Rulers”. Их необходимо оставлять в макете.
“Rulers” должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.).Придерживаемся иерархии «сверху вниз» и «слева направо».
В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
Для адаптивного сайта должны быть макеты или элементы для 640px – 960px – 1200px – 1600px.
При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 ширина браузера 1000).
В дизайне должны быть «служебные страницы» (404).

Текстовое содержимое. Четкие размеры и отступы:

Необходимо использовать «родные» направляющие photoshop или готовые модульные сетки, чтобы точно определить расположение элемента на странице.
Нужно осознанно выбирать пропорции и размеры объектов и делать их кратными 10, например, 1000px, а не 998px.
Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
Не допускается растрирование текста или размещение его в smart-объекте.
Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
Все текстовые элементы должны быть сглажены методом “Windows LCD”.
Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.)

Самое главное – дизайнер должен быть верстальщиком, быть в состоянии самостоятельно сверстать то, что нарисовал (пусть и не быстро, не на 100% валидно).

Графические фишки:

Фон должны быть повторяющимся, текстурированные фоны без логики повтора не принимаются.
Все слои должны быть в нормальном режиме наложения (normal). Не допускается наличие слоев в других режимах, как то multiply, overlay и т.д.

Необходимо использовать минимум элементов, что потребуют создания графических файлов png-24 (полупрозрачность etc).
Обязательно должна присутствовать favicon.ico для сайта. Не нужно забывать про favicon для Apple.
Векторные мелкие элементы должны быть отрисованы согласно однопиксельной сетке.
Настоятельно рекомендуется выстраивать отступы между элементами, чьи значения кратны 10, в отдельных случаях – кратны 5.

Исходные материалы макета

Макет в формате PSD
Шрифты
Исходные изображения

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

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

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

23.04.2018 Заказчику 18319 Автор:

Команда Peppers Digital Вебмастер Процесс

Перенести готовый макет сайта из PSD в Figma • фриланс-работа для специалиста • категория Дизайн сайтов ≡ Заказчик Елена Сигида

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

6 из 6

проект завершен

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

Всем доброго времени суток!

Техническое задание довольно простое, Есть готовый макет в PSD , его нужно перенести в Figma

задание очень срочное, жду ваших предложений по цене и срокам.

Отзыв заказчика о сотрудничестве с Тарасом Липаком

Перенести готовый макет сайта из PSD в Figma

Качество

Профессионализм

Стоимость

Контактность

Сроки

Замечательный специалист, с которым очень приятно работать! Очень оперативно и быстро, я честно говоря не успевала заходить проверять сообщения:) Рекомендую к сотрудничеству!

Отзыв фрилансера о сотрудничестве с Еленой Сигидой

Перенести готовый макет сайта из PSD в Figma

Оплата

Постановка задачи

Четкость требований

Контактность

Елена четко дала понять что ей нужно. Приятна в общении, рекомендую!

Тарас Липак | Сейф

Ставки 21
Обсуждение 2

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

ставка скрыта фрилансером
1 день100 UAH
1 день100 UAH
Здравствуйте
Сделаю в течении 3-х часов
Пришлите пожалуйста макет в личку
1 день1000 UAH
1 день1000 UAH
Елена, добрый день
Я прекрасно владею Figma) Все работы выполняю в этой программе.

Я могу качественно перенести макет с PSD.
Можно ли пересмотреть этот макет?
Все сделаю на сегодня.
Буду рад обсудить все детали и принять участие в выполнении вашего проекта.
… Я жду вашего ответа!
Елена, доброго дня.
Чудово володію Figma) Всі роботи виконую у цій програмі.
Зможу якісно перенести макет із PSD.
Можна переглянути даний макет?
Все виконаю за сьогодні.
Радий буду обговорити усі деталі та взятися за виконання вашого проекту.
… Чекаю на вашу відповідь!
Показать оригинал
Перевести
2 дня500 UAH
2 дня500 UAH
Здравствуйте, Елена!
С радостью выполню ваш проект с PSD в Figma
Сделаю быстро и качественно.
Какой объем работы?
Очень хочу взяться за ваш заказ
Freelancehunt
фрилансер больше не работает на сервисе
фрилансер больше не работает на сервисе
2 дня650 UAH
2 дня650 UAH
Добрый день, Елена.
Имею опыт работы в Figma, смогу быстро и качественно перенести psd в Figma.
Готов обсудить цену, время в личной беседе и приступить к работе сразу же!
1 день400 UAH
1 день400 UAH
Елена, добрый день!
Есть опыт в Figma! Перенесу всё в точности до пикселя. Если экранов не много, справлюсь за вечер.
Пришлите макет в лс для ознакомления.
Telegram: @sensz1lla
E-mail: [email protected]
ставка скрыта фрилансером
Победившая ставка1 день500 UAH
Победившая ставка1 день500 UAH
Елена, добрый день.
Отлично владею фигма, работаю только в ней.
Можно посмотреть на макет для оценки сроков? Если не очень сложный — за 2-3 часа справлюсь.
В конце именую и групирую слои, передаю готовый макет верстальщику!
1 день123 UAH
1 день123 UAH
Здравствуйте, Елена. Хотелось бы взглянуть на макет для оценки времени и стоимости. Одна из моих работ в фигме вот: https://www.figma.com/file/E2tTozUouOLwWTZ3w6j3J2Vp/Kyivbus?node-id=0%3A1
Остальное портфолио: https://volotkovsky.tilda.ws
Тел.: (066) 483-16-82
E-mail: [email protected]
Behance: Behance
2 дня750 UAH
2 дня750 UAH
Добрый день!
С радостью возьмусь за реализацию Вашей идеи.
Так как уже сталкивался с такой работой
Примеры моих работ:
Behance
Мой сайт http://lychov.com/
_________________________________
Напишите мне, чтобы уточнить детали
фрилансер больше не работает на сервисе
ставка скрыта фрилансером
1 день500 UAH
1 день500 UAH
Добрый день, Елена!
Буду рад выполнить Ваше задание. Хотелось бы увидеть макет, с которым нужно работать. Если мое предложение Вам интересно, прошу прислать его (макет) в личку для более точной оценки стоимости и сроков.
Портфолио: Freelancehunt
1 день123 UAH
1 день123 UAH
Здравствуйте, Елена!
Есть опыт выполнения подобных проектов.
Если срочно — не буду тратить время на красноречие. Готов приступить!
Цену и сроки назову когда увижу макет, обсудим детали (если надо будет).
С уважением, Артур.
ставка скрыта фрилансером
1 день300 UAH
1 день300 UAH
Доброго времени суток! С заданием ознакомилась и готова приступить к работе, отнесусь со всей ответственностью. Работаю до полного утверждения.
Портфолио: Behance?
Skype: alena_alena474
Email: [email protected]
фрилансер больше не работает на сервисе
1 день300 UAH
1 день300 UAH
Добрый день, Елена!
Буду рада выполнить Ваше задание. Есть большой опыт в Figma. Хотелось бы увидеть макет, с которым нужно работать. Если мое предложение Вам интересно, прошу прислать его (макет) в личку для более точной оценки стоимости и сроков. Могу приступить к работе прямо сейчас.
Буду очень рада сотрудничеству!
фрилансер больше не работает на сервисе

3 года назад
289 просмотров
15 бесплатных шаблонов макетов веб-сайтов
Последнее обновление 7 января 2023 г. , автор: Farnaz
Бесплатные шаблоны макетов веб-сайтов. Если вы дизайнер, вы знаете, что трудно показать клиентам, что ваш веб-сайт адаптивен, без фактического кодирования.
Неудивительно, что готовые макеты идеально подходят для улучшения и демонстрации ваших дизайнерских работ. Однако найти подходящие бесплатные шаблоны мокапов для дизайнеров может быть сложно, особенно когда вы сталкиваетесь с жесткими сроками. Чтобы помочь вам найти эти дизайнерские ресурсы, мы собрали 15 лучших бесплатных веб-сайтов с мокапами для дизайнеров прямо сейчас.
Просто загрузите один из этих бесплатных адаптивных макетов веб-сайтов и добавьте свой законченный дизайн.
Содержание
1. Экран рабочего стола с макетом презентации веб-сайта
Получить шаблон
2. Бесплатные макеты сайта в формате PSD
Получить шаблон
3.
Бесплатный макет веб-сайта экрана монитора 90 022
Получить шаблон
4. Макет экрана ноутбука psd
Получить шаблон
5.
Макбук с макетом веб-сайтов
Получите шаблон
6.
Бесплатная рабочая станция Макет
Получите шаблон
7. Адаптационный комплект для изменения размера для Adobe XD
Если вы предпочитаете работать в Adobe XD, тогда этот отзывчивый комплект является идеальным выбором. Набор содержит различные мокапы для настольных компьютеров, планшетов и смартфонов. Вы найдете три больших экрана для настольных компьютеров, три экрана для настольных компьютеров, одно наложение для рабочего стола, три экрана для планшетов, три экрана для мобильных устройств и один шаблон экрана для наложения мобильных устройств.
Получить шаблон
8. Шаблон макета веб-сайта
Получить шаблон
9.
Бесплатный макет веб-сайта для браузера
Получить шаблон
10. Современное и минимальное свободное разрешение ponsive Photoshop Mockups
Адаптивный макет на list — отличный выбор, так как он имеет минималистичный дизайн. Это означает, что фон макета не будет отвлекать внимание от дизайна сайта. Макет включает в себя различные устройства Apple. Вы можете использовать его в личных и коммерческих проектах, при этом требуется указание авторства.
Получить шаблон
11. Бесплатный шаблон макета веб-сайта
Получить шаблон
12.
Бесплатный макет веб-сайта для ноутбука
Получить шаблон
13.
Бесплатный макет современного планшета для веб-сайта
Получить шаблон
14. PSD-шаблон мокапа
Получить шаблон
15.
БЕСПЛАТНЫЙ макет, адаптирующийся под различные устройства
Этот макет состоит из 10 файлов PSD и не требует использования старых или профессиональных редакторов. Редактирование фотографии занимает всего несколько секунд. Вы можете увидеть удивительные картинки, настраиваемые цвета фона.
Получить шаблон
Если вам нужно больше ресурсов для макетов, ознакомьтесь с этими сообщениями:
23 Бесплатный мобильный макет для PSD
30 лучших и бесплатных макетов ноутбуков
35 бесплатных макетов постеров и рамок для Photoshop
20 макетов обложек книг для Photoshop
9422 Веб-сайт + макет Графические шаблоны — Envato Elements
9422 Веб-сайт + макет Графические шаблоны — Envato Elements
Все элементы
Графические шаблоны
Уточнить по
Категории
Шаблоны для печати
56
Макеты продуктов
5 173
Веб-сайты
3 943
Наборы UX и UI
2 298
Инфографика
56
Логотипы
39
Генераторы сцен
937
Цветовое пространство
RGB
8 961
CMYK
205
Ориентация
Пейзаж
6 360
Портрет
1 646 90 003
Square
589
Поддерживаемые приложения
Adobe Photoshop
8 601
Adobe Illustrator
2 790
Adobe InDesign
1,129
Adobe XD
1,815
Figma
1,555
Sketch
1,5 33
Свойства
Вектор
2 435
Слоистый
9 168
Уточнить по
9 0094
Категории
Шаблоны для печати
56
Мокапы продуктов
5 173
Сайты
3 943
90 002 Наборы UX и UI
2 298
Инфографика
56
Логотипы
39
Генераторы сцен
937 9000 3
Цветовое пространство
RGB
8,961
CMYK
205
Ориентация
Пейзаж
6 360
Портрет
1 646
Квадрат
589
Поддерживаемые приложения
Adobe Photoshop
8 601
Adobe Illustrator
2 790
Adobe InDesign
1 129
Adobe XD
1 815
Figma
1,555
Sketch
1,533
Свойства
Vector
2,435
900 02 Многослойный
9 168
Сортировать по релевантнымПопулярнымНовым
7 Мокапы веб-сайтов
По zippypixels в графических шаблонах
Добавить в коллекцию
Скачать
Мокап веб-сайта The Perspective
Автор KL-Webmedia в графических шаблонах
Добавить в коллекцию
Скачать
Макет сайта
Автор: IanMikraz in Graphic Templates
Добавить в коллекцию
Скачать
9000 2 Мокап адаптивного веб-сайта
Автор: GraphicGata in Graphic Templates
Добавить в коллекцию
Скачать
Макет браузера веб-сайта 2. 0
By Finestgraph in Graphic Templates
Добавить в коллекцию
Скачать
Мокап адаптивного сайта
Автор: GraphicMonday в Графических шаблонах s
Добавить в коллекцию
Загрузить
Сайт для нескольких устройств Мокап
By Syifa5610 in Graphic Templates
Добавить в коллекцию
Скачать
Мокап сайта для нескольких устройств
By maulanacreative в графических шаблонах
Добавить в коллекцию
Скачать
Адаптивный макет сайта 1.0
Автор Creefty в графических шаблонах
Добавить в коллекцию
Скачать
Шаблон макета веб-сайта для ноутбука
Автор: EightonesixStudios in Графические шаблоны
Добавить в коллекцию
Скачать
Окно браузера Edge – Макет веб-сайта
By merkulove in Graphic Templates
Добавить в коллекцию
Скачать
Мульти-устройства Отзывчивые макеты сайтов
By design2mgraphics в графических шаблонах
Добавить в коллекцию
Скачать
9 0098
Адаптивный макет веб-сайта для нескольких устройств
Автор one_zero в графических шаблонах
Добавить в коллекцию
Загрузить
Мокап сайта для нескольких устройств Том 3
By graphiccrew in Graphic Templates
Добавить в коллекцию
Скачать
Полная коллекция макетов адаптивных веб-сайтов 2022 года
Автор Abdelrahman_El-masry in Graphic Templates
Добавить в коллекцию
Скачать
Отзывчивый макет веб-сайта для нескольких устройств V. 3
AuthenticMockup в графических шаблонах
Добавить в коллекцию
Скачать
Мокап дизайна веб-сайта
Автор artchiles_design в графических шаблонах
Добавить в коллекцию
Скачать
Макет отображения веб-сайта
Автор RGraphicsDesign_NT в Графические шаблоны
Добавить в коллекцию
Скачать
Макет макета сайта для смартфона
Автор megostudio in Graphic Templates
Добавить в коллекцию
Скачать
Мокап страницы пользовательского интерфейса веб-сайта
Автор arisgaucho in Graphic Templates
Добавить в коллекцию
Скачать
Веб-сайт – Креативный макет шаблона
Автор: designesto in Графические шаблоны 02
Автор: dhrubok in Графические шаблоны
Добавить в коллекцию
Скачать
Tomatus-Restaurant User Website & Dashboard UI Kit
By DigitalHeaps in Graphic Templates
Добавить в коллекцию
Download
Мокап экрана ноутбука
By itscroma in Graphic Templates
Добавить в коллекцию
Download
Мокап серой футболки
Автор VictorThemes в Графические шаблоны
Добавить в коллекцию
Скачать
Фотореалистичный макет iPhone
Автор Pixflow in Graphic Templates
Добавить в коллекцию
Скачать
Мокап адаптивных экранов
By QalebStudio в Graphic Templates
Добавить в коллекцию
Скачать
Desktop Mockup Creator
By mocks_co в Graphic Templates
Добавить в коллекцию
Скачать
Мокап презентации в перспективе
By kylyman in Graphic Шаблоны
Добавить в коллекцию
Скачать
Телефон 6 Мокап
By vasaki in Graphic Templates
Добавить в коллекцию
Скачать
Мокапы экрана телефона
By StreetD in Graphic Templates
Добавить в коллекцию
Скачать
3D-макет веб-сайта
Автор KL-Webmedia in Graphic Templates
Добавить в коллекцию
Скачать
Мокап кофейного пончика
Автор: amris in Graphic Templates
Добавить в коллекцию
Скачать
Мокап с капюшоном
By Genetic96 в Graphic Templates
Добавить в коллекцию
Скачать
Макет браузера веб-сайта 3. 0
Finestgraph в Graphic Templates 900 03
Добавить в коллекцию
Скачать
Изометрический макет сайта
Автор KL-Webmedia в графических шаблонах
Добавить в коллекцию
Скачать
Мокап бутылки пива Amber
Автор bangingjoints в графических шаблонах
Добавить в коллекцию
Скачать
iPad Pro Mockups v3
By 2dsight in Графические шаблоны
Добавить в коллекцию
Скачать
Изометрический макет веб-сайта 7.0
Автор KL-Webmedia в графических шаблонах
Добавить в коллекцию
Скачать
Мокап сайта The Perspective
Автор KL-Webmedia в графических шаблонах
Добавить в коллекцию
Скачать
Изометрический макет сайта 1. 0
By KL-Webmedia in Graphic Templates
Добавить в коллекцию
Скачать
The Screens Website Mockup
By KL-Webmedia in Графические шаблоны
Добавить в коллекцию
Скачать
Набор 3D-макетов веб-сайта
By KL-Webmedia in Graphic Templates
Добавить в коллекцию
Скачать
Изометрический макет веб-сайта 3.0
By KL-Webmedia в графических шаблонах
Добавить в коллекцию
Скачать
Изометрический макет веб-сайта 3.0
By KL-Webmedia in Graphic Templates
Добавить в коллекцию
Скачать
Изометрический макет веб-сайта 4.