Каким должен быть PSD-макет сайта? / Студия 15
За время своей профессиональной деятельности, я работал с самыми разными макетами множества дизайнеров. Из них можно было бы выделить всего несколько примеров, с которыми было действительно приятно иметь дело.
На написание этого поста меня вдохновил ресурс Ps-etiquette. Ниже хотелось бы поделиться частью из приведенных там примеров «Ps-этикета» в подготовке макета сайта со своими дополнениями и комментариями. Вся информация предоставляется в качестве рекомендаций дизайнерам.
Сначала о проблемах
Макеты бывают разные, огромного размера (более 50 Мбайт), с мешаниной внутри в виде кучи слоев, масок и стилей, с множеством мусора в виде невидимых слоев и следами поиска идеи дизайнером. Сам дизайн в итоге может быть крутым и вызывать самые положительные эмоции заказчика и команды разработчиков, но когда верстальщик открывает исходник, то и дело слышен отчетливый шлепок ладони по лбу.
Напомню, сейчас речь идет не о тех или иных решениях дизайнера, которые могут вызывать у разработчиков депрессию, а о качестве подготовки макета.
Ниже я перечислю самые распространенные ошибки дизайнеров.
Организация файлов
Так как обычно при дизайне того или иного проекта необходимо отрисовывать несколько страниц, вопрос с организацией файловой структуры макета играет не маленькую роль.
Объединяйте логически связанные файлы в одномНе нужно разбивать на отдельные файлы различные состояния элементов страницы и форм, а так же страницы, где меняется только какая-то часть интерфейса. Все можно уместить в одном файле, разбив логически на папки.
Давайте файлам понятные именаПо названию файла разработчик должен понимать, что находится внутри, и у него не должно возникать сомнений в актуальности версии.
Делайте папку с используемыми материаламиОтдельная папка с различными исходниками очень сильно упрощает дальнейшую работу с макетом как в плане разработки, так и в плане внесения каких-либо изменений в дальнейшем.
Организация слоев в макете
Эта область самая богатая на наличие «косяков». Именно тут возникает большая часть проблем у верстальщика.
Давайте слоям именаПо возможности, максимально подробно описывайте слои в вашем макете. Это сильно повысит «читаемость» макета и избавит от возможной путаницы.
Разбивайте слои по папкамСгруппированные слои сильно упрощают навигацию по файлу, а также это позволяет быстро скрывать/показывать целые логические блоки на странице.
Удаляйте неиспользуемые слоиМножество не используемых слоев в макете приводят к хаосу и полной неразберихе. К тому же, они могут ощутимо увеличивать размер файла.
Используйте глобальные элементыНе дублируйте повторяющиеся фоновые, или иные элементы макета. Четкая структура слоев позволяет избавиться от множества лишних копий, что ведет к уменьшению размера файла.
По возможности, связывайте друг с другом слои, которые при любых обстоятельствах должны оставаться вместе. Это могут быть различные многосоставные пиктограммы, списки с иконками и т.п.
Используйте только «Нормальный/Обычный» режим наложения слоев. Если для каких-либо целей вам нужно использовать другой режим, то позаботьтесь о возможности сохранения такого элемента дизайна для браузера.
Шрифты
Шрифты для WEB — это отдельная и большая тема. С ними связано множество сложностей и подводных камней, начиная с некорректного отображения после конвертации для использования в браузере и заканчивая лицензионными соглашениями, в случае платных версий. Ниже приведу ряд правил, которых стоит придерживаться дизайнеру.
Используйте целочисленные значения размеров шрифтаНет никакой веской причины использовать дробные значения, задавая размер шрифта. Так же не стоит забывать о фиксированной единице измерения в 1px.
К тому же, множество шрифтов ведут себя некорректно в браузере при подобных фокусах с размерами.
С нестандартными шрифтами возникает столько проблем, что иногда задаешься вопросом, а настолько ли он нужен? Начать можно с того, что все шрифты должны быть переконвертированы в специальные форматы для отображения в браузере. Но нужно заметить, что не все они хорошо переживают этот процесс. Поэтому, настоятельно рекомендуется использование сервиса шрифтов от Гугла. Имеющиеся там шрифты уже подготовлены и оптимизированы для браузеров.
Необходимо также обратить внимание на то, что не стоит использовать на сайте более одного нестандартного шрифта в 2-3 начертаниях, т.к. это серьезно влияет на скорость загрузки страницы.
Разделяйте текстовые блокиПодобные фокусы приводят к тому, что верстальщику приходится делать больше кликов внутри такого обобщенного текстового блока, чтобы определить стили отображения текста.
А если там используется нестандартный шрифт, которого нет в системе у разработчика, то проблем становится еще больше.
Эффекты
Относительно эффектов действует простое правило: их должно быть как можно меньше, и сами они должны быть как можно проще. В идеале, все стили должны воспроизводиться средствами CSS.
Обводка элементовОбводка элементов должна выполняться только с положением «Внутри» и «Нормальным» режимом наложения.
Заключение
В завершении хотелось бы сказать, что к выполнению любой задачи нужно подходить ответственно, особенно, если с результатами вашей работы будут иметь дело другие люди. Это простые, но очень важные нормы профессионального этикета.
Выше я привел лишь небольшой список «технических» вопросов, на которые стоит обращать внимание дизайнерам при подготовке макетов. Следование этим несложным правилам станет прекрасным показателем вашей квалификации и залогом хороших отношений с другими разработчиками 🙂
Как нарисовать сайт в Фотошопе
Если вы хотите самостоятельно создать веб-страницу, разберитесь, как сделать сайт в Фотошопе.
Adobe Photoshop — это графический редактор. В нём можно рисовать макеты и их отдельные элементы. Это достаточно долгий и сложный процесс. Веб-дизайнеры годами учатся оформлять шаблоны и верстать по ним интернет-страницы. Но простой макет может собрать любой человек. Нужны лишь базовые знания Фотошопа и фантазия.
В Фотошопе нарисовать несложный дизайн сайта под силу даже новичку
С первого раза у вас вряд ли получится оформить страницу, как у мастеров дизайна. Но нарисовать привлекательный и невычурный сервис будет вам под силу.
Немного о создании сайтов
Расшифровка некоторых терминов.
- CSS (Cascading Style Sheets) и HTML (HyperText Markup Language) — компьютерные языки, которые используются при создании веб-ресурсов. Если открыть исходный код любой страницы в интернете, там будут HTML-тэги.
- Вёрстка — компоновка и монтаж материалов из макета, превращение его в html-шаблон. От этого зависит, как располагаются объекты, красиво ли они выглядят в общей композиции, удобно ли читать текст и тому подобное.

- Слои — части макета. Они вместе составляют общую картину. Но их можно редактировать и перемещать отдельно друг от друга.
- Тело — место, где находится контент. Вокруг него может быть фон.
- Фрейм (Frame) — элемент страницы. Блок с какой-то информацией, картинкой, формой.
Сделать потрясающий сайт с нуля может только профессионал. Для этого нужно разбираться в веб-дизайне и знать HTML. Так как готовый макет надо ещё грамотно сверстать.
Но есть и более простые способы. Существуют онлайн-сервисы и программы, которые автоматически преобразуют .psd (формат файлов Photoshop) в HTML и CSS. Вам останется лишь правильно собрать шаблон.
Для использования Photoshop необязательно быть художником и разбираться во всех опциях программы. Но если вы впервые запустили её и не знаете, как вставить текст, нарисовать геометрическую фигуру, продублировать слой, поменять цвет или выделить произвольную область, стоит начать с чего-нибудь попроще. Чтобы сделать макет в Фотошопе, нужны хотя бы начальные навыки работы с утилитой и понимание базовых функций (как начертить линию, поставить направляющую, выбрать шрифт и тому подобное).
Общая информация о сетевых сервисах тоже пригодится. Сайт можно охарактеризовать по следующим критериям:
- Одностраничный. Все элементы, контент, всё наполнение ресурса находится в одном месте. На одной странице. Чтобы просмотреть содержимое сервиса, не надо переходить по ссылкам или открывать новые вкладки. При этом сам сайт может быть сколь угодно большим. В нём поместится и маленькая рекламная брошюра, и огромный роман на 600 листов.
- Многостраничный. Соответственно, включает много страниц. Это могут быть, например, «Главная», «Форум», «Гостевая книга», «Ответы на часто задаваемые вопросы», «Контакты». Для каждой из них нужно делать макет. Ещё потребуются навигация и карта сайта: отдельный раздел со ссылками на все части сервиса. Чтобы пользователь мог быстро найти нужную ему закладку.
- «Резиновый». Меняет размер в зависимости от разрешения экрана. Растягивается вместе с окном обозревателя. Надо заранее рассчитывать, как будет выглядеть сайт. Если при ширине 1300 всё отображается нормально, то в 900 пикселях часть статьи может «уехать» за границы фрейма, изображения встанут не так, как надо, а flash-анимация закроет форму для ввода.

- Фиксированный. Тело сайта не меняет размер. Самый лёгкий и практичный вариант. Чтобы страница выглядела цельной, и при расширении окна не было «пустого» места по краям, можно сделать резиновым фон.
Макет
Для начала решите, какой дизайн вам нужен. Недостаточно его просто «вообразить», а потом оформить в Фотошопе. Должно быть чёткое представление. Начертите шаблон на обычной бумаге. Не нужно перерисовывать каждую картинку. Достаточно схемы: несколько прямоугольников и кружков, которые условно обозначают элементы веб-страницы. Прикиньте, как будут располагаться фреймы, где лучше поставить логотип, куда поместить информацию для посетителей.
Посмотрите примеры страниц в интернете. Подумайте, какие из них вам нравятся и почему. Удобное ли это расположение фреймов, приятные цвета или интересный подход к оформлению. Копировать чужой дизайн не стоит. Достаточно подчерпнуть из него «вдохновение». После этого можно разобраться, как нарисовать сайт в Фотошопе.
- Создайте новый документ (Файл — Создать). Размеры подбираются с расчётом на маленькие мониторы или низкое разрешение: 1024×720 пикселей. Это ширина «информационной» части, а не всего рисунка. Если вы хотите страницу в 1100 пикселей, то надо делать документ шириной от 1300 пикселей. Длина, по сути, не фиксирована — она зависит от того, сколько контента вы хотите разместить на ресурсе. Это рекомендации, а не правила. Можете собрать большой макет, если хотите.
- Включите линейки. Нажмите Ctrl+R или перейдите в меню Просмотр — Линейки. Это измерительная шкала. Она появляется снаружи рисунка. Без неё придётся прикидывать размеры и расстояния «на глаз», что не очень хорошо скажется на конечном результате. Настроить эту функцию можно в меню Редактирование — Установки — Единицы измерения и линейки. Там лучше поменять сантиметры на пиксели, чтобы работать с одним параметром, а не высчитывать, сколько точек в одном дюйме.
- Также следует активировать сетку. Просмотр — Показать — Сетка или Ctrl+Э (отключить её можно также).
Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт. - Чтобы её настроить, перейдите в Редактирование — Установки — Направляющие, сетка и фрагменты. Там можно выбрать размер клеток, а также цвет и тип линий (сплошная, пунктирная, из точек).
Пример современного дизайна сайтов
- Установите направляющие. Между ними будет находиться основной контент-ресурса — фиксированное тело сайта. А за ними — резиновый фон. Чтобы это сделать, нажмите Просмотр — Новая направляющая. В блоке «Ориентация» отметьте пункт «Вертикальный». В поле «Положение» напишите, на каком расстояние от левого края будет находиться объект. Ориентируйтесь по шкале линейки.
- Нужны две направляющие — справа и слева от тела страницы.
Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024×720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах. - Почему 1003, а не 1024? Если сайт надо пролистывать («скроллить») вниз, в браузере будет вертикальный ползунок для прокрутки. Размер этого ползунка — примерно 21 пиксель. Если его не учитывать, появится горизонтальный скролл. И посетителю ресурса придётся двигать страницу вправо-влево, чтобы увидеть всю информацию.
- Тело должно быть в центре холста.
Это подготовительные этапы работы. Как оформить макет в Фотошопе, зависит от вашего воображения и вкуса. Поэтому дальше будут только общие рекомендации технического характера.
- Для начала вашему макету нужен фон. Его можно сделать самостоятельно или скачать из сети. Существует много ресурсов с бесплатными текстурами. Не ставьте на сайт изображения, на которые распространяются авторские права. Не стоит брать яркий или контрастный фон.
Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы. - Если просто открыть рисунок в Фотошопе, он окажется на новой вкладке, а не добавится в макет. Выделите весь фон. Для этого нужно сочетание клавиш Ctrl+A или инструмент «Выделение» (он находится на панели слева). Скопируйте его и вставьте в шаблон.
- Также эта опция доступна, если нажать Редактирование — Вставка.
- В списке справа внизу появится новый слой. Кликните по нему правой кнопкой мыши, чтобы посмотреть возможные действия. В меню «Параметры слоя» можно изменить его имя. В «Параметры наложения» находятся основные настройки изображения. Можно сделать ему свечение, тиснение, глянец, обводку, градиент. Если выберите какую-то опцию, изменения сразу отобразятся в Фотошопе. Есть набор готовых стилей. Так из стандартной текстуры создаются оригинальные дизайнерские решения. И ничего дополнительно рисовать не надо.
- Кнопка «Фильтры» есть в строке меню.
Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие. - Можно выбрать однотонный фон. Цвет зависит от ваших личных предпочтений. Но лучше не делать его чёрным или ядовитым. Подойдут постельные и мягкие тона или прозрачные холодные (например, светло-серый, нежно-голубой).
- После текстур можно собирать сам сайт. Вот тут вам предоставлена свобода для творчества.
- Чтобы добавить какую-то фигуру (отрезок, квадрат, овал), нажмите на соответствующую кнопку справа. Она будет иметь вид и название того объекта, который в данный момент выбран для рисования. Например, «Инструмент Эллипс», «Инструмент Многоугольник». В Фотошопе количество фигур ограничено. Но их можно найти в интернете, скачать и установить через меню Редактирование — Управление наборами. В поле «Тип» укажите, коллекцию каких объектов вы загружаете.
- В разных версиях программы эти фигуры вызываются по-разному. Либо кнопкой в виде маленького чёрного треугольника (она справа), либо пиктограммой в виде шестерёнки, либо пунктом «Форма растровой точки» (она под строкой меню).
Объекты можно комбинировать, группировать, делать из них композиции. - Чтобы создать текстовый фрейм, нажмите на кнопку в виде заглавной буквы «T». Потом выберите место, где должны располагаться символы, кликните туда и напечатайте то, что вам нужно.
- Каждый элемент лучше ставить на отдельный слой. Так будет удобнее перемещать и редактировать, не «задевая» весь сайт. Чтобы добавить этот объект, перейдите в Слои — Новый.
- Чтобы спроецировать изображение в заранее выбранную область, вначале выделите её, а потом откройте Редактирование — Специальная вставка. Там будут опции «Вставить вместо» и «Вставить за пределами».
- Можно часть одного рисунка перенести на новый слой. Для этого надо выделить её, щёлкнуть по ней правой кнопкой мыши и выбрать «Вырезать на новый слой».
- С фигурами, надписями и изображениями доступны те же опции, что и с фоном: эффекты, фильтры и так далее.
- В Фотошопе существует ещё много инструментов для рисования: кисти, перья, карандаши.

Можно сделать качественный ресурс даже из простых геометрических объектов.
Существуют ресурсы с бесплатными макетами. Загрузите их в Photoshop и отредактируйте, если надо. Это проще и быстрее, чем рисовать с нуля.
Как превратить макет в html-файл?
Вы разобрались, как создать сайт в Фотошопе, и оформили свой первый макет. Что с ним делать дальше? Ведь его нельзя просто загрузить на хостинг.
Его можно отдать верстальщику, который сделает качественный html-шаблон. Но есть и другой вариант. Воспользоваться сервисами для конвертации PSD-файла в HTML и CSS.
- Psd2Html Converter. Платный онлайн-сервис. Быстро конвертирует формат Photoshop в шаблон интернет-страницы. С этим ресурсом даже из некачественного макета можно создать приличный сайт.
- HTML Panda.
- PSDCenter
- 40 Dollar Markup.
Конструкторы
Макеты можно собирать и на специальных сайтах. Обычно там понятный и наглядный интерфейс. Вы просто собираете шаблон из различных деталей.
Некоторые элементы лучше рисовать в Photoshop. Так у вас получится оригинальный дизайн. Несмотря на то что он создан на конструкторе.
В Photoshop не только рисуют. В нём собирают макеты для сайтов. В большинстве случаев это делают мастера. Но простой шаблон может оформить любой человек. Необходимы лишь базовые знания о Фотошопе.
Бесплатный шаблон сайта PSD Templates
Связанные изображения из iStock | Сохранить сейчас
органический шаблон блазробар
Organic — Бесплатный PSD шаблон сайта
шаблоны темы наборы пользовательского интерфейса
Location Find — бесплатный шаблон сайта
наборы пользовательского интерфейса шаблоны темы
Hexa Website Template — Бесплатные шаблоны веб-дизайна в формате PSD — Представлено Ephlux
грубый шаблон вкусный
Delecioussary Cookies Бесплатный PSD шаблон сайта
гром шаблон блазробар
Thunder — Бесплатный шаблон веб-сайта в формате Mega PSD
ухаживать вукоммерция электронная коммерция
WooShop Lite — БЕСПЛАТНЫЙ шаблон темы WooCommerce
рождество ресторан веб-шаблон
Веб-шаблон ресторана PSD
грубый шаблон карман
Карманный бесплатный PSD шаблон сайта
халявагалерея портфолио шаблон
Бесплатный PSD-шаблон сайта личного портфолио
динамичный шаблон портфолио
Динамический бесплатный PSD шаблон сайта
премиальное кодирование меркор шаблон
Бесплатный шаблон веб-сайта электронной коммерции Mercor
корпоративные сайты макеты веб-сайтов шаблон
Шаблон веб-сайта чистого бизнеса (PSD)
плоский дизайн веб-шаблон бизнес
Бесплатный шаблон корпоративного сайта
psd шаблон синий чистый
Шаблон сайта высококачественных обзоров
гранж синий зеленыйЗеленый и синий гранж веб-шаблон
макет блога темнота серый
Макет бизнес-блога
отзывчивый штопор шаблон
Корковая отвертка Бесплатный PSD шаблон сайта
просто запас psdстиль
Простой стоковый бесплатный чистый PSD-шаблон веб-сайта
Шаблон сайта Box & Cube
LetterPress шаблон Psd сайта
Бесплатный плоский PSD шаблон сайта
MiniMart Lite — БЕСПЛАТНЫЙ шаблон темы WooCommerce
PSD шаблон темного портфолио портфолио psd сайт psd
Темный портфолио PSD шаблон
плоский дизайн веб-шаблон наборы пользовательского интерфейса
Бесплатный шаблон корпоративного сайта
приложение бизнес корпоративныйДизайн шаблона бизнес-сайта
чистый креативный шаблон свет
Портфолио PSD Шаблон сайта
шаблоны темы открытый
Причудливый и креативный шаблон PSD сайта
халявагалерея интернет сайт шаблон
Шаблон веб-сайта с фотографиями в формате PSD
psdстиль фотож интернет сайт
Photog Сайт бесплатной фотографии PSD
динамичный шаблон портфолио
Динамический бесплатный PSD шаблон сайта
премиальное кодирование электронная коммерция торговый центр
Emporium Бесплатный шаблон сайта электронной коммерции PSD
пиксель возрождения чистый минимальный
Бесплатный чистый минимальный шаблон сайта PSD
адаптивный дизайн макеты веб-сайтов шаблон
Бесплатные адаптивные PSD шаблоны веб-сайтов
халявагалерея приходящий скоро
Оставайтесь с нами Бесплатный веб-сайт Скоро появится PSD шаблон
премиальное кодирование лювис шаблон
Luvis Бесплатный PSD шаблон сайта
веб-дизайнпривычки могущественный минимальный
Могучий бесплатный минималистичный шаблон сайта PSD
церковный сайт psd макет церкви psd веб-сайт
PSD шаблон веб-сайта церкви
Тайрелл тема Тайрелла соответственно
Tyrell Lite — бесплатная адаптивная тема WooCommerce
веб-дизайн презентационный сайт креативное агентство
[FREEBIE] Spirit8 — Одностраничный шаблон цифрового агентства
творческий портфолио интернет сайт
Креативное портфолио Бесплатный шаблон сайта PSD
магнат шаблон psdстиль
Профессиональный шаблон веб-сайта Magnate PSD
Infusion — Бесплатный шаблон сайта
Фото — Стильный плоский PSD шаблон сайта
Thunder — Бесплатный шаблон веб-сайта в формате Mega PSD
Витрина — Бесплатный шаблон PSD для сайта — бесплатные шаблоны psd для сайта
шаблон сайта psd шаблон фотошоп шаблон
ViO — Шаблон веб-сайта
айпад айфон jquery
Шаблон приложения для iPad
макеты веб-сайтов шаблон задний план
Минималистичный веб-сайт с шаблоном полноэкранного фона (PSD)
макеты веб-сайтов шаблон бизнес
Шаблон темы журнала WP (PSD)
макеты веб-сайтов шаблон бизнес
Профессиональное резюме / Шаблон CV (PSD)
макеты веб-сайтов шаблон
MiniMighty: Минималистичный шаблон сайта (PSD)
церковный сайт psd макет церкви psd веб-сайт
PSD шаблон веб-сайта церкви
цветочный шаблон сайта psd шаблон шаблон сайта
Цветочный PSD шаблон сайта
Дизайн сайта шаблон ресторан
Шаблон веб-сайта для ресторанов
интернет сайт шаблон мультфильм
Веб-сайт портфолио
галерея зеленый витрина
Сайт галереи PSD
абстрактный жирный чистый
Dark Portfolio PSD шаблон сайта
церковь шаблон сеть
Шаблон веб-сайта ChurchSite
макеты веб-сайтов наборы пользовательского интерфейса шаблоны
Минималистичный веб-сайт с шаблоном полноэкранного фона (PSD)
макеты веб-сайтов наборы пользовательского интерфейса шаблоны
Шаблон веб-сайта приложения для iPhone (PSD)
Ищете фотографии шаблонов сайтов? Перейти к фото
Связанные изображения из iStock | Сохраните сейчас
95 красивых шаблонов веб-сайтов Photoshop в формате PSD — Bashooka
Вот 95 красивых шаблонов веб-сайтов Photoshop, которые помогут вам начать работу или вдохновить вас на создание красивого веб-сайта.
Посмотрите ниже и найдите креативные шаблоны веб-сайтов для фотошопа.
Это современный PSD-шаблон, созданный для креативных дизайнеров, разработчиков, фрилансеров и агентств. Он также подходит для личных, мультимедийных или блог-сайтов.
Скачать WOOP! →
Это настраиваемая тема, которую можно использовать как для личных, так и для деловых веб-сайтов.
Скачать Molecule →
Это чистый уникальный PSD-шаблон новостей и журналов, включающий 15 PSD-файлов, разработанных специально для вас. Он идеально подходит для онлайн-журналов и личного блога.
Download Universe →
Это современный и чистый PSD-шаблон электронной коммерции, он служит цели всех веб-сайтов электронной коммерции, так как это полный пакет.
Скачать Shoploop →
Это многоцелевая тема PSD. Он очень чистый, современный и легко настраиваемый. Он основан на 960 GS Натана Смита, который включен в качестве слоя и направляющих в файлы Photoshop.
Тема была сделана в Adobe Photoshop CS5. В этой теме используются четыре шрифта, все они загружены из веб-шрифтов Google.
Это простая, но эффективная тема PSD с 7 страницами и 2 вариантами цвета (светлый и темный), что в сумме составляет 14 файлов PSD. Все файлы сгруппированы и названы соответственно, чтобы сделать настройку чрезвычайно простой, как и тема. Есть 2 разные домашние страницы, на которых есть 2 разных наложения для постов портфолио и 2 разных слайдера. А также дополнительные функции, такие как кнопки, тени, столбцы и другие элементы дизайна.
Скачать Simplity →
Этот шаблон идеально подходит для онлайн-бизнеса, имеет чистый дизайн и современный макет.
Это многоуровневый PSD-шаблон для корпоративного сайта, портфолио или блога. Это очень простой, чистый, современный, гибкий и многоцелевой шаблон для любых ситуаций.
Загрузить PSD-шаблон C008 →
На основе 12-колоночной адаптивной сетки Bootstrap размером 1170 пикселей, которая включена в каждый PSD-файл в виде слоя и направляющих.
Тема разработана на основе системы сетки 960.
Это шаблон PSD, предназначенный для интернет-магазина. Дизайн очень элегантный и современный, а также очень простой в настройке.
Скачать Men Shop Style – PSD →
Это элегантная, чистая и современная уникальная тема PSD, которую можно использовать для любых веб-сайтов, от бизнеса, дизайнерских студий, агентств, корпораций до личного веб-сайта.
Скачать Аделина →
Уникальный дизайн. Он идеально подходит для вашей электронной коммерции в Интернете.
Этот шаблон для любителей всего светлого и всего темного. Это то, что я надеялся создать. Идеально подходит для фотографов или художников, которые хотели бы распространять свои работы в Интернете, надеясь получить комментарии или лайки.
Загрузить Flooval story of light and dark →
Все они разделены на слои и хорошо организованы в папки для удобства использования. Фотографии в предварительном просмотре используются только для отображения и не включены.
Этот шаблон идеально подходит для компаний, занимающихся недвижимостью, которые хотят расширить свой бизнес в Интернете, полностью редактируемые и настраиваемые, организованные, сгруппированные и именованные слои.
Скачать Недвижимость →
Это идеальный PSD-шаблон премиум-класса для вашего бизнеса, креативного агентства или портфолио!
Скачать SkyDream — Премиум PSD шаблон →
Это шаблон для веб-бизнеса. Чистый и современный с 3 типа портфолио.
Скачать Креатив →
Это четкий многоцелевой PSD-шаблон со свежим внешним видом. Его лучше всего использовать для деловых и корпоративных веб-сайтов или даже для личного портфолио.
Это уникальный профессиональный шаблон, он поставляется с 15 файлами PSD, которые можно использовать как для личных, так и для деловых веб-сайтов.
Это красивый классический шаблон из 17 PSD, включая 6 вариантов цвета, 4 стиля слайдера главной страницы на основе 960-сеточная система.
Загрузить шаблон PSD Assez →
Это шаблон портфолио PSD с широкими возможностями настройки. Он очень подходит для творческих, деловых, портфолио и студийных веб-сайтов! Вы можете легко менять шрифты, цвета и т. д.
Этот стильный и минималистичный шаблон v-card представлен в трех (3) различных и универсальных темах.
Загрузить Me.Card →
Portable — это чистая многоцелевая тема PSD, подходящая для любого типа бизнеса.
Скачать Portable →
Это веб-сайт, созданный для ресторанов, которые доставляют еду к вашей двери. Система питания. На основе электронной коммерции. Вы можете искать рестораны в вашем районе, просматривать меню и заказывать еду онлайн.
Этот многоцелевой шаблон идеально подходит для фирм, занимающихся разработкой приложений, с 4 вариантами цвета (розовый, зеленый, синий и оранжевый) и с сеткой 960. чистый дизайн с полностью редактируемым организованным именованным многоуровневым.
Это многоцелевой шаблон для корпораций, стремящихся к уникальному онлайн-присутствию. Он оснащен ползунком и модным нижним колонтитулом.
Скачать Simplemente →
Это чистый и творческий многоцелевой шаблон веб-сайта. Он идеально подходит в качестве личного портфолио или веб-сайта агентства.
Скачать Blorange →
Это чистый уникальный многоцелевой PSD-шаблон, включающий 21 PSD-файл, разработанный специально для вас. Он также идеально подходит для личных портфолио.
Загрузить Jungle →
Это идеальный шаблон портфолио для демонстрации вашей работы. Все PSD-файлы хорошо организованы и разделены на слои, поэтому любые детали очень легко изменить.
Этот шаблон подходит для создания порталов игровых новостей. Все файлы полностью многоуровневые и доступны для редактирования.
Создайте портал с самыми востребованными женщинами услугами. Вы можете сделать это для города или национального уровня.
Продвигайте плату за лучшую прическу, макияж, фитнес-салоны.
Загрузить WomanStyle — бизнес-идея для вас →
Это потрясающий дизайн портфолио в виде сетки для творческих людей. Загрузка содержит 19 тщательно организованных и чистых файлов Photoshop (.PSD).
Скачать 9studio | Креативная уникальная тема PSD →
Вперед Современный и чистый PSD-шаблон идеально подходит для деловых и креативных сайтов-портфолио.
Загрузить Forward – Creative PSD Template →
Это веб-сайт, который позволяет пользователям создавать свои собственные файлы с графикой, текстом и личными изображениями.
Скачать Kavin Fashion →
Чистый и достойный PSD шаблон личного портфолио и микроблога идеально подходит для дизайнеров/художников/фотографов.
Это идеальный шаблон портфолио для демонстрации ваших работ, независимо от того, являетесь ли вы художником, дизайнером или ремесленником. Его чистый дизайн в швейцарском стиле неподвластен времени, доступен в светлой и темной цветовой гамме и очень прост в настройке.
Скачать Spank – шаблон портфолио →
Это веб-сайт, на котором пользователи могут создавать свои собственные футболки с графикой, текстом и личными изображениями.
Скачать дизайнер футболок Creator и модуль магазина →
Это творческое портфолио, 17 шаблонов PSD, с 4 вариантами домашней страницы и на основе сетки 960. чистый дизайн с полностью редактируемыми организованными слоями.
Загрузить Wealthz →
Это супер-чистый дизайн сетки портфолио для творческих людей. Пакет для загрузки содержит 11 тщательно организованных и чистых файлов Photoshop (.PSD).
Это уникальный PSD-шаблон веб-сайта, разработанный в Photoshop с современным внешним видом.
Это отзывчивая, дружелюбная, креативная тема. Он хорошо сгруппирован и правильно уложен, чтобы упростить процесс нарезки. Он легко настраивается благодаря использованию стилей слоя и слоев формы.
Это лучшее решение для покупки/продажи автомобилей онлайн.
Этот шаблон лучше всего подходит для дилеров, которым необходимо вести свой бизнес в Интернете через веб-сайты.
Скачать AutoMarket – Vehicle Marketplace →
Это продолжение шаблонов, основанных на индустрии туризма. Он идеально сочетается с шаблоном флаера Luxury Garden Hotel Trifold. Идеально подходит для отелей, но также может быть очень полезным для спа и оздоровительных центров, туристического и туристического бизнеса, ресторанов, даже страховых компаний или банков.
Скачать PSD-шаблон веб-сайта Luxury Garden Hotel →
Он профессионально разработан с элементами и формами чистого пользовательского интерфейса, которые можно легко настроить в соответствии с вашими требованиями. Он предлагает 16 шаблонов PSD и чистые функции пользовательского интерфейса.
Скачать Illumine →
Это тема агентства и компании. Это простой и понятный шаблон PSD.
Это креативный и уникальный шаблон PSD, в котором используются тонкие текстуры.
Это чистый, современный, уникальный и простой в настройке psd шаблон. Он создан для ресторанов, кафе и организаций общественного питания.
Загружаемый файл содержит 9 тщательно организованных и чистых PSD-файлов Photoshop.
Это PSD-шаблон, предназначенный для использования на веб-сайтах, связанных с больницами, клиниками и здравоохранением. Хотя основной целью шаблона является использование на веб-страницах, связанных с больницами, с некоторыми незначительными настройками его можно использовать на различных веб-сайтах, независимо от их основного типа/аудитории.
Для демонстрации галереи, портфолио, бутика, но подойдет и для любого арт-, ремесленного или творческого сайта.
Загрузить Lil’Birds →
Это потрясающий дизайн портфолио в виде сетки для творческих людей. Загружаемый файл содержит 12 тщательно организованных и чистых файлов Photoshop (.PSD).
Чистое, современное портфолио и блог.
Это идеальный пиксель!
Скачать корону — чистый пиксель Perfect PSD шаблон →
Это чистый, современный, уникальный и простой в настройке шаблон PSD. Эта личная виртуальная визитная карточка может использоваться разработчиками, кодировщиками, дизайнерами, менеджерами и т. д.
продемонстрировать свою работу вместе с социальными сетями из Instagram и Dribbble.
Это полноэкранная тема портфолио для энтузиастов визуализации, которые хотят продемонстрировать свою работу в привлекательном виде.
Дизайн вдохновлен игровыми онлайн-сайтами, но может использоваться для представления любого другого потрясающего контента.
Скачать Power Jackpot — блестящий, глянцевый и блестящий →
Чистый и современный PSD-шаблон, подходящий для вашего бизнеса и творческих сайтов-портфолио.
Скачать Centindu — чистый и современный PSD-шаблон →
Это тема для портфолио для творческих профессионалов, которые хотят ярко продемонстрировать свою работу.
Это простой и понятный шаблон PSD.
Очень минималистичный шаблон для портфолио, но с некоторыми изменениями его можно использовать и для чего угодно.
Это очень чистый и современный бизнес-ориентированный PSD-шаблон, который вы можете использовать для своего портфолио. Это также отлично подходит для блога или агентства / корпоративного бизнеса.
Скачать Eudora →
Это шаблон онлайн-журнала/новостей с минималистичным дизайном, который можно легко настроить.
Загрузить онлайн-журнал LAMHEN →
Это творческое портфолио. 11 шаблонов PSD, с 3 вариантами слайдера на главной странице и на основе сетки 960. чистый дизайн с полностью редактируемыми организованными слоями. Это многоцелевое использование.
Загрузить BlackBlue — PSD-шаблон креативного портфолио →
Это функциональный, чистый, современный и простой в настройке шаблон PSD с несколькими вариантами дизайна и вариациями.
Чистый и креативный PSD-шаблон хорош для вашего бизнеса и творческих сайтов.
Скачать Devvine — современная и чистая PSD-тема →
Современная, чистая и элегантная PSD-тема, идеально подходящая для ресторана, стейк-хауса, бара, бистро, кафе, а также любого другого вида бизнеса. Именованные и очень хорошо организованные слои делают эту тему очень простой в редактировании и настройке.
Для бизнес-компаний отлично структурирован, поэтому вы можете легко перемещать любые блоки, исправлять текст и т. д. Шаблон имеет чистый и стильный макет, предназначенный для продвижения чего угодно, от корпоративного бизнеса до сайта-портфолио.
Это простой и чистый профессиональный шаблон, подходящий для журнала или новостного портала. Включены 19 файлов PSD!
Скачать PSD-шаблон Business News – Premium Magazine →
Это чистый, уникальный и креативный PSD-шаблон портфолио. Многоцелевая тема PSD подходит для любого типа бизнеса.
Скачать Чистый до скрипа | PSD →
Скачать безымянный PSD шаблон креативного агентства →
С необычным оформлением элементов в цветочной стилистике.
Скачать Woodgarden – креативный PSD-шаблон →
Подходит для вашего бизнеса и творческих сайтов.
Скачать Liveset — современная и чистая тема PSD →
Испытайте великолепный дизайн и макет веб-сайта с помощью Fantasy. Он имеет идеальную интеграцию всех функций, которые должен иметь ваш сайт, и все они оформлены в простом и понятном стиле.
Скачать Fantasy — шаблон для бизнеса и портфолио →
Загрузить портфолио креативного дизайнера →
Это PSD-шаблон корпоративного портфолио, но он также предназначен для многоцелевого использования. С опцией 2 ползунка, также в опции 960 Grid Based, 4 Colors. Это чистый и современный дизайн с полностью организованными слоями, настраиваемыми.
Загрузить Seventy Corporate Portfilio →
Это чистая и четкая корпоративная тема в формате .
PSD, подходящая для любой компании. Разработанный для 960 пикселей, пакет также поставляется с мобильным дизайном 320 пикселей. Чистый дизайн позволяет легко настраивать и изменять цвета.
Скачать RECO — корпоративный PSD-шаблон →
Это шаблон фотографии, который предоставляет отличный способ продемонстрировать свое портфолио в виде фотографии или обычного искусства. Вам будет невероятно легко добавлять то, что вы хотите, как вы хотите и когда хотите. Pixmania — это не обычный дизайн сайта, это революция.
Plug — это адаптивный и дружественный шаблон персонального портфолио в формате .psd. Он хорошо сгруппирован и правильно уложен, чтобы упростить процесс нарезки.
Чистый тонкий PSD-шаблон, подходящий для портфолио, демонстрации проектов и услуг.
Скачать Simplething — чистый шаблон PSD →
Красивая и милая тема для кондитерских, ресторанов, кафе, магазинов мороженого или любого другого бизнеса, связанного с едой (или любого другого бизнеса).
Скачать Cupcakery →
Тема, сочетающая минималистичный и совершенный дизайн сетки с функциональностью и удобством использования.1.Файлы PSD были созданы в Adobe Photoshop CS3 и должны работать в любой другой версии Photoshop.
Загрузить PSD-шаблон NOVUS →
Современный чистый PSD-шаблон ресторана. С 10 файлами PSD. Это шаблон для ресторана, еды, рецептов для вашего собственного ресторана, магазина.
Скачать PSD-шаблон «Абсолютно вкусный ресторан» →
Этот PSD-шаблон разработан специально для предприятий, связанных со спа, здоровьем и красотой. Поставляется с 9 PSD-файлами с уникальным дизайном, все они полностью разделены на слои и редактируются, правильно названы и организованы в папки.
Скачать PSD-шаблон Venus – центр красоты →
Это очень чистый и современный шаблон PSD, ориентированный на бизнес, который вы можете использовать для своего портфолио. Это также отлично подходит для блога или агентства / корпоративного бизнеса.



Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт.
Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024×720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах.
Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы.
Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие.
Объекты можно комбинировать, группировать, делать из них композиции.