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

Как делать макет сайта в фотошопе

2,365 просмотров всего, 1 просмотров сегодня

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

• Заказать ресурс в web-студии. Вы получите качественный продукт с продуманным юзабилити и чистым кодом. Он будет работать без багов на любом устройстве: от ноутбука вашей бабушки до айфона последней серии. Однако такое вложение требует денег, которые не всегда есть в наличии.
• Нанять фрилансера. Найти хорошего дизайнера на фрилансе – все равно что искать спонсоров для стартапа. Работа настоящего специалиста стоит дорого (см. пункт выше), а тратить время на постоянные переделки, доработки и споры с дилетантом, наверняка, не очень хочется.
• Воспользоваться онлайн-конструктором. Не рекомендуем, т.к. такие сайты практически не поддаются SEO-продвижению, а перспективу годами платить за целевой трафик из контекстной рекламы радужной не назовешь.
• Заняться созданием сайта своими руками с нуля. Владея минимальными навыками верстки работы в Фотошопе, вы сможете легко нарисовать простой макет. А затем сверстать и выложить его в Интернет.

Одним из самых популярных графических редакторов на сегодня является Adobe Photoshop. Не самый простой для новичка, но обладающий широким функционалом и разнообразным набором инструментов. Профессионалы годами постигают тонкости программы, оттачивая мастерство дизайна. Но для создания простого макета начинающему автору достаточно базовых знаний, фантазии и хорошего пошагового урока.

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

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

Прежде, чем начать: подготовительный этап

Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».
Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024×720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку:

На готовом макете сайта клеток не будет. Линии видны только во время работы с макетом и используются для того, чтобы ровно располагать элементы будущего шаблона. Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете. Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

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

Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).

Начинаем рисовать

Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

Делаем шаблон для сайта

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

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

Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:

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

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

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

В этой статье мы не будем подробно описывать, как в Photoshop отрисовать кнопки или добавить визуальные эффекты (об этом можно прочитать в специальных уроках для начинающих дизайнеров). Не будем подробно разбирать каждый из элементов страницы (от Хедера до Футера). Постарайтесь разместить на странице информацию, которая заинтересует ваших потенциальных клиентов. И не забудьте про точки захвата и формы обратной связи.

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

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

Продолжение

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

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

Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в 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 файл. Скачивайте, и смотрите если что то не поняли.

Скачать

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

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Photoshop-лектор: Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Главным образом, почти 98% проектов функциональных сайтов начинаются с разработки и рисовки веб-дизайна в Фотошопе.

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

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

• шапка;
• расположение меню;
• навигация;
• цветовая гамма;
• шрифты и т. д.

Первое что тебе нужно – концепция.

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

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

Пошаговое создание дизайна сайта в Photoshop

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

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

Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.

Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

Сверху, на панели настроек установи значение ширины – 960 px. Это будет главная рабочая область макета, в которой тебе предстоит работать.

Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).

Далее, сделай отступ между краями рабочей области макета и зоной главного контента. Перейди в меню «Выделение» – «Трансформировать выделенную область» (Select > Transform Selection). Уменьши выделение по ширине до отметки в 920 пикселов.

Следующее, что нужно сделать – создать выделение высотой в 465 пикселов, как это показано на примере.

Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).

Выбери цвета для градиента, используя палитру цветов – она на панели инструментов слева.

Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.

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

Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).

Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).

Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.

Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Выбери далее «Регулярный» и кликни на созданный тобой узор.

Выбери область как указанно на примере и примени задачу.

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.

Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).

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

Напиши название для будущих кнопок.

Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.

Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).

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

Убираем ненужные края, чтобы смотрелось аккуратнее.

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

Добавь указательные стрелки инструментом «Произвольная фигура».

Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.

Как создать профессиональный веб-макет в Photoshop

Создание красивых, чистых и функциональных веб-макетов — неотъемлемая часть жизни веб-дизайнеров. В этом уроке мы собираемся создать чистый и профессиональный веб-макет в Photoshop с нуля. Попутно вы сможете изучить полезные методы создания дизайнов. Итак, приступим!

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

Создание профессионального веб-макета Учебное пособие по Photoshop

Ресурсы

Шаг 1. Мокап

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

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

Шаг 2. Настройка холста

Итак, у нас есть чертеж для нашего макета. Давайте на самом деле соберем дизайн! Мы собираемся создать макет шириной 960 пикселей. Создайте новый документ с разрешением 1200 x 1500.

Это макет шириной 960 пикселей, поэтому нам нужно определить рабочую область, добавив направляющие. Нажмите Ctrl + A , чтобы выделить весь документ.

Перейдите к Select> Transform Selection. Уменьшите выделение до 960 пикселей в ширину. Это рабочая область макета.

Добавьте направляющие линии к выделенному.

Нам нужно создать отступ между границей и содержимым, которое мы добавим позже! С активным выделением снова выберите Transform Selection. Измените размер выделения до 920 пикселей в ширину. Это означает, что 20 пикселей заполнения с каждой стороны, всего 40 пикселей заполнения.

Добавить направляющие к выбору.

Шаг 3. Создайте заголовок

Создадим шапку макета! Сделайте выделение высотой 465 пикселей.

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

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

Это должно выглядеть так.

Далее нужно добавить подсветку в шапку. Создайте новый слой, нажав Ctrl + Alt + Shift + N . Выберите мягкую кисть диаметром 600 пикселей. Выберите цвет кисти # 19535a. Просто щелкните один раз в центре заголовка.

Сделайте выделение сверху высотой 110 пикселей.

Нажмите кнопку «Удалить», чтобы удалить выбранную часть.Это выглядит как показано ниже.

Сожмите его по вертикали, нажав Ctrl + T .

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

Создайте новый слой, нарисуйте линию выделения в один пиксель с помощью Pencil Tool с цветом # 01bfd2.

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

Примените вышеуказанный градиент.

Шаг 4: Создание узора текстуры

Теперь создайте простой узор в клетку и примените к заголовку. Выберите Pencil Tool, установите размер кисти на 2 пикселя и добавьте две точки, которые соприкасаются друг с другом углами. Выключите фон и выделите точки. Выберите «Правка»> «Определить узор».

Создайте новый слой и поместите его ниже слоя с подсветкой.Выберите область, которую мы хотим применить к узору. Нажмите Shift + F5, чтобы загрузить диалоговое окно «Заливка». Выберите только что созданный узор. И хорошо.

Выделение заполняется узором. Присмотритесь.

Плавно растушуйте узор в шапке. Добавьте маску слоя к слою с узором. Выберите мягкую кисть и рисуйте большой мягкой кистью. Выберите цвет кисти #ffffff. Уменьшите непрозрачность кисти примерно до 60% и раскрасьте. Если он вам покажется слишком сильным, настройте непрозрачность слоя индивидуально.

Красиво смешано.

Как создать чистый макет веб-сайта в Photoshop

Привет, ребята!

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

Это руководство среднего уровня, и некоторые могут показаться сложными, но почему бы не попробовать? Давайте начнем 🙂

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

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

Чтобы создать подобный веб-макет, вы должны загрузить «Linecons Free — Vector Icons Pack»

Кстати, вы можете бесплатно скачать шаблон на основе этого дизайна: Free Business Template.

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

Шаг 1

Начнем с начала. Просто запустите Photoshop и создайте новый документ ( CTRL + N ).См. Параметры ниже.

Шаг 2

Теперь вам нужно добавить узор на свой фон.

Стиль слоя -> Параметры наложения-> Наложение узора . Посмотрите на скриншоты ниже:

Шаг 3

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

Поместите несколько сеток в свой дизайн с интервалами 60 и 20 пикселей.

Шаг 4

Итак … пришло время разработать меню вашего будущего веб-сайта. Используйте инструмент Прямоугольник со скругленными углами, чтобы создать его (радиус — 3 пикселя). Ширина вашего меню — 940 пикселей, высота — 34 пикселя.

Я считаю, что создать меню сайта — несложная задача. Чтобы убедиться, посмотрите изображения ниже:

Чтобы сделать это меню более привлекательным, перейдите в Blending Options -> Drop Shadow .Используйте настройки, которые вы видите на скриншотах:

Параметры наложения-> Внутренняя тень

Я выбрал цвет # 6bafff для этой строки меню.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool.

Вы можете создать свой дизайн с любым шрифтом, который вам нравится. Я использовал шрифт Aller [жирный]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и дизайнер должен показать, как выглядит их состояние при наведении курсора.Итак, создайте прямоугольник (я использовал цвет # 5a90e5).

Наш результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Давай тоже создадим 🙂

Используйте инструмент Прямоугольник со скругленными углами (радиус — 3 пикселя), чтобы создать форму поиска со следующими размерами: 124 пикселя и 26 пикселей

Добавьте внутреннюю тень: Параметры наложения-> Внутренняя тень

Параметры наложения-> Наложение цвета , цвет- # 5a90e5

Воспользуйтесь нашим любимым инструментом Photoshop еще раз 🙂 Создайте один прямоугольник размером 41px и 32px

Параметры наложения -> Падающая тень
Параметры наложения -> Внутренняя тень

Параметры наложения -> Наложение цвета (цвет — # 6bafff)

Теперь пора использовать значки, которые мы скачали в начале этого урока. Откройте пакет Linecons Free — Vector Icons Pack и найдите там значок поиска. Просто примените к нему несколько наворотов.

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

Шаг 8

Социальные сети очень полезны и важны для каждого веб-сайта. Вот почему сегодня мы также узнаем, как создать простую кнопку Facebook. Снова с помощью инструмента Прямоугольник со скругленными углами (радиус — 3 пикселя) создадим кнопку

Затем используйте инструмент «Прямоугольник» (закругленный), чтобы создать квадрат (удерживая кнопку Shift) со следующим размером — 16 пикселей

Выберите Pen Tool и отрежьте половину этого квадрата.

Правка-> Преобразование-> Поверните на , чтобы переместить этот треугольник и разместить его в левой части прямоугольника

Выделите все ваши слои «Facebook» и объедините их (Ctrl + E).

Параметры наложения-> Внутренняя тень:

Параметры наложения-> Наложение цвета (# c1cac5)

Теперь добавьте текст «Follow» к нашей кнопке Facebook и поиграйте с его параметрами наложения.

Попробуйте создать для этой кнопки свой логотип Facebook. Например, вы можете создать букву «F», украсив ее синим цветом (# 5a90e5).

Поиграйте с параметрами наложения (добавьте белую тень)

ВАУ! Мы сделали это 🙂 Посмотрите на окончательный результат в нашей строке меню:

Шаг 9

Создайте новую фигуру: ширина 940 пикселей, высота 372 пикселей

Как всегда, добавляем тень:

И рамка: Параметры наложения-> Обводка (20 пикселей, цвет- # 6bafff)

Шаг 10

Чтобы создать красивый слайдер, мы должны добавить к нему несколько изображений.С помощью сочетания клавиш Ctrl + Alt + G создайте обтравочную маску.

Шаг 11

Снова используйте кучу бесплатных иконок. Я выбрал следующие значки: «настройки», «пузырь», «фото», «мир»

Добавляем их в наш дизайн (не забываем использовать сетку), расстояние — 180 пикселей

Шаг 12

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

Играйте с параметрами наложения: добавьте белую тень, наложение цвета (# 6aaefd) и внутреннюю тень.

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

ВАУ! Посмотрите на этот потрясающий результат!

Шаг 13

Заполните эти четыре столбца (ширина каждого — 240 пикселей) некоторым текстом «loremipsum». Лучше добавить в каждый столбец свой текст.

Шаг 14

Создать кнопку «Подробнее» с помощью инструментов, которые мы использовали ранее.

Параметры наложения -> Внутренняя тень, Падающая тень, Наложение цвета (# 919392).

Шаг 15

Добавьте текст «Читать дальше» к нашей кнопке.

Шаг 16

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

Шаг 17

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

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

Радиус — 3 пикселя, ширина и высота — 138 пикселей.

Перейдите к Параметры наложения -> Обводка , чтобы создать границу со следующими параметрами:
Размер — 20 пикселей, цвет # 919392

Скопируйте и вставьте этот элемент 5 раз 🙂 Разместите эти квадраты с интервалом 20 пикселей.

Шаг 18

С помощью обтравочной маски вставьте изображение в квадрат.

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

Шаг 19

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

Пришло время создать крутой нижний колонтитул для нашего симпатичного макета веб-сайта.Сделаем ярким 🙂

Добавьте градиент, например # 3a8df1 — # 6bafff, и внутреннюю тень

Шаг 20

Мы добавим три блока в нижний колонтитул: Быстрые ссылки, О нас и Подписывайтесь на нас

Используйте шрифт Arial Regular для заголовков (30 пикселей) и добавьте стили, как на скриншотах ниже:

Используйте шрифт Arial Regular для текста в разделе «О нас» (12 пикселей).

Текст раздела быстрых ссылок — 22px.

Поместите несколько стандартных значков в раздел Follow — RSS, Google Plus + и Twitter

Woohoo! Мы сделали это! Окончательный результат нашего урока:

Как создать простой макет веб-дизайна с помощью Photoshop

Халява: бесплатный шаблон HTML

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

50 лучших уроков по интерфейсу веб-сайта по Photoshop

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

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

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

100 лучших уроков по текстовым эффектам в Photoshop

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

Тема Shopify для товаров ручной работы в Photoshop — В этом уроке вы собираетесь создать тему веб-сайта Shopify для товаров ручной работы. ориентирован на шрифты и выбор цвета .

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

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

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

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

Создание элегантного макета блога в Photoshop — В этом уроке вы увидите процесс создания чистого минималистичного макета журнала в Photoshop с полужирным шрифтом в заголовке и элегантной типографикой .

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

Построение адаптивного портфолио временной шкалы Страница — Вот еще один аналогичный учебник по портфолио временной шкалы, но на этот раз он имеет адаптивный дизайн. Вы будете использовать некоторую адаптивную технологию вместе с CSS3-анимацией, Sass и немного jQuery .

Создание профессионального веб-макета в Photoshop — В этом уроке Photoshop вы создадите красивый чистый макет веб-сайта с нуля. Он использует слайдер изображения, логотип и текстовые блоки .

Создание одностраничного макета веб-дизайна в стиле ретро в Photoshop — В этом руководстве вы найдете объяснение того, как создать винтажный одностраничный веб-сайт с различными лентами и формами .

Текстурированный веб-сайт на открытом воздухе в Photoshop — В этой статье вы увидите, как создать веб-сайт на открытом воздухе в Photoshop.Он использует градиенты, текстуры и текстовые блоки .

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

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

Создайте инновационный сайт-портфолио с использованием альтернативного пользовательского интерфейса / UX — Создайте уникальное портфолио, которое будет выделяться из толпы в Photoshop, используя это краткое руководство.

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

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

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

Создание макета веб-сайта блога — Вот полное пошаговое руководство по созданию веб-сайта блога в Photoshop. Он включает бесплатный PSD и HTML-шаблон .

Как создать яркое портфолио Веб-дизайн в Photoshop — это простой, но длинный урок о том, как создать портфолио дизайнера в Photoshop.

Как создать элегантный дизайн веб-сайта на основе сетки — это простой урок о том, как создать темный гладкий макет веб-сайта в Photoshop. Вы будете использовать дизайн на основе сетки , градиенты и столбцы .

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

Создайте теплый, веселый интерфейс веб-сайта в Adobe Photoshop — Здесь вы узнаете, как создать веселый и уютный интерфейс веб-сайта с помощью Photoshop. Вы будете работать с узорами, простыми формами, стилями абзацев и многим другим.

Создание профессионального и чистого веб-макета (с преобразованием PSD в HTML). — Этот учебник по созданию веб-сайта разделен на две части: в первой вы создадите красивый веб-сайт в Photoshop.А во второй части вы собираетесь преобразовать свой веб-сайт из файла PSD в полный HTML .

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

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

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

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

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

Создание темного, чистого дизайна веб-сайта в Adobe Photoshop — В этом руководстве вы узнаете, как создать чистый темный веб-сайт в Photoshop. Вы будете работать с простыми формами, слоями, стилями, узорами и многим другим.

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

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

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

Создайте элегантный веб-сайт фотографии в Photoshop — Здесь вы научитесь создавать простое элегантное портфолио фотографии в Photoshop. Этот веб-сайт использовался в качестве темы WordPress, и вы можете сделать то же самое.

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

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

Как создать красивую целевую страницу с помощью Photoshop — Научитесь создавать потрясающую целевую страницу для любого продукта или услуги в Photoshop, следуя этому руководству.

Учебное пособие по дизайну веб-сайтов в Photoshop — Стильное портфолио с зернистой текстурой — Это бесплатный видео-урок о том, как создать портфолио с зернистой текстурой в Photoshop.Он имеет темную цветовую схему и текстурированный зернистый фон с градиентами .

Афро-портфолио Дизайн веб-сайтов в Photoshop — Учебник по Photoshop CC — Вот 51-минутный видеоурок о том, как создать одностраничный веб-сайт в CC Photoshop. Он имеет ярких смелых дизайнов, креативные шрифты и галерею изображений.

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

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

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

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

Создание профессионального веб-сайта (часть 1) — Это первая часть видеоурока, который научит вас создавать профессиональный веб-сайт с нуля. Вы будете использовать простые формы, значки и шрифты .

Одностраничный веб-сайт с плоским дизайном — Вот подробное часовое руководство о том, как создать веб-сайт с плоским дизайном в Photoshop и Illustrator. Вы будете использовать Photoshop для создания веб-сайтов и Illustrator для работы с векторными значками .

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

Как создать веб-сайт в Photoshop — В этом уроке вы увидите процесс создания простого веб-сайта в Photoshop. Вы будете использовать макет ноутбука, простые формы и текстовую трансформацию .

Создание плоского дизайна веб-сайта в Photoshop с использованием Flat UI — Вот видеоурок от Designmodo о том, как создать веб-сайт с использованием плоского пользовательского интерфейса. Вы будете использовать популярных техник Photoshop, которые дизайнеры используют для создания современного плоского дизайна .

Создание креативного портфолио Макет веб-дизайна в Photoshop — В этом видеоуроке вы узнаете, как создать красный креативный макет портфолио. Вы будете использовать градиентов, простые формы и векторные иконки .

Создание стильного туристического веб-сайта в Photoshop CC — Используйте Photoshop CC, чтобы создать эту удивительную страницу туристического веб-сайта. Вы увидите, как создать красивую галерею изображений, разместить видео в заголовке и добавить текстовые блоки.

Создание шаблона макета журнала в Photoshop — Вот простое руководство Photoshop о том, как создать красивый веб-сайт журнала. Вы также можете скачать бесплатный шаблон веб-сайта, показанный в этом видео .

Читайте также: 20 свежих руководств по Adobe Illustrator, которые нужно изучить в 2020 г.

Учебное пособие по веб-дизайну: 30 потрясающих макетов в Photoshop

Если ваш следующий дизайн-проект предполагает создание макета веб-сайта с нуля, вы не захотите пропустить эту статью.Я рыскал по сети в поисках лучших руководств по веб-дизайну. Эти уроки Photoshop вооружат вас всеми новейшими методами, которые помогут вам в создании веб-дизайна. Так чего же вы ждете… почему бы не попробовать? Наслаждаться!

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

Как создать элегантный дизайн веб-сайта на основе сетки

Создание современной лабораторной темы Веб-дизайн в Photoshop

Как создать винтажный файл Photoshop

Как создать стильное портфолио Концепция веб-дизайна

Создайте чистый веб-макет с помощью the 960 Grid

Создание красочного макета веб-сайта магазина сладостей в Photoshop

Создание современного веб-макета портфолио в Photoshop

Создание чистого и современного веб-дизайна в Photoshop

Создание чистого и профессионального веб-дизайна

Создайте темный бизнес макет | Grafpedia

Создайте и запрограммируйте классное приложение для iPhone на HTML5

Как создать макет веб-хостинга | Grafpedia

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

Создайте легкую тему wordpress в фотошопе

Создайте красивый и минималистичный веб-макет в Photoshop

Создайте шаблон Baby в фотошопе с помощью Complete Designer Set

Как сделать Макет сайта с высокой текстурой в Photoshop

Создание дизайна веб-сайта с акварельной тематикой в ​​Photoshop

Создание чистой элегантной темы wordpress

Как создать макет веб-сайта группы в Photoshop

Создайте простой современный веб-шаблон

Создайте строгий макет веб-сайта

Создайте элегантный веб-макет фотографии в Photoshop

Создайте действительно подробный макет Dark Web с помощью Photoshop

Макет продукта / бизнес-стиля

Создайте модный веб-макет ( PSD Template) Использование Photoshop

Создайте элегантный макет с помощью Complete Designer Set от ArtBox7. com

Как создать веб-страницу в Photoshop для Dreamweaver | Small Business

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

Создайте страницу в Photoshop

Откройте Photoshop, щелкните меню «Файл» и выберите «Создать». Выберите «пиксели» в качестве единицы измерения, а затем введите желаемую ширину и высоту своей веб-страницы. Для максимальной совместимости с конечным пользователем вы должны выбрать ширину менее 1100 пикселей. Оставьте фон белым, установите разрешение на «72» и убедитесь, что для цветового режима установлено значение «RGB Color». Нажмите «ОК».

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

Добавьте желаемый текст в макет веб-страницы с помощью инструмента «Текст» на панели инструментов. Если вы не создаете логотип, вы всегда должны использовать стандартный шрифт, который легко увидеть, например Verdana, Georgia или Times New Roman (и это лишь некоторые из них).Когда у вас есть все слои, которые вы хотите использовать для своей веб-страницы, дважды щелкните слои по одному, чтобы переименовать их. Это поможет вам запомнить, для чего предназначен каждый слой.

Перенос дизайна в Dreamweaver

Дважды щелкните каждую фигуру и текстовый слой, для которых включен конкретный цвет, и щелкните образец цвета, чтобы просмотреть HEX-код цвета. Эти коды понадобятся вам при переносе дизайна в Dreamweaver. Когда закончите, сохраните страницу в формате Photoshop по умолчанию (PSD), а затем сохраните копию в формате JPEG.JPEG будет использоваться как эталонное изображение, и вы можете использовать PSD, если хотите внести изменения.

Откройте Dreamweaver и создайте новый документ HTML. Перейдите на вкладку «Вставка», вставьте новую таблицу или DIV и установите атрибуты элемента, соответствующие тем, которые используются в макете Photoshop (например, ширина / высота и цвет фона). Ссылаясь на изображение JPEG макета веб-страницы Photoshop, введите необходимый текст в нужные места и выровняйте различные элементы, чтобы они соответствовали дизайну Photoshop.

Вернитесь к изображению в формате JPEG вашего дизайна и используйте инструмент кадрирования в Photoshop, чтобы обрезать часть изображения с логотипом. Сохраните его в папке, в которой вы сохранили HTML-файл. Вернувшись в Dreamweaver, откройте представление дизайна и щелкните в том месте, куда вы хотите вставить логотип. Откройте вкладку «Вставить» и нажмите «Изображение», чтобы вставить свой логотип на веб-страницу. Ваша страница, созданная в Photoshop / Dreamweaver, теперь готова к использованию.

Ссылки

Ресурсы

Биография писателя

Дэниел Хаттер начал профессионально писать в 2008 году.Его письма сосредоточены на компьютерах, веб-дизайне, разработке программного обеспечения и технологиях. Он получил степень бакалавра искусств в области медиа, разработки игр и информационных технологий в Университете Висконсин-Уайтуотер.

Создайте чистый современный дизайн веб-сайта в Photoshop

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

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

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

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

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

Разместите направляющие шириной 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы.

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

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

Тонкие штрихи текстуры могут действительно оживить дизайн. Выделив область заголовка с помощью маски, нажмите CMD + SHIFT + C, чтобы скопировать объединенное, затем вставьте на новый слой. Перейдите в меню «Фильтр»> «Шум»> «Добавить шум», чтобы создать простую текстуру, затем установите режим наложения на «Умножение» и уменьшите непрозрачность в соответствии с требованиями.

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

Используйте инструмент «Текст», чтобы создать текст основной навигации, установите его в средне-серый цвет и используйте более темную версию для активной ссылки.

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

Продолжайте конкретизировать вводный контент, но на этот раз используйте Arial или Helvetica в качестве шрифта, чтобы текст можно было установить в обычном старом HTML без каких-либо методов замены изображения.

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

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

Под основным заголовком нарисуйте еще одно выделение и залейте серо-белым градиентом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следите за новостями в следующем руководстве, в котором мы рассмотрим кодирование визуального элемента в полную веб-страницу XHMTL / CSS.

Создание веб-страницы с помощью Photoshop

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

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

Начало работы

Создайте большой документ Photoshop, размером не менее 1200 пикселей в ширину на 900 пикселей в глубину (позже это можно будет увеличить с помощью Canvas Size), RGB с разрешением 72 dpi.

Затем я обычно центрирую дизайн в пределах холста шириной 1200 пикселей, рисуя пару направляющих. (Домашняя мозоль: веб-сайты, выровненные по левому краю окна браузера.) Нарисуйте вертикальные направляющие, перетаскивая их за вертикальную линейку по бокам документа. Если вы не видите линейки, нажмите Cmd (Mac) / Ctrl (PC) -R.

Вы можете сделать это на глаз, хотя я обычно хочу, чтобы ширина веб-сайта была ровно 1024 пикселя. Увеличьте масштаб [Cmd (Mac) / Ctrl (PC) -plus] для большей точности.Вы можете просмотреть / скрыть направляющие, выбрав Cmd (Mac) / Ctrl (PC) — ;.

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

Использование векторов, фигур и смарт-объектов

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

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

Еще одним преимуществом смарт-объектов в Photoshop является то, что вы можете дважды щелкнуть их значок в палитре слоев и отредактировать графику в Illustrator после сохранения обновлений смарт-объекта в документе Photoshop. Если этот смарт-объект был скопирован и использован в дизайне несколько раз (стрелка, значок, графическое устройство), то будут обновлены всех экземпляров этого смарт-объекта.Это круто!

Слои имен и группы слоев, чтобы все было организовано

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

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

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

Стили слоя для тени текста

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

Для темных теней текста , например {1px 1px # 000}, используйте эффект «Тень» по умолчанию, изменяя только расстояние и размер на 1 пиксель.

Для светлых теней текста , например {1px 1px # 000}, используйте эффект Drop Shadow по умолчанию, изменяя только цвет с черного на белый, режим наложения с Mulitply на Normal, а расстояние и размер на 1 пиксель ( Смотри ниже).

Захватите свой цвет с помощью пипетки

Чтобы использовать инструмент «Пипетка», просто нажмите клавишу I и щелкните область, из которой вы хотите взять образец цвета. Затем щелкните цвет переднего плана в нижней части панели инструментов, чтобы открыть палитру цветов.

Затем вы получаете HEX-версию цвета, которую можете использовать в своей разметке CSS. Нажмите «Добавить в образцы», если вы хотите легко получить доступ к этому точному цвету в другом месте дизайна.

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

Вы наконец-то закончили страницу и сохранили ее в формате JPG, что вы делаете? Вы просто отправляете JPG клиенту? Нет! Разместите его на веб-странице, чтобы клиент мог просматривать его в браузере, чтобы не было путаницы в том, как он выглядит.

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

Вот HTML-код, который я использую для отображения большого JPG с центром на веб-странице:

jpg ”/>

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

Сохраните его как «home-1.html» вместе с JPG в папке на вашем веб-сайте (я использую / dev / client-name) и отправьте ссылку клиенту. Когда клиент возвращается с комментариями, просто повторно сохраните HTML-файл как «home-2.html» и не забудьте изменить имя и заголовок изображения.Это позволяет легко ссылаться на более ранние версии.

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

Углубленное обучение : Создание веб-сайта в Photoshop и Illustrator

А ты?

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