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

Содержание

Как сделать макет или дизайн сайта в Photoshop

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? 🙂

Продолжение

Как сверстать шаблона сайта из PSD в HTML и CSS
Как простой HTML шаблон сверстать под WordPress

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте 🙂

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

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

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

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

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

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

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

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

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

Создание дизайна или макета сайта

Важно!

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

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

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

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

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

После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

Иконки социальных закладок

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

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

Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

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

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

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

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:

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

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

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

Сразу же нужно создать 2 отдельных группы:

Метки — в эту группу мы будем добавлять текст с размером наших колонок.
Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

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

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

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

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

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

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

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:

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

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

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

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

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

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

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

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

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит 🙂 Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

Вот и всё, друзья, у нс готовый макет, который уже можно верстать 🙂

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

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

До скорых встреч.

Создание макета сайта: этапы, правила, инструменты

В статье рассказывается:

Что такое макет сайта и зачем он нужен
Этапы создания макета сайта
Инструкция по созданию макета сайта в Фотошоп
Создание макета сайта в конструкторе
Общие правила разработки макета сайта
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

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

Для разработки макета используются различные приложения, онлайн-сервисы, графические редакторы (например, тот же Photoshop). Не важно, где и каким способом вы создаете шаблон, грубый набросок сайта, важно соблюдать общие правила и не допускать ошибок. О том, как создается макет сайта, что для этого нужно, вы узнаете из нашего материала.

Что такое макет сайта и зачем он нужен

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

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

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

Что такое макет сайта

Макет упрощает и ускоряет процесс создания сайта. Благодаря его наличию разработчики могут:

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

Этапы создания макета сайта

Поговорим о процессе работы над макетом подробнее и обратим внимание на важные нюансы.

Этап 1: Формирование техзадания

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

Цели сайта – для чего нужен будущий веб-ресурс.
Краткий анализ ЦА – кто будет пользоваться интернет-площадкой, какие потребности пользователей она будет удовлетворять.
Пользовательские сценарии – как именно посетители сайта будут продвигаться к нужному вам результату.
Количество и примерное содержание страниц – сколько их понадобится, чтобы реализовать поставленные цели.
Срок выполнения работы – сколько времени вы отводите исполнителю на создание дизайн-макета сайта.

Этап 2: Работа над прототипом

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

Этап 3: Подбор цвета

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

Упростить работу по подбору цветов помогут специальные сервисы. Бесплатно определиться с палитрой будущей веб-площадки вам помогут:

Adobe Color
ColorCode
ColrD
Cohensive Colors
ColorHunter

Этап 4: Подбор шрифта

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

Они могут быть защищены авторскими правами. Во избежание неприятностей оплатите возможность их использования или берите бесплатные варианты с Google Fonts, Font Space, 1001 free fonts.

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

Подбор шрифта

Этап 5: Проработка

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

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

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

Для удобства присваивайте отдельным элементам, а также их группам логичные названия: button для кнопок, item name – для товаров и так далее.

Этап 6: Создание гайда

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

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

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 19946

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

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

Инструкция по созданию макета сайта в Фотошоп

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

Формируем документ нужных размеров

Начинаем с кликов по «Файл» и «Создать», указываем параметры полей. Рекомендуем увеличить размер больше на 200 пикселей, чтобы добиться полного соответствия с реальным размером страницы.

Включаем линейки и активируем сетку

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

Подбираем изображение или палитру цветов для фона

Самый простой вариант – придать фону ровный оттенок при помощи кнопки «Заливка». Более выигрышно смотрятся картинки по тематике сайта.

Добавляем логотип компании, используя стандартный инструмент.
Формируем верхнее меню. После выставления линейки кликаем на «Прямоугольную область», выделяем место вдоль линейки.

Подбираем подходящий цвет, жмем на кнопку «Заливка», тем самым закрашиваем выделенную ранее область. Затем отменяем выделение: «Выделение» – «Отменить выделение».

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

Затем создаем слой, кликаем на «Линия», нажимаем Shift и вертикальной линией делим фон меню.

Точный инструмент «Колесо компетенций»

Для детального самоанализа по выбору IT-профессии

Список грубых ошибок в IT, из-за которых сразу увольняют

Об этом мало кто рассказывает, но это должен знать каждый

Мини-тест из 11 вопросов от нашего личного психолога

Вы сразу поймете, что в данный момент тормозит ваш успех

Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.

Только до 13 марта

Осталось 17 мест

Потом копируем слой и выставляем после каждого раздела:

Создаем основной блок с контентом. Устанавливаем линии – вертикальную и горизонтальную. Делаем слои – с заголовком и с текстом. При необходимости перемещаем изображения. Левой кнопкой жмем на «Текст» и растягиваем по диагонали, после чего вставляем и форматируем текст.
В подвале сайте создаем группу и слой. Выполняем разметку, используя линейку. Далее «Прямоугольная область» и «Заливка».

Инструкция по созданию макета сайта в Фотошоп

Меню копируем из верхнего.

Готовый макет включает:

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

Создание макета сайта в конструкторе

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

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

Работа через сервис для создания макета сайта выгодна по нескольким причинам:

Выбор готового шаблона из богатой библиотеки.
Отсутствие финансовых затрат (но есть и платные варианты).
Экономия времени.
Моментальное внесение корректив.
Доступна людям, не обладающими специальными знаниями.

Общие правила разработки макета сайта

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

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

К типичным дизайнерским ошибкам относятся следующие:

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

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

Правило 1: Выберите формат файлов, удобный для всех

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

Наиболее востребованным графическим редактором считается Adobe Photoshop. С ним одинаково успешно работают фотографы, иллюстраторы и веб-дизайнеры. Файлы Photoshop имеют расширение .psd, поэтому верстальщик получает от дизайнера PSD-макет.

Универсальность этого редактора приводит к тому, что на овладение его функциями требуется время. Для решения задач веб-дизайна созданы программы нового поколения, работать с которыми гораздо проще. Многие выполняют создание макета сайта в Figma, Adobe XD, Sketch. Кто-то предпочитает Adobe Illustrator или Adobe InDesign.

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

Правило 2: Соблюдайте правила интерактивного дизайна

Соблюдение этих требования упростит и создание макета сайта, и его верстку.

Перед началом работы выберите цветовую модель RGB – общепринятый стандарт для экранов и мониторов.
Для выравнивания контента внутри макета применяйте сетку.
Не увеличивайте маленькие картинки в ущерб их качеству.
Для сохранения пропорций корректируйте размер изображений, зажав Shift.
Для визуального выделения фрагментов текста используйте одно из начертаний – только курсив или только полужирный. Избегайте псевдостилей для изменения внешнего вида букв Photoshop.

Правило 3: Проследите, чтобы не было дробных размеров

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

Правило 4: Наведите порядок в слоях и артбордах

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

Во избежание этой ситуации:

удалите скрытые и пустые слои,
объедините элементы в группы по смыслу,
дайте каждому слою название.

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

Общие правила разработки макета сайта

Правило 5: Поместите элементы на отдельный артборд

Это касается элементов, которые не отображаются с помощью HTML и CSS: иконки, карточки, отдельные кнопки. Все они выносятся на специальную страницу макета. Экспортировав их в PNG или SVG, вы поможете верстальщику: ему не придется тратить время на конвертацию.

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

Правило 6: Сопроводите макет шрифтами и иконками

Речь идет о редких шрифтах, которые отсутствуют в популярных библиотеках. Если он есть в Google Fonts, достаточно приложить ссылку.

Приложите к макету все элементы, экспортированные из артборда. Для формата PNG представьте версии в нескольких разрешениях.

Правило 7: Создавайте анимацию для демонстрации движущихся элементов

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

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

Макет, нарисованный в любом графическом редакторе, легко переносится в специальные программы: Adobe Animate, Adobe Edge или Principle.

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

Продвижение блога — Генератор продаж

Рейтинг: 5

( голосов 3 )

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

Как создать макет сайта в Photoshop

Часть 2 о том, как создать веб-сайт с помощью Photoshop и Dreamweaver

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

Этот учебник является частью 4-страничного руководства по созданию простого веб-сайта с помощью Photoshop и Dreamweaver.

Урок 1: Создание уникального заголовка веб-сайта
Урок 2: Создание макета веб-сайта в Photoshop
Урок 3: Нарезка макета в Photoshop
Урок 4: Создание веб-сайта в Dreamweaver

Мы разработали макет с черным фоном, областью для логотипа, привлекательным графическим заголовком, навигационными ссылками, содержимым и изображениями.

Помните, что при разработке макета вам необходимо определить места для следующего:

Заголовок — это может быть графический баннер
Логотип
Кнопки — Ссылки для дома, о нас, связаться с нами и т. д.
Картинки
Область содержимого
Информация об авторских правах

Выполните следующие шаги, чтобы создать макет веб-сайта в Photoshop:

Откройте новый файл в Photoshop, нажав File/New и введите ширину 750 пикселей и высоту 450 пикселей.
Закрасьте фон черным цветом, выбрав черный цвет переднего плана и выбрав инструмент ведро краски и щелкнув по холсту. Ваш фон теперь будет черным.
Добавьте новый слой, щелкнув значок «Добавить слой» на панели «Слои». Если панель «Слои» не открыта, перейдите к Window/Layers . Назовите новый слой авторское право . Выберите Rectangle Marquee Tool и перетащите его, чтобы создать нижний баннер шириной 750 пикселей на 21 пиксель. Раскрасьте этот баннер цветом #303030.
Выберите инструмент «Горизонтальный текст». Текстовый слой появится автоматически. Также введите текст кнопки на верхнем баннере: «главная страница l карта сайта l новости l загрузки».
Добавить новый слой. Теперь сделайте цвет серой горизонтальной линии #808080 с помощью single Marquee tool . Перейдите к Edit>Stroke . Выберите Ширина обводки 1 пиксель. Цвет № 808080. Расположение Центр. Нажмите кнопку ОК.
Щелкните правой кнопкой мыши по слою и выберите дубликат слоя 3 раза, потому что у вас есть 4 линии. Поместите линии в соответствующие места: внизу, посередине, вверху.
Теперь вы можете ввести текст кнопки на втором верхнем баннере в новом слое, например. О нас l услуги l продукция l клиентура l связаться с нами.
Теперь определите область логотипа с помощью прямоугольного инструмента выделения. Перейдите в «Правка»> «Обводка». Выберите ширину обводки 1 пиксель. Цвет #808080. Расположение Центр. Залейте внутреннюю часть черным цветом с помощью инструмента Paint. Назовите его Область логотипа.
Выберите инструмент «Горизонтальный текст» и напишите название своей компании или веб-сайта.
Выберите инструмент «Горизонтальный текст» и введите содержимое посередине.
Вставьте свой заголовок (см. наш учебник по созданию привлекающего внимание заголовка). Это также может быть любое изображение, которое вы выберете. Изображение должно быть горизонтальным баннером. Откройте файл изображения. Перейти к инструменту перемещения. Перетащите из файла изображения в этот макет в середине макета.
Нарисуйте прямоугольники справа с помощью инструмента Polygonal Lasso Tool . Перейдите в «Правка»> «Обводка». Выберите ширину обводки 1 пиксель. Цвет #808080. Расположение Центр.
Назовите свой слой borderpics. Сделайте еще две коробки. Отрегулируйте их одинаково в правой части макета. Вставьте изображения, перетащив их на макет и назвав слои.
Перетащите слой borderpics поверх трех слоев изображения. Края картинок должны быть обрезаны в соответствии с дизайном коробки.
Теперь создайте белые полосы с текстом в нижней части каждой правой графики с помощью инструмента выделения прямоугольника. Залейте прямоугольник белым цветом с помощью инструмента Paint. Назовите его «whitebandpics». Выберите инструмент «Горизонтальный текст». Текстовый слой создается автоматически. Теперь введите текст для подарков. Проделайте то же самое с остальными картинками. Вы можете нажать здесь для изображений — pic1, pic2, pic3. Вы можете перетащить эти изображения в свой макет.
Теперь, когда ваш дизайн готов, вы можете перейти к следующему шагу создания вашего веб-сайта, который заключается в создании фрагментов.

Этот учебник является частью 4-страничного руководства по созданию простого веб-сайта с помощью Photoshop.

Урок 1. Создание уникального заголовка веб-сайта
Урок 2: Создание макета веб-сайта в Photoshop
Урок 3: Нарезка макета в Photoshop
Урок 4: Создание веб-сайта в Dreamweaver

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

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

Работа с веб-графикой в Photoshop

Руководство пользователя Отмена

Поиск

Последнее обновление: 16 ноября 2022 г., 04:56:45 по Гринвичу

Руководство пользователя Photoshop
Знакомство с Photoshop
1. Мечтай. Сделай это.
2. Что нового в Photoshop
3. Отредактируйте свою первую фотографию
4. Создание документов
5. Фотошоп | Общие вопросы
6. Системные требования Photoshop
7. Перенос предустановок, действий и настроек
8. Знакомство с Photoshop
Photoshop и другие продукты и услуги Adobe
1. Работа с иллюстрациями Illustrator в Photoshop
2. Работа с файлами Photoshop в InDesign
3. Материалы Substance 3D для Photoshop
4. Photoshop и Adobe Stock
5. Используйте встроенное расширение Capture в Photoshop
6. Библиотеки Creative Cloud
7. Библиотеки Creative Cloud в Photoshop
8. Использование сенсорной панели с Photoshop
9. Сетка и направляющие
10. Создание действий
11. Отмена и история
Photoshop на iPad
1. Photoshop на iPad | Общие вопросы
2. Знакомство с рабочим пространством
3. Системные требования | Фотошоп на iPad
4. Создание, открытие и экспорт документов
5. Добавить фото
6. Работа со слоями
7. Рисовать и раскрашивать кистями
8. Сделать выбор и добавить маски
9. Ретушь ваших композитов
10. Работа с корректирующими слоями
11. Отрегулируйте тональность композиции с помощью Кривых
12. Применить операции преобразования
13. Обрезка и поворот композитов
14. Поворот, панорамирование, масштабирование и сброс холста
15. Работа с текстовыми слоями
16. Работа с Photoshop и Lightroom
17. Получить отсутствующие шрифты в Photoshop на iPad
18. Японский текст в Photoshop на iPad
19. Управление настройками приложения
20. Сенсорные клавиши и жесты
21. Сочетания клавиш
22. Измените размер изображения
23. Прямая трансляция во время создания в Photoshop на iPad
24. Исправление недостатков с помощью Восстанавливающей кисти
25. Создание кистей в Capture и использование их в Photoshop
26. Работа с файлами Camera Raw
27. Создание смарт-объектов и работа с ними
28. Отрегулируйте экспозицию ваших изображений с помощью Dodge and Burn
Photoshop в Интернете, бета-версия
1. Общие вопросы | Photoshop в Интернете, бета-версия
2. Введение в рабочее пространство
3. Системные требования | Photoshop в Интернете, бета-версия
4. Сочетания клавиш | Photoshop в Интернете, бета-версия
5. Поддерживаемые типы файлов | Photoshop в Интернете, бета-версия
6. Открытие и работа с облачными документами
7. Применение ограниченных правок к облачным документам
8. Сотрудничать с заинтересованными сторонами
Облачные документы
1. Облачные документы Photoshop | Общие вопросы
2. Облачные документы Photoshop | Вопросы по рабочему процессу
3. Управление и работа с облачными документами в Photoshop
4. Обновление облачного хранилища для Photoshop
5. Невозможно создать или сохранить облачный документ
6. Устранение ошибок облачного документа Photoshop
7. Сбор журналов синхронизации облачных документов
8. Делитесь доступом и редактируйте свои облачные документы
9. Делитесь файлами и комментируйте в приложении
Рабочее пространство
1. Основы рабочего пространства
2. Настройки
3. Учитесь быстрее с панелью Photoshop Discover
4. Создание документов
5. Поместить файлы
6. Сочетания клавиш по умолчанию
7. Настройка сочетаний клавиш
8. Инструментальные галереи
9. Параметры производительности
10. Использовать инструменты
11. Предустановки
12. Сетка и направляющие
13. Сенсорные жесты
14. Использование сенсорной панели с Photoshop
15. Сенсорные возможности и настраиваемые рабочие области
16. Превью технологий
17. Метаданные и примечания
18. Сенсорные возможности и настраиваемые рабочие области
19. Размещение изображений Photoshop в других приложениях
20. Линейки
21. Показать или скрыть непечатаемые дополнения
22. Укажите столбцы для изображения
23. Отмена и история
24. Панели и меню
25. Позиционные элементы с привязкой
26. Положение с помощью инструмента «Линейка»
Веб-дизайн, экранный дизайн и дизайн приложений
1. Photoshop для дизайна
2. Артборды
3. Предварительный просмотр устройства
4. Копировать CSS из слоев
5. Разрезать веб-страницы
6. Опции HTML для фрагментов
7. Изменить макет среза
8. Работа с веб-графикой
9. Создание фотогалерей в Интернете
Основы изображения и цвета
1. Как изменить размер изображения
2. Работа с растровыми и векторными изображениями
3. Размер изображения и разрешение
4. Получение изображений с камер и сканеров
5. Создание, открытие и импорт изображений
6. Просмотр изображений
7. Недопустимая ошибка маркера JPEG | Открытие изображений
8. Просмотр нескольких изображений
9. Настройка палитр цветов и образцов
10. Изображения с высоким динамическим диапазоном
11. Сопоставьте цвета на изображении
12. Преобразование между цветовыми режимами
13. Цветовые режимы
14. Стереть части изображения
15. Режимы наложения
16. Выберите цвет
17. Настройка индексированных таблиц цветов
18. Информация об изображении
19. Фильтры искажения недоступны
20. О цвете
21. Цветовые и монохромные настройки с использованием каналов
22. Выбор цветов на панелях «Цвет» и «Образцы»
23. Образец
24. Цветовой режим или Режим изображения
25. Цветной оттенок
26. Добавить условное изменение режима к действию
27. Добавить образцы из HTML CSS и SVG
28. Битовая глубина и настройки
Слои
1. Основы слоев
2. Неразрушающее редактирование
3. Создание и управление слоями и группами
4. Выбрать, сгруппировать и связать слои
5. Поместите изображения в рамки
6. Непрозрачность слоя и смешивание
7. Слои маски
8. Применение смарт-фильтров
9. Композиции слоев
10. Переместить, сложить и заблокировать слои
11. Слои маски с векторными масками
12. Управление слоями и группами
13. Эффекты слоя и стили
14. Редактировать маски слоя
15. Извлечение активов
16. Отображение слоев с помощью обтравочных масок
17. Создание ресурсов изображения из слоев
18. Работа со смарт-объектами
19. Режимы наложения
20. Объединение нескольких изображений в групповой портрет
21. Объединение изображений с помощью Auto-Blend Layers
22. Выравнивание и распределение слоев
23. Копировать CSS из слоев
24. Загрузить выделение из границ слоя или маски слоя
25. Knockout для отображения содержимого других слоев
Подборки
1. Начало работы с подборками
2. Сделайте выбор в композите
3. Рабочее пространство «Выбор и маска»
4. Выберите с помощью инструментов выделения
5. Выберите с помощью инструментов лассо
6. Настройка выбора пикселей
7. Перемещение, копирование и удаление выбранных пикселей
8. Создать временную быструю маску
9. Выберите диапазон цветов в изображении
10. Преобразование между путями и границами выделения
11. Основы каналов
12. Сохранить выделение и маски альфа-канала
13. Выберите области изображения в фокусе
14. Дублировать, разделять и объединять каналы
15. Вычисления каналов
Настройки изображения
1. Заменить цвета объекта
2. Деформация перспективы
3. Уменьшить размытие изображения при дрожании камеры
4. Примеры лечебных кистей
5. Экспорт таблиц поиска цветов
6. Настройка резкости и размытия изображения
7. Понимание настроек цвета
8. Применение регулировки яркости/контрастности
9. Настройка деталей теней и светлых участков
10. Регулировка уровней
11. Настройка оттенка и насыщенности
12. Настройка вибрации
13. Настройка насыщенности цвета в областях изображения
14. Быстрая настройка тона
15. Применение специальных цветовых эффектов к изображениям
16. Улучшите изображение с помощью настройки цветового баланса
17. Изображения с высоким динамическим диапазоном
18. Просмотр гистограмм и значений пикселей
19. Сопоставьте цвета на изображении
20. Обрезка и выравнивание фотографий
21. Преобразование цветного изображения в черно-белое
22. Корректирующие слои и слои-заливки
23. Настройка кривых
24. Режимы наложения
25. Целевые изображения для прессы
26. Настройка цвета и тона с помощью пипеток «Уровни» и «Кривые»
27. Настройка экспозиции и тонирования HDR
28. Осветление или затемнение областей изображения
29. Выборочная настройка цвета
Adobe Camera Raw
1. Системные требования Camera Raw
2. Что нового в Camera Raw
3. Знакомство с Camera Raw
4. Создание панорам
5. Поддерживаемые объективы
6. Эффекты виньетирования, зернистости и устранения дымки в Camera Raw
7. Сочетания клавиш по умолчанию
8. Автоматическая коррекция перспективы в Camera Raw
9. Радиальный фильтр в Camera Raw
10. Управление настройками Camera Raw
11. Открытие, обработка и сохранение изображений в Camera Raw
12. Исправление изображений с помощью инструмента Enhanced Spot Removal Tool в Camera Raw
13. Поворот, обрезка и настройка изображений
14. Настройка цветопередачи в Camera Raw
15. Версии процесса в Camera Raw
16. Внесение локальных корректировок в Camera Raw
Исправление и восстановление изображений
1. Удаление объектов с фотографий с помощью Content-Aware Fill
2. Content-Aware Patch and Move
3. Ретушь и исправление фотографий
4. Исправить искажение изображения и шум
5. Основные действия по устранению неполадок для устранения большинства проблем
Улучшение качества изображения и преобразование
1. Замените небо на изображениях
2. Преобразование объектов
3. Настройка кадрирования, поворота и размера холста
4. Как обрезать и выпрямить фотографии
5. Создание и редактирование панорамных изображений
6. Деформация изображений, форм и путей
7. Точка схода
8. Контентно-зависимое масштабирование
9. Преобразование изображений, форм и контуров
Рисование и раскрашивание
1. Рисование симметричных узоров
2. Рисование прямоугольников и изменение параметров обводки
3. О чертеже
4. Рисование и редактирование фигур
5. Малярные инструменты
6. Создание и изменение кистей
7. Режимы наложения
8. Добавить цвет к путям
9. Редактировать пути
10. Краска с помощью кисти-миксера
11. Наборы кистей
12. Градиенты
13. Градиентная интерполяция
14. Выбор заливки и обводки, слоев и контуров
15. Рисование с помощью инструментов «Перо»
16. Создание шаблонов
17. Создание шаблона с помощью Pattern Maker
18. Управление путями
19. Управление библиотеками рисунков и пресетами
20. Рисовать или рисовать на графическом планшете
21. Создание текстурированных кистей
22. Добавление динамических элементов к кистям
23. Градиент
24. Нарисуйте стилизованные мазки с помощью Art History Brush
25. Краска с рисунком
26. Синхронизация пресетов на нескольких устройствах
Текст
1. Добавить и отредактировать текст
2. Единый текстовый движок
3. Работа со шрифтами OpenType SVG
4. Символы формата
5. Формат абзацев
6. Как создавать текстовые эффекты
7. Редактировать текст
8. Интервал между строками и символами
9. Арабский и еврейский шрифт
10. Шрифты
11. Устранение неполадок со шрифтами
12. Азиатский тип
13. Создать тип
14. Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Windows 8
Фильтры и эффекты
1. Использование фильтра «Пластика»
2. Использовать галерею размытия
3. Основы фильтра
4. Ссылка на эффекты фильтра
5. Добавить световые эффекты
6. Используйте адаптивный широкоугольный фильтр
7. Используйте фильтр масляной краски
8. Использовать фильтр «Пластика»
9. Эффекты слоя и стили
10. Применить определенные фильтры
11. Размазывание областей изображения
Сохранение и экспорт
1. Сохранение файлов в Photoshop
2. Экспорт файлов в Photoshop
3. Поддерживаемые форматы файлов
4. Сохранение файлов в графических форматах
5. Перемещение дизайнов между Photoshop и Illustrator
6. Сохранение и экспорт видео и анимации
7. Сохранение файлов PDF
8. Защита авторских прав Digimarc
Управление цветом
1. Понимание управления цветом
2. Поддержание согласованности цветов
3. Настройки цвета
4. Дуотоны
5. Работа с цветовыми профилями
6. Документы с управлением цветом для онлайн-просмотра
7. Управление цветом документов при печати
8. Импортированные изображения с управлением цветом
9. Пробные цвета
Веб-дизайн, экранный дизайн и дизайн приложений
1. Photoshop для дизайна
2. Артборды
3. Предварительный просмотр устройства
4. Копировать CSS из слоев
5. Разрезать веб-страницы
6. Опции HTML для фрагментов
7. Изменить макет среза
8. Работа с веб-графикой
9. Создание фотогалерей в Интернете
Видео и анимация
1. Видеомонтаж в Photoshop
2. Редактировать слои видео и анимации
3. Обзор видео и анимации
4. Предварительный просмотр видео и анимации
5. Отрисовка кадров в слоях видео
6. Импорт видеофайлов и последовательностей изображений
7. Создать анимацию кадра
8. Creative Cloud 3D-анимация (предварительная версия)
9. Создание анимации временной шкалы
10. Создание изображений для видео
Печать
1. Печать 3D-объектов
2. Печать из фотошопа
3. Печать с управлением цветом
4. Контактные листы и презентации в формате PDF
5. Печать фотографий в макете пакета изображений
6. Плашечные цвета для печати
7. Печать изображений на коммерческой типографии
8. Улучшение цветных отпечатков из Photoshop
9. Устранение проблем с печатью | Фотошоп
Автоматизация
1. Создание действий
2. Создание графики, управляемой данными
3. Сценарий
4. Обработка пакета файлов
5. Воспроизведение и управление действиями
6. Добавить условные действия
7. О действиях и панели Действия
8. Инструменты записи в действиях
9. Добавить условное изменение режима к действию
10. Набор инструментов пользовательского интерфейса Photoshop для подключаемых модулей и сценариев
Подлинность содержимого
1. Узнайте об учетных данных содержимого
2. Идентификация и происхождение для NFT
3. Подключить учетные записи для атрибуции креативов
Фотошоп 3D
1. Фотошоп 3D | Общие вопросы о снятых с производства 3D-функциях

Веб-инструменты Photoshop упрощают создание компонентов для ваших веб-страниц или для вывода полных веб-страниц в предустановленных или индивидуальные форматы.

Используйте слои и фрагменты для разработки веб-страниц и элементов интерфейса веб-страниц. (См. веб-страницы «Слои и нарезка».)
Используйте композиции слоев для экспериментов с различными композициями страниц или для экспорта вариантов страницы. (См. Композиции слоев.)
Создайте скользящий текст или графику кнопок для импорта в Dreamweaver или Flash.
Создавайте веб-анимации с помощью панели «Анимация», а затем экспортируйте их в виде анимированных изображений GIF или файлов QuickTime. См. Создание кадровой анимации.
Используйте Adobe Bridge для создания фотогалереи в Интернете, чтобы быстро превратить набор изображений в интерактивный веб-сайт, используя различные профессионально выглядящие шаблоны.

Видео о разработке веб-сайтов с помощью Photoshop и Dreamweaver см. в разделе Доступ к Photoshop из Dreamweaver для улучшения веб-изображения.

Создание ролловеров

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

Photoshop предоставляет ряд полезных инструментов для создания ролловеров. images:

Используйте слои для создания первичных и вторичных изображений. Создайте содержимое на одном слое, затем продублируйте слой и отредактируйте его, чтобы создать похожее содержимое, сохраняя при этом выравнивание между слоями. При создании эффекта ролловера вы можете изменить стиль, видимость или положение слоя, настроить цвет или тон или применить эффекты фильтра. См. Дублирование слоев.
Вы также можете использовать стили слоя для применения эффектов, таких как цветовые наложения, тени, свечение или тиснение, к основному слою. Чтобы создать пару ролловеров, включите или выключите стиль слоя и сохраните изображение в каждом состоянии. См. Эффекты и стили слоя.
Используйте предустановленные стили кнопок на панели «Стили», чтобы быстро создавать кнопки прокрутки с обычными состояниями, состояниями при наведении и опускании мыши. Нарисуйте базовую фигуру с помощью инструмента «Прямоугольник» и примените стиль, например «Скошенный нормальный», чтобы прямоугольник автоматически превратился в кнопку. Затем скопируйте слой и примените другие предустановленные стили, такие как Beveled Mouseover, чтобы создать дополнительные состояния кнопок. Сохраните каждый слой как отдельное изображение, чтобы создать готовый набор кнопок для ролловеров.
Используйте диалоговое окно «Сохранить для Интернета и устройства», чтобы сохранить ролловер-изображения в веб-совместимом формате и с оптимизированным размером файла.

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

После создания набора ролловеров в Photoshop используйте Dreamweaver для размещения изображений на веб-странице и автоматического добавления кода JavaScript для ролловера.

Экспорт в Zoomify

Команда Zoomify была удалена. Посетите http://www.zoomify.com для создания и предварительного просмотра контента Zoomify.

Работа с шестнадцатеричным цветом значения

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

Выберите «Окно» > «Информация» или щелкните вкладку панели «Информация», чтобы просмотреть панель.
Выберите «Параметры панели» в меню панели. Под первым Считывание цвета или Считывание второго цвета, выберите Web Color из меню «Режим» и нажмите «ОК».
Наведите указатель на нужный цвет. для просмотра шестнадцатеричных значений.

Копировать цвет как шестнадцатеричное значение

Photoshop копирует цвета либо как HTML Атрибут COLOR, содержащий шестнадцатеричное значение (color=#xxyyzz), или только как шестнадцатеричное значение.

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

Как сделать макет или дизайн сайта в Photoshop

Продолжение

Программное обеспечение

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

Фон шаблона сайта

Ширина будущего сайта в 1200 рх

Создание дизайна или макета сайта

Группы

Верхнее меню

Иконки социальных закладок

Логотип

Нижнее меню (Главное)

Панель с информацией

Контент

Блоки с записями

Сайдбар (правая колонка)

Футер (Низ сайта)

Создание макета сайта: этапы, правила, инструменты

Что такое макет сайта и зачем он нужен

Этапы создания макета сайта

Этап 1: Формирование техзадания

Этап 2: Работа над прототипом

Этап 3: Подбор цвета

Этап 4: Подбор шрифта

Этап 5: Проработка

Этап 6: Создание гайда

Инструкция по созданию макета сайта в Фотошоп

Создание макета сайта в конструкторе

Общие правила разработки макета сайта

Правило 1: Выберите формат файлов, удобный для всех

Правило 2: Соблюдайте правила интерактивного дизайна

Правило 3: Проследите, чтобы не было дробных размеров

Правило 4: Наведите порядок в слоях и артбордах

Правило 5: Поместите элементы на отдельный артборд

Правило 6: Сопроводите макет шрифтами и иконками

Правило 7: Создавайте анимацию для демонстрации движущихся элементов

Как создать макет сайта в Photoshop

Работа с веб-графикой в ​​Photoshop

Создание ролловеров

Экспорт в Zoomify

Работа с шестнадцатеричным цветом значения

Копировать цвет как шестнадцатеричное значение

Добавить комментарий Отменить ответ

Работа с веб-графикой в Photoshop