Как сделать дизайн сайта в фотошопе

Леонид Родинский

Копирайтер
16 Декабрь в 20:15

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

Документ и размеры

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

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

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

Разметка

Незаменимый инструмент – линейка – по умолчанию отключен, а при редактировании фотографий вообще не нужен. Поэтому первым делом посещаем меню «Просмотр» и подключаем позицию измерений, хотя быстрее будет нажать ctrl+R. Теперь переводит курсор на верхний срез, зажимаем левую кнопку мыши и тащим направляющую на визуальное полотно. Обратите внимание на середине (в горизонтали и вертикали) произойдёт залипание – это помогает быстро найти центральные позиции.

При помощи линеек по порядку размечается весь документ. Например, для шапки страницы:

  • выставляются две горизонтальные линии на необходимой высоте;
  • активируется «Прямоугольная область» (сокращение М), в настройках верхней панели поставьте «Заданный размер» и укажите его (1000х300), кликните мышкой в пространстве документа – появится нужное нам выделение. Залейте его цветом. Теперь инструментом «Перемещение» (сокращение V) перетаскиваем содержимое на положенное место. Обратите внимание, что объект прилипнет к направляющим и сам найдёт центр.

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

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

Рекомендации

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

  • Все элементы помещаются на отдельные слои, имеющие понятные заглавия. Это поможет не путаться в массиве информации.
  • Производится группировка слоёв в подписанные папки. Таким образом на соответствующей вкладке всегда легко найти искомый объект.
  • В инструменте «Перемещение» обязательно поставьте галочку на позиции «Автовыбор» – кликом по картинке произойдёт переключение на нужный слой.
  • Клавиатурное сокращение ctrl+Hотключает видимость направляющих и выделений – иногда они мешают рассмотреть картинку целиком. Но все функции при этом сохраняются и, например, доступно перемещение стрелками на клавиатуре. Повторная комбинация вновь отображает ранее установленные линии.
  • Занимаясь дизайном сайта в фотошопе, обязательно скачайте тематические объекты – иконки и кнопки. Они помогут сделать макет реалистичнее.

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

Наши работы

  • Скриншот Трэвел Клаб
    Задача: 

    Создать стильное оформление сообществ в социальных сетях для турагентства Travel Club

    Что мы сделали: 

    Разработали единый стиль оформления для всех соцсетей

    Создали стильное и продающее оформление

    Результат: 

    Сообщества клиента получили привлекательное оформление

    Бренд стал узнаваемым в соцсетях благодаря дизайну сообществ в фирменном стиле

  • Урожайный год - превью
    Задача: 

    Разработать концепцию бренда и дизайн упаковки для линейки продукции «Урожайный год» 

    Что мы сделали: 

    Разработали концепцию дизайна

    Создали кративный дизайн для упаковки каждого вида продуктов

    Результат: 

    Продукция клиента представлена в стильной и продающей упаковке

    Продажи продукции клиента пошли вверх

  • Счастливая корова - превью
    Задача: 

    Создать креативный дизайн упаковки молока «Счастливая корова»

    Что мы сделали: 

    Разработали концепцию бренда

    Создали оригинальный дизайн упаковки продукции

    Результат: 

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

  • Доработка сайта компании Ферропорт-Сервис
    Задача: 

    Сделать сайт более удобным для пользователей

    Что мы сделали: 

    Полностью переделали структуру 

    ​Улучшили юзабилити

    Переработали каталог продуктов

    Результат: 

    Удобный и функционирующий сайт

Наша команда

  • Вадим Скопинцев
    Генеральный директор

    Сделаем лучшее решение для привлечения клиентов из интернета, сделаем продажи!

  • Дмитрий Карпинский
    Директор по пропаганде

    Экспонента, бизнес должен и будет расти по экспоненте! Продавать, будете продавать!

  • Диана Зайцева
    Руководитель отдела развития

    «Протачиваем» Ваш ресурс для получения им продающих свойств. Захватываем клиентов для Вас!

  • Дарья Шугурова
    Руководитель офиса г. Липецк

    Мы разработаем самое интересное и эффективное решение. Продажи будут расти!

  • Дмитрий Трацевский
    Руководитель разработки

    Разработанные нами сайты работают как часы!

  • Леонид Белкин
    Менеджер проектов

    Сделаем Ваш сайт продающим. Конверсия будет расти!

  • Татьяна Николаева
    Менеджер проектов, переводчик

    Пишем только уникальные и интересные тексты на русском и английском. Вам понравится!

  • Кирилл Миченус
    Разработчик

    Разработаем классный, продающий сайт. Внедрим интересные идеи!!

  • Павел Шульга
    Старший специалист по контекстной рекламе

    Грамотно используем Ваш рекламный бюджет. Выйдем на максимум заявок!

  • Евгения Лю-Ти-Фу
    PR-менеджер

    Ваша имидж в наших руках. Если вас нет в Интернете, то вас нет в бизнесе!

  • Марина Петренко
    Контент-менеджер

    Раскрываем все положительные стороны Вашего бизнеса для увеличения целевой аудитории!

  • Владимир Гришин
    Дизайнер

    Яркий, продающий дизайн сайта – залог успеха компании. Уделим внимание деталям!

  • Алёна Уваркина
    HR-менеджер

    Гарантируем четкое и своевременное исполнение заказов. У нас работают профессионалы!

  • Виктор Токмачев
    Менеджер по работе с иностранными клиентами

    Наши идеи подходят всем - иностранные клиенты охвачены!

  • Татьяна Ромакина
    Копирайтер

    Создадим уникальные продающие статьи. Лучший контент для Вашего сайта!

  • Леонид Родинский
    Копирайтер

    Написать уникальные тексты и заголовки – этого мало. Наполняем сайты неповторимым содержанием!

  • Анастасия Бондарева
    Копирайтер
  • Вячеслав Киосе
    Копирайтер

    Текст – это не просто слова. Посетители Вашего сайта получат информацию с внятным и понятным смыслом.

  • Павел Константинов
    Копирайтер

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

  • Стань одним Из нАс
    Трудоустройство

Клиенты

Наши услуги

САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ