Как создать макет сайта в фотошопе: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в 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. Детальное руководство

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

get price

Cоздание макета сайта без специфичных навыков в Photoshop

Создание макетов сайтов: Развлечение для избранныхРазработка макета сайта: Этапыспособ №2. Создание макета сайта в Фотошопепочтиспособ №3. Онлайн-Инструмент для создания макетовПричина #1. Интерес к разработке макетов сайтаВаши интересы очень специфичны? Мы здесь никого не осуждаем. Самим же стало когда-то интересно, и начали этим заниматься! К тому же, тяга к познанию наша отличительная черта. Хвалю ваше любопытство.Причина #2. Разработка макета сайта как вид заработкаЕсли вы хотите стать в будущем веб-дизайнером, с чего-то же надо начинать, а именно с элементарного макета страницы сайта. Быстрый результат своей работы мотивирует как ничто другое. К счастью, в статье предлагаю только блиц-способы создания макета. Кстати, работа веПричина #3. Составление ТЗ на разработку макета сайта для дизайнераЧасто перед недизайнерами стоит необходимость показать макет веб-сайта иногда просто для иллюстрации своей идеи, но иногда и для подкрепления ТЗ. Конечно, это не обязательно и грамотный дизайнер сам поймет вашу идею и даже сделает лучше, чем вы ожидаете. Однако ес在koloro.ua上查看更多信息4.2/5(425)

7 лучших изображений доски ?Макет резюме? в 2020 г Макет

14.03.2020 Просмотрите доску ?Макет резюме? пользователя Albert Mukhamitov в Pinterest. Посмотрите больше идей на темы ?Макет резюме, Резюме, Дизайн резюме?.

get price

Старт в Figma для верстальщика — Блог HTML Academy

Jul 15, 2019Макет проекта должен иметь расширение .fig или .sketch. При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в

get price

Как сделать макет сайта в фотошопе — инструкция и пример

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

get price

Макет сайта: как сделать дизайн и передать исходники

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

get price

9 лучших примеров макетов сайта и идей для веб-дизайна в

Nov 25, 2018Макет сайта кафе Beverages состоит из большого блока в заголовке и нескольких маленьких блоков, которые

get price

Макеты сайтов .PSD

Макеты сайтов в формате psd. Макет сайта для игрового проекта. Макет был разработан в первую очередь для игровых веб-ресурсов.

get price

Готовые PSD макеты сайтов

Яркий, динамичный макет сайта. psd макет для создания сайта компании Портфолио в стиле flat.

get price

9 инструментов для создания прототипа сайта

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

get price

Макет сайта Bootstrap для отзывчивых веб-ресурсов ⋆ Inbenefit

Выберите макет сайта Bootstrap, чтобы ваш будущий сайт с уникальным дизайном был отзывчивым и работал уверенно на мобильных устройствах!

get price

Готовые PSD макеты сайтов

Яркий, динамичный макет сайта. psd макет для создания сайта компании Портфолио в стиле flat.

get price

Макеты сайтов .PSD

Макеты сайтов в формате psd. Макет сайта для игрового проекта. Макет был разработан в первую очередь для игровых веб-ресурсов.

get price

Psd макеты сайтов можно скачать бесплатно

Описание: Макет для сайта в розово-коричневых тонах, psd макет разложен по слоям. Шоколадные сладости- идеален для кондитерской фабрики или кафе.

get price

Разработка макета веб-сайта и веб-графики в Adobe Illustrator

Разработка макета веб-сайта и веб-графики в Adobe Illustrator. Adobe Illustrator Чтобы создать интерактивный веб-макет, рассмотрите перечисленные ниже элементы.

get price

20 крутых PSD макетов для верстки Типичный верстальщик

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

get price

Пошаговое создание макета сайта в фотошопе шаблон для

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

get price

Используем Adobe Illustrator для создания макета страницы

Шаг первый Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта, у большинства из них немаленькие мониторы. Не забудьте выставить Color Mode в RGB.

get price

Дизайн сайта в figma. Как это сделано YouTube

May 28, 2019В этом уроке я буду создавать дизайн первого экрана в программе figma. Рубрика ?Как это сделано? Мой блог vk

get price

6 сайтов с бесплатными шаблонами InDesign / Полезное

В папке с шаблоном всегда находится файл ?Read me?, где содержатся советы по работе с документом, а также ссылки на бесплатные изображения и шрифты, которые можно использовать в

get price

Шаблоны сайтов PSD

Шаблоны сайтов → Легкий макет сайта с морем в шапке 30-03-2017, 13:23 Просмотров: 12374 Подробнее

get price

Как изменить внешний вид сайта Cправка Сайты

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

get price

Скачать бесплатно PSD HTML CSS

Бесплатные PSD шаблоны сайтов. Лэндинговые страницы, сайты с портфолио, сайты визитки, макеты интернет магазинов скачать бесплатно в psd формате.

get price

Профессиональный макет сайта в фотошоп / Фотошоп-мастер

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

get price

Макет сайта Bootstrap для отзывчивых веб-ресурсов ⋆ Inbenefit

Выберите макет сайта Bootstrap, чтобы ваш будущий сайт с уникальным дизайном был отзывчивым и работал уверенно на мобильных устройствах!

get price

Разработка макета веб-сайта и веб-графики в Adobe Illustrator

Разработка макета веб-сайта и веб-графики в Adobe Illustrator. Adobe Illustrator Чтобы создать интерактивный веб-макет, рассмотрите перечисленные ниже элементы.

get price

Оцените мой первый макет сайта. SEO форум MaulTalk

Feb 01, 2010Сделал свой первый в жизни макет. Интересно ваше мнение и сколько он может стоить.[attachment=5076:_____.jpg]

get price

20 крутых PSD макетов для верстки Типичный верстальщик

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

get price

Несвойственная победа: почему нокаут Уайта может считаться

Сделав шаг вперёд, он повис на Русском Витязе, который тут же его сбросил с себя. В итоге Поветкин отпраздновал 23-ю победу в карьере. Карлос Такам, Камерун / 24 октября 2014-го

get price

Как создать макет слайда в Microsoft PowerPoint

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

get price

Как сверстать шаблона сайта из PSD в HTML и CSS Beloweb.ru

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

get price

6 сайтов с бесплатными шаблонами InDesign / Полезное

В папке с шаблоном всегда находится файл ?Read me?, где содержатся советы по работе с документом, а также ссылки на бесплатные изображения и шрифты, которые можно использовать в

get price

Шаблоны сайтов, скачать бесплатно готовые html макеты и

Для редактирования шаблона сайта нужно открыть html код, другими словами пароль шаблона, наведя на него стрелку мыши и выбрав «Просмотр HTML-кода». После этого откроется текстовый документ, в котором требуется заменить

get price

Скачать бесплатно PSD HTML CSS

Бесплатные PSD шаблоны сайтов. Лэндинговые страницы, сайты с портфолио, сайты визитки, макеты интернет магазинов скачать бесплатно в psd формате.

get price

Как быстро создать макет сайта 1C-UMI

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

get price

Требования к дизайн-макетам сайтов Веб студия Флаг

На каждую страницу сайта должен быть отдельный .psd файл. Допустимо рисовать Pop up окна на страницах и размещать их в отдельных папках. Не использовать никаких режимов наложения слоев, кроме normal.

get price

Создать картинку, документ или дизайн графики онлайн Canva

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

get price

Размеры макета сайта? — Хабр Q&A

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

get price

Как сделать макет или дизайн сайта в Photoshop — Дизайн студия ApelsIn design

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

как освоить веб дизайн

как поменять дизайн сайта на ucoz

веб дизайн с чего начать обучение

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

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

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

Аспекты хорошего макета

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

Отзывчивость и гибкость

Разбитие контент на определенные колонки помогает веб-разработчикам понять, каковы будут их действия на различных размеров экранах. Также можно создать «гибкую решетку» в HTML и CSS, основой которой будут проценты, а не фиксированные значения. Можно простым образом уменьшить количество некоторых колонок, преобразовать контент.

Выравнивание и баланс

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

Единообразность

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

Наладка и применение системы сеток

Давайте рассмотрим образец сайта, на котором используется система сеток.

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

Основной принцип создания собственного макета с сеткой

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

К примеру, ширина страницы будет составлять 1140 пикселей, сетка будет состоять из 12 колонок, а пробелов будет 11. Первоначально необходимо понять, какой будет ширина пробелов: например, 12 пикселей.

Сделав все расчеты, в итоге получаем макет, в котором будет 12 колонок по 84 пикселя и 11 пробелов по 12 пикселей, а вся ширина будет составлять 1140 пикселей. Эту технику можно использовать для любых расчетов, главное знать ширину страницы и пробелов.

Настройка кривых в Photoshop

Это довольно скучная и затратная в плане времени задача. Для того, чтобы это процесс был быстрее и веселее, большинство дизайнеров рекомендуют использовать Photoshop CC 2014. В нем можно найти новую функцию, которая называется Guide Layout. Она даст возможность в короткое время создать нужную сетку с вертикальными и горизонтальными кривыми.

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

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

Примеры веб-проектов, которые основаны на сетке

Рассмотрим довольно интересные примеры веб-сайтов и то, как используется сетка, осуществляется ее наполнение текстом.

Инструменты для веб-дизайна — обзор программ и инструментов для дизайна сайтов

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

Базовые программы

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

Семейство Adobe

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

Adobe Photoshop — базовое приложение, которое предназначено как для обработки изображений, так и для создания дизайна в целом. Так как Photoshop до сих пор является самым популярным продуктом среди дизайнеров, верстальщиков и разработчиков (в основном от дизайнеров требуется предоставить макет в формате .psd), владение этим инструментом важно для полноценной работы над проектом.

Из недостатков программы выделяют следующие:

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

Adobe Experience Design (Adobe XD) — относительно новая программа линейки Adobe, специально предназначенная для проектирования интерфейсов. Приложение поддерживает векторную графику и верстку, есть возможность работать с сетками, стандартными блоками и типографикой.

Кроме Adobe Photoshop и Adobe XD у компании есть еще несколько продуктов, которые используются дизайнерами:

1. Adobe Illustrator — программа для создания векторных изображений, например, логотипов, иллюстраций и так далее.
2. Adobe After Effects — приложение для создания анимации. В основном используется для демонстрации дизайна или разработки анимированных элементов.
3. Adobe InDesign — приложение, которое используется для верстки как полиграфии, так и интернет страниц.

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

Sketch

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

В основном Sketch рассчитан на создание сайтов блочной структуры — в программе можно создавать блоки, кнопки, формы и прочее одним движением мыши. Есть возможности для глубокой работы с типографикой, модульными сетками. Главный недостаток программы — ограниченная совместимость с ОС. Sketch разработан специально для Mac OS и не имеет аналога для Windows.

Figma

Еще одна программа на рынке, которая является главным конкурентом Sketch — графический редактор Figma. Данное приложение работает как на Windows, так и на Mac OS, поэтому быстро стало популярным среди веб-дизайнеров. Одно из главных преимуществ программы — возможность работать напрямую через браузер и сохранять результаты своей работы в облаке.

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

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

• специфика дизайна. В основном современные сайты имеют блочную структуру, которую удобнее реализовывать с помощью простых элементов. В таком случае Sketch и Figma подходит большинству дизайнеров. Однако если макет включает в себя сложную обработку изображений, без Photoshop не обойтись;
• технические возможности разработчиков. Часто верстальщики работают с форматом .psd и не используют другие программы кроме линейки Adobe. В этом случае дизайнерам приходится подстраиваться под других специалистов и выбирать нужное приложение, исходя из возможностей разработчиков;
• удобство пользования. Сложность интерфейса — одна из особенностей работы с линейкой продуктов Adobe. Так как инструменты не предназначены напрямую для проектирования интерфейсов, у дизайнеров возникают сложности при создании макетов, в отличие от специализированных программ Sketch или Figma.

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

Графика

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

Платные стоки

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

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

Бесплатные стоки

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

1. Pixabay

Сервис Pixabay — сайт, на котором представлены бесплатные изображения достаточно хорошего качества.

На сайте представлено более 1 миллиона изображений, которые можно использовать в дизайне без указания авторства. Есть как векторная, так и растровая графика.

2. Unsplash

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

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

3. Freepik

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

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

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

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

Работа с цветом

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

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

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

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

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

Типографика, анимация и 3D

Что касается типографики, есть сервисы, которые помогают дизайнерам подобрать шрифтовые пары или, например, определить шрифт на изображении. Так работает один из самых известных сервисов, посвященных шрифтам WhatTheFont:

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

Также дизайнерам важно уметь создавать макеты, где присутствуют анимационные элементы — движение всегда привлекает внимание пользователя, поэтому анимация является одним из инструментов повышения конверсии сайта. Мы уже говорили про программу Adobe After Effects, которая часто используется разработчиками для презентации и создания анимационных элементов.

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

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

Некоторые веб-дизайнеры занимаются не только проектированием интерфейсов и рекламной графикой с помощью 3D моделирования. Есть довольно сложные для освоения программы, которые позволяют создавать различные 3D модели и использовать изображения в веб-дизайне. Одни из самых популярных программ 3D моделирования — AutoDesk 3Ds Max и Cinema4D.

Владение программами 3D моделирования является дополнительной компетенцией для веб-дизайнеров, однако иногда данный навык бывает полезным при создании эффектной рекламной графики, экстерьеров и интерьеров зданий, а также 3D типографики (подробнее об этом элементе дизайна можно прочитать в этой статье).

Студия IDBI использует множество различных инструментов для создания дизайна сайтов. Мы можем разрабатывать как сложные интерфейсы с глобальной обработкой изображений и созданием новых, так и легкие сайты с минималистичным дизайном. В работе мы используем и традиционную линейку Adobe, и более современные продукты. Наши работы можно посмотреть в разделе «Портфолио».

Макет – основа будущего сайта! Рассмотрим основные программы

Содержание статьи

Как создать макет сайта – несколько полезных советов

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

Зачем нужен макет

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

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

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

Moqups

Это бесплатный онлайн-инструмент для создания макетов и прототипов. Основа платформы на HTML5. В ней можно создавать проекты в векторе, которые не будут зависеть от разрешения экрана. Программа дает возможность объединять страницы со ссылками, экспортировать файлы в PDF и PNG  и многое другое.

AXRE

У этой программы для создания макета сайта есть бесплатная версия, в которой можно опробовать функционал. Полная версия стоит от 300$ до 900$. К одному проекту можно подключать разных пользователей и работать удаленно. Есть функция предпросмотра проекта в браузере, возможность публиковать макет в облаке. Одна из полезнейших опций: перевод каркаса в интерактивный режим. Можно показывать переходы по ссылкам и нажатия на кнопки.

Photoshop

Для начинающих дизайнеров – то, что нужно. В этой программе для создания макетов сайтов есть множество инструментов и фильтров. Работа ведется со слоями, можно визуализировать дизайн будущего сайта. Photoshop поддерживает много графических форматов, в основном предназначен для растровых изображений. Продукт от Adobe платный, однако, существуют бесплатные аналоги со схожими функциями: «Krita» и Gimp.

Balsamiq Mockups

Невероятно популярное приложение, которое имеет десятки встроенных компонентов для пользовательского интерфейса. Любой элемент можно перетащить на темный фон. Готовый прототип экспортируется в PDF и PNG. Этот инструмент для прототипирования можно интегрировать в Google Docs для импорта ваших файлов.

MOCKPLUS

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

Wireframe.cc

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

Marvel

Эта программа для создания макета сайта бесплатна, если работает один пользователь и всего над двумя проектами. За 12$ можно получить возможность создавать любое количество прототипов. Разрабатывать дизайн можно прямо в Marvel или экспортировать макеты из Photoshop и добавлять анимацию и переходы.

Несколько полезных советов

Приложений для прототипирования множество. Однако какое бы вы ни выбрали, принципы работы над макетом общие:

1. Необходимо тщательно продумать архитектуру будущего сайта. Это можно сделать даже на бумаге или воспользоваться онлайн-инструментами: «MindMup».

2. Продумайте цветовое оформление. Здесь тоже важно не переборщить с яркими красками: выберите основной цвет, акцентные оттенки и цвет фона. Обращайте внимание на целевую аудиторию, и с какой цветовой гаммой ассоциируется ваш продукт у клиента.

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

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

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

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

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

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

САЙТ ЗА 15 МИНУТ ? ЛЕГКО !

Facebook

Twitter

Вконтакте

Google+

Как нарисовать шаблон для сайта

Вам понадобится

• — программа Adobe Photoshop.

Инструкция

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

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

Запустите Фотошоп, создайте новый проект размером 1200х1600, установите прозрачный фон. Включите инструмент «Линейка», если он еще не включен, для этого нажмите комбинацию клавиш Ctrl+R. Включите привязку: «Просмотр» — «Привязка».

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

Найдите фон для вашего шаблона, это должна быть небольшая картинка с повторяющимся рисунком. Откройте ее в Фотошопе, выделите, скопируйте. После этого вставьте в шаблон столько раз, сколько понадобится для его заполнения фоном. Вставка производится так: «Редактирование» — «Вставить», после чего перетягиваете участок фона в нужное место. Еще быстрее вставлять изображение командой Ctrl+V. Точно так же добавьте фон для шапки сайта. Вы можете использовать для создания фона и различные градиентные заливки.

При помощи инструмента «Карандаш» проведите границы шаблона, ориентируясь на уже проведенные линии (то есть поверх них). Вы получили основу простейшего шаблона, теперь надо дополнить ее нужными деталями – кнопками навигации, строчками меню, различными украшающими элементами и т.д. О том, как создавать кнопки и другие элементы, лучше прочитать в соответствующих статьях, посвященных работе с Adobe Photoshop.

Шаблон создан, теперь необходимо разрезать его на кусочки для их вставки в html-страницу. Для разрезания воспользуйтесь инструментом «Раскройка» (Slice Tool). Чтобы найти его, щелкните правой кнопкой мышки инструмент «Рамка» и выберите в открывшемся меню «Раскройку». Теперь вы можете раскроить шаблон нужным образом, затем сохранить: «Файл» — «Сохранить для Web». В открывшемся окне выберите тип файлов: HTML&images, укажите имя файла: index.htm и сохраните его. У вас появятся файл index.htm и папка images с нарезанными изображениями.

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

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

Создание рамы

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

Откройте Photoshop и выберите размер холста. Если у вас еще нет сведений о своем сайте, подойдет стандартный формат: 1000 пикселей в ширину и 1200 пикселей в высоту.Если вам нужна большая детализация вашего макета, например, в случае сложных детализированных фоновых изображений, увеличьте разрешение до 300 или 600 пикселей на дюйм. Для более быстрой загрузки веб-сайтов со средней детализацией фона вполне подойдет значение по умолчанию 72 PPI. Если вы собираетесь использовать этот макет внутри темы WordPress, вы можете узнать у поставщика тарифного плана WordPress или разработчика темы, чтобы убедиться, что размеры совместимы с вашей темой.

Создание фантастических фонов

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

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

Размещение вашего логотипа Раздел

Теперь, когда размер вашего холста определен и создан, создайте новый слой заголовка с помощью удобного сочетания клавиш Ctrl, Shift, N. Назовите слой «Logo / Header». Используя инструмент выделения, уменьшите высоту слоя, чтобы покрыть верхнюю четверть или верхнюю четверть. пятую часть вашего холста на всю ширину. Создайте текстовое поле на правом краю этого нового слоя с помощью инструмента «Текст». После выбора цвета и размера шрифта введите название или номер вашей компании в этой области.На левом поле этого слоя вы хотите импортировать изображение вашего логотипа.

Панель навигации

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

Область содержимого веб-сайта

На этом этапе у вас есть потрясающий фон с логотипом и информацией о компании, размещенной поверх него. Вы оставили место для панели навигации или создали ее с помощью прямоугольного переключателя и затененного текста. Теперь вам нужно оставить место для основной части вашего сайта. Начиная после скошенного края, примерно в 50 пикселях от левого поля создайте новый слой для тела сайта. Оставьте 50 пикселей на каждом поле, чтобы текст не было трудночитаемым по мере того, как фон темнеет.Назовите новый слой «Body», чтобы вы могли легко найти, где разместить свой контент позже. Когда вы закончите создание шаблона, вы просто вставите текстовые и графические файлы в эту область, чтобы завершить создание своего веб-сайта.

Нижний колонтитул и контактная информация

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

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

Разработка макета чистого бизнеса

Я вернулся!

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

Я также хотел бы поблагодарить всех посетителей PSDTUTS, которые посетили сайт сегодня. Мне посчастливилось опубликовать в их замечательном посте два урока: 40 темных и футуристических эффектов Photoshop. Приятно, что все вы здесь зашли на сайт, и я надеюсь, что вы оставите комментарий или подпишетесь.

Введение

Макеты

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

Окончательное изображение

Окончательное изображение, которое мы будем создавать, показано ниже:

Шаг 1

Создайте новый документ (900X900 пикселей), а затем с помощью инструмента выделения создайте тонкий прямоугольник в верхней части изображения. Залейте его линейным градиентом от 7EB3DD до 4C8DBF. Затем перейдите к параметрам наложения слоя и примените внутреннюю тень 1 пиксель, а затем тень. Вы можете увидеть настройки этих эффектов ниже, а также крупный план результата.

Шаг 2

Теперь создайте текст для вашего меню. Чтобы сосредоточить свой текст, я удерживаю свой текстовый инструмент, а затем перетаскиваю «текстовое поле» от одного края моего изображения к другому, затем я просто выбираю «центр» в качестве выравнивания текста и набираю его оттуда. Я использую шрифт arial размера 12 и обязательно уменьшаю кернинг буквы до -50 в окне «символов». Затем я создаю темно-синий прямоугольник со скругленными углами (радиус 5 пикселей) на слое под моим текстовым слоем.Я уменьшаю непрозрачность этого слоя-фигуры до тех пор, пока он не создаст легкий эффект «наведения» вокруг моей ссылки меню «HOME». На изображении ниже показано текущее меню крупным планом.

Шаг 3

Затем я создаю новый набор слоев под моим набором слоев меню. Я создаю новый слой и называю его «основная область». Затем создайте большое прямоугольное выделение в моем меню с помощью инструмента выделения. Я заполняю его линейным градиентом от 18639B до 407CAC. Тонкая тень, примененная к меню ранее, теперь создает приятный переход между этой областью и меню.

Шаг 4

Теперь создаю новый документ 14X14px. Я использую свой инструмент выделения, чтобы сделать квадраты размером 1 пиксель в верхнем / левом углу моего изображения (с промежутками в 1 пиксель между каждым квадратом). Затем я перехожу к редактированию> определению шаблона и называю свой шаблон «сеткой». Видите, к чему я еще иду? На изображении ниже я выделил мой узор на черном фоне, чтобы вы могли его легко увидеть, а также для демонстрации крупным планом.

Шаг 5

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

Шаг 6

Создайте новый документ (454X454px) и перейдите в режим просмотра> показать> сетка. Затем, используя основные линии сетки в качестве направляющих, выберите инструменты выделения в строке 1 пиксель и области столбца 1 пиксель и создайте черные линии, соответствующие макету сетки.

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

Шаг 7

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

Шаг 8

Теперь продублируйте слой с графиком и переместите дубликат под оригинал. С помощью курсоров клавиатуры переместите дубликат на 10 пикселей вниз и на 10 пикселей влево, затем уменьшите его непрозрачность на 20% (то есть с 80% до 60%). Повторите этот шаг несколько раз, каждый раз уменьшая непрозрачность дублированного слоя на 20%. Когда вы это сделаете, объедините все слои с графиком (включая исходный) и обрежьте нижнюю область, которая накладывается на белый фон.

Шаг 9

Теперь создайте новый слой под слоем графика, который называется «линия пути». Создайте изогнутую линию контура с помощью инструмента «Путь», а затем с помощью белой кисти размером 1 пиксель, выбранной правой кнопкой мыши, щелкните свой путь и выберите «обводка контура». Это должно обвести ваш путь линией в 1 пиксель. Затем щелкните правой кнопкой мыши свой путь и выберите «Удалить путь». Дублируйте этот слой, переместив дублирующую линию на 3 пикселя выше оригинала. Повторите этот шаг несколько раз, а затем по мере удаления от исходной линии увеличивайте расстояние между линиями.После создания нескольких линий, разделенных на 3 пикселя, я начал делать линии на расстоянии 4, 5, 7, 8 пикселей и, наконец, 10 пикселей. Это создает иллюзию формы / перспективы. Затем объедините все слои с контурными линиями вместе и уменьшите непрозрачность объединенного слоя до 20%.

Шаг 10

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

Шаг 11

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

Шаг 12

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

Шаг 13

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

Шаг 14

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

Шаг 15

Теперь создайте новый набор верхних слоев и новый слой под названием «нижний колонтитул». Перетащите прямоугольную рамку в нижнюю часть макета под содержимое.Залейте выделение линейным градиентом от 5389B4 до 1A639B. Затем примените центральный текст об авторских правах, используя технику текстовых полей, показанную ранее.

Шаг 16

Теперь создайте новый набор слоев под названием «заголовок». Скопируйте и вставьте изображение графика в новый слой и измените его размер, чтобы он хорошо вписался в логотип. Затем продублируйте этот слой и переместите дубликат под оригинал. Перейдите к параметрам наложения нового слоя и примените наложение цвета (9AB7CE). Переместите дубликат слоя примерно на 5 пикселей влево и на 5 пикселей вниз — это создаст красивый чистый эффект тени.Затем добавьте текст, чтобы закончить свой логотип.

И мы готовы!

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

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

Загрузить исходный файл для этого учебного курса

Об авторе:

Том — основатель PSDFAN. Он любит писать уроки, узнавать больше о дизайне и взаимодействовать с сообществом. На более интересной ноте он также может сыграть пьяного зубного героя гитары.

Похожие сообщения

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

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

Окончательный результат

Учебные ресурсы

Давайте начнем

1. Первое, что нам нужно сделать, это создать новый документ с размерами 1020 × 1200.

2. Используя Paint Bucket Tool (G) залейте фоновый слой цветом # D7D7D7.

3. Затем мы начнем с контейнера, который будет содержать нашу регистрационную информацию в верхней части нашей страницы.Используя инструмент Rectangle Marquee Tool (M), сделайте выделение, подобное приведенному ниже, и залейте его цветом # 000000.

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

5. Следующее поле для входа в систему. Убедитесь, что ваш передний план установлен на # 313131, а затем воспользуйтесь инструментом Rounded Rectangle Tool (U) с радиусом 3 пикселя, чтобы создать прямоугольник, подобный следующему.Это будет вашим полем ввода для вашей формы входа. Цвет входящего текста — #FBFCDD. Вы будете использовать тот же метод для поля пароля.

6. Для кнопки входа мы снова хотим использовать инструмент Rounded Rectangle Tool (U) с радиусом 3 пикселя и создать прямоугольник, который выглядит примерно так:

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

8. Добавьте текст на свой слой, в данном случае «войдите в систему», и он будет выглядеть примерно так.Затем вы также можете продублировать стили для кнопки регистрации.

9. Снова используя инструмент Rectangle Marquee Tool (M), мы хотим создать фон для нашего заголовка. Создайте выделение, подобное приведенному ниже, и залейте его # 000000.

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

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

12. Затем установите режим наложения слоев на Overlay и уменьшите непрозрачность примерно до 6%. Затем добавьте следующие параметры наложения к слою полутонов:

13. Нам нужно организовать, где все текстовые ссылки будут отображаться в нашем заголовке, и где будет размещен наш текстовый логотип. В логотипе используется шрифт Calibri с цветом #FFFFFF.Значок взят из набора значков для молока, представленного в учебных материалах. Для наших ссылок я использовал шрифт Helvetica Bold с цветом # F7F6F6.

14. Чтобы представить нашу активную ссылку, мы снова хотим использовать инструмент Rounded Rectangle Tool (U) и создать форму, подобную следующей:

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

16. Это наш заголовок, а теперь пора перейти к окну поиска.Эти слои должны быть выше слоев заголовков, которые мы только что создали. Снова используя инструмент Rectangle Marquee Tool (M), сделайте выделение, подобное приведенному ниже, и залейте его цветом # 000000.

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

18. Затем, используя инструмент Rectangle Marquee Tool (M), создайте прямоугольник, подобный приведенному ниже, и залейте его цветом #FFFFFF. Затем уменьшите заполнение его слоя до 30%.

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

20. Для поиска мы хотим использовать инструмент Rounded Rectangle Tool (U) с радиусом 10 пикселей, чтобы создать что-то вроде этого:

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

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

23. Последнее, что нам нужно добавить в этот раздел, — это раскрывающееся меню категорий. Для этого используйте инструмент Rectangle Marquee Tool (M), чтобы сделать выделение, подобное приведенному ниже.

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

25. Используя инструмент Polygonal Lasso Tool (L), нарисуйте треугольник, подобный приведенному ниже, и залейте его цветом # 000000. Затем добавьте текст «категории» цветом # 323232.

26. Для нашей «вводной» коробки я хотел создать стиль, похожий на тот, который использует themeforest. Для этого снова используйте инструмент Rectangle Marquee Tool (M).

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

28. Затем я добавил фоновое изображение. Для этого я просто создал черный ящик внутри нашего контейнера. Затем я начал собирать миниатюры тем по очереди. Как только это было завершено, я решил объединить эти слои и снизить непрозрачность до 20%.Остается добавить текст. Первая и вторая строки текста — #FFFFFF, третья строка — #FBFCDD, а синяя — # 67C0ED.

29. В поле «Рекомендуемые темы» добавьте значок сердца из пакета Mono Icon Pack, а затем добавьте текст заголовка с цветом # 212121. Добавьте следующие параметры наложения к текстовому слою:

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

31.Проделайте то же самое с недавним тематическим разделом, а затем пора перейти к нашему нижнему колонтитулу.

32. Нижний колонтитул располагается после верхнего колонтитула. Так что возвращайтесь к шагу 9, пока не дойдете до этой точки:

33. Для заголовков используйте цвет #FFFFFF, а для описания и ссылок используйте цвет # CADEF2.

34. Последнее, что нам нужно сделать, это создать разделители между каждой текстовой областью. Используя инструмент Rectangle Marquee Tool (M), сделайте выделение шириной 1px и залейте его цветом # 030508.

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

36. Когда все будет сказано и сделано, ваш шаблон будет выглядеть примерно так:

Наш курс веб-дизайна

Создайте прозрачный макет веб-сайта в Photoshop | Интернет-ресурсы

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

Окончательный результат

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

Фон

Шаг 1
Начнем с создания нового документа размером 2000x2000px.

Шаг 2
Используя инструмент выделения, создайте прямоугольник шириной 500 пикселей и высотой 1500 пикселей.Заливка черным

Шаг 3
Перейдите в Edit> Define Brush Preset . Измените имя на «Квадратная кисть» и нажмите ок. Теперь у нас должна быть кисть с остальными кистями.

Step 4
Закройте документ размером 2000x2000px, потому что с ним мы закончили. Теперь откройте новый документ размером 1200×1200 пикселей и залейте его черным цветом.

Шаг 5
Создайте новый слой ( Control + Shift + N ) и залейте его черным цветом.

Перейдите в Filter> Render> Fibers . Отрегулируйте настройки так, как будто я должен получить действительно хороший контраст.

Шаг 6
Теперь перейдите в Filter> Blur> Motion Blur и установите настройки на 999 пикселей.

Используя инструмент преобразования ( Control + T ), зажмите shift и поверните влево на одно место. Растяните волокна так, чтобы они покрыли всю площадь.

Шаг 7
Откройте уровни ( Control + L ) и настройте их, как я.Это сделает наши волокна темнее.

Шаг 8
Измените режим наложения слоя волокон на Color Dodge.

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

Измените настройки так, как они есть у меня.

Шаг 9
Создайте новый слой ( Control + Shift + N ) и переместите его под слой волокон.

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

Шаг 10
Перейдите в Filter> Blur> Motion Blur с расстоянием 999 пикселей.

Шаг 11
Повторяйте шаги 9 и 10 с различными вариациями синего, создавая новый слой для каждого цвета, пока не получите то, что вам нравится.

Step 12
Создайте новый слой сразу под слоем волокна.Щелкните градиент и выберите инструмент «Отраженный градиент». Убедитесь, что цвет ничего не белый.

Щелкните и перетащите градиент в середине документа по линии волокон.

Измените режим наложения на Overlay и уменьшите непрозрачность до 60% . Это даст нам источник света в середине документа.

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

Сайт

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

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

Используя инструмент Marquee Tool, создайте прямоугольник размером 960×1200 пикселей. Мы собираемся переместить его с помощью инструмента преобразования ( Control + T ), чтобы получить точки привязки по углам и середине поля.Совместите средние точки крепления со средней направляющей. Поместите направляющие с каждой стороны коробки.

Шаг 14
Используя инструмент выделения, создайте прямоугольник размером 375×60 пикселей и поместите его правую сторону на правую направляющую, а верхнюю часть — на верхнюю часть документа. Удерживая Shift, сдвиньте его вниз шесть раз. Установите направляющие сверху, снизу и слева.

Используя инструмент Rounded Rectangle Tool, создайте рамку внутри направляющих с радиусом 10 пикселей.

Мы собираемся добавить несколько стилей слоя к блоку, поэтому перейдите к первому значку внизу палитры слоев и нажмите Inner Glow.Измените настройки, как у меня, с цветом # 666666 , затем нажмите Stroke с цветом # 000000 .

Шаг 15
Щелкните инструмент выделения. Теперь выберите Control и щелкните только что созданную форму. Удерживая нажатой клавишу Shift, переместите фигуру на три позиции вверх. Используя линейный градиент, залейте область белым цветом. Уменьшите непрозрачность до 60% .

Шаг 16
Создайте новый слой и измените цвет переднего плана на # 3399FF . Control + щелкните на поле. Теперь, снова используя линейный градиент, создайте синий градиент в верхней части поля.

Шаг 17
Выполните Control + Shift + I , чтобы получить инверсное выделение, затем выберите слой с белым градиентом и удалите. Это позволит избавиться от лишней детали, которая нам не нужна.

Step 18
Используя Myriad Pro Black с размером 16 пунктов, напечатайте вашу навигацию белым цветом.

Используя инструмент квадратной области, щелкните и перетащите прямоугольник шириной 1 пиксель и высотой прямоугольника.Заполните его # 333333 . Переместите рамку на одно место и залейте ее цветом # 000000 .

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

Step 20
Мы собираемся создать тело нашего сайта. Используя инструмент выделения, создайте прямоугольник размером 960×970 пикселей и поместите верхнюю часть поля в нижнюю часть панели навигации. Удерживая нажатой клавишу Shift, переместите ее на три позиции вниз.Поместите направляющую сверху и снизу шатра.

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

Щелкните и перетащите стили слоя из окна навигации в окно веб-сайта.

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

Step 22
Используя инструмент выделения, создайте рамку размером 600×240 пикселей и поместите вокруг нее направляющие, как мы это сделали с навигацией и рамкой веб-сайта.Используя инструмент прямоугольник, нарисуйте прямоугольник на только что созданных направляющих. Задайте для него те же стили слоя, что и для навигации, залейте его белым и измените непрозрачность на 20% .

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

Чтобы добавить отражение, используйте инструмент «Эллипс», чтобы создать овал в нижней половине поля. Control и щелкните круг, а затем нажмите Control + Shift + I , чтобы получить инверсное выделение. Выберите линейный градиент с белым, чтобы ничего не было выбрано для цвета.Щелкните и перетащите градиент.

Как только вы получите градиент, который вам нравится, выполните Control + Shift + I и удалите лишнюю область.

Step 23
Мы собираемся взять изображение этого ноутбука (http://www.sxc.hu/photo/1185958) с stock.xchng.

Откройте его в Photoshop и нажмите на инструмент «Кадрирование». Отрегулируйте настройки так, чтобы это было 200×200 пикселей при 72 пикселях / дюйм.

Принесите это в наш документ.

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

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

Step 25
Теперь давайте вставим фиктивную копию:

Etiam ultricies nisi Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Aeneanmodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consquat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Целочисленный tincidunt. Cras dapibus. ac, enim. Продолжить…

Нашим названием будет «Etiam ultricies nisi». Arial / Helvetica Bold, 32 пт. Остальная часть копии будет Вердана в 11pt. Цвет продолжения будет # 3399FF .

Step 26
Щелкните правой кнопкой мыши папку «Post 1», Duplicate Layer Set и назовите ее «Post 2». Поместите верх второго поста в нижнюю часть первого, а затем, удерживая нажатой клавишу Shift, переместите «Пост 2» вниз на два деления.

Шаг 27
Повторите шаг 26 для третьей и четвертой стойки. Для четвертого поста щелкните папку «Пост 4», затем щелкните маску слоя (второй значок слева на палитре слоев). Используйте инструмент выделения, чтобы создать рамку вокруг четвертой публикации, которая находится в блоке веб-сайта.Удерживая нажатой клавишу Shift, переместите рамку на два деления вверх. Затем выполните Control + Shift + I , чтобы получить инверсное выделение и заполните его черным цветом.

Step 28
Теперь создадим боковую панель. Используя квадратную область выделения, сделайте прямоугольник шириной 300 пикселей и поместите его в крайнюю правую направляющую. Удерживая нажатой клавишу Shift, переместите его на два места. Поместите направляющую на левую и правую стороны квадратной рамки.

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

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

Step 30
Щелкните значок маски на палитре слоев. С помощью инструмента «Квадратная область» создайте прямоугольник, закрывающий боковую панель от самого низа документа до нижней части поля веб-сайта. Удерживая нажатой Shift , переместите квадратную рамку на два деления вверх.Залейте область черным. Это должно избавить от лишней области.

Step 31
Мы хотим добавить отражение, как на постах. Для этого нам нужно продублировать слой с помощью Control + J и переместить его над полем боковой панели. Control и щелкните поле боковой панели, затем Control + Shift + I , чтобы получить обратное, и удалите лишнюю область.

Для панели поиска создайте белое поле с помощью квадратной области. Размер поля будет 260×30 пикселей, и он будет размещен в верхнем левом углу боковой панели.Удерживая нажатой клавишу Shift, переместите его на два деления влево и два деления вниз.

Поле поиска будет иметь те же стили слоя, что и поле боковой панели.

Используя инструмент «Текст», создайте текст с надписью «Поиск» с Verdana 16pt и цветом #CCCCCC .

Step 32
Теперь мы собираемся разместить несколько рекламных объявлений. Эти рекламные объявления имеют размер 125 × 125 и будут идти на два пробела вниз, удерживая Shift и два пробела от краев.

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

Разместите направляющие слева и справа от объявлений.

Шаг 33
Щелкните инструмент «Прямоугольник» и в параметрах щелкните стрелку вниз справа от всех различных форм. Щелкните фиксированный размер и измените его на 260×30 пикселей. Поместите прямоугольник так, чтобы верхняя часть касалась нижней части рекламы, и, удерживая нажатой клавишу Shift, переместитесь на два места вниз.

Измените цвет на белый, при 20% Непрозрачность

Step 34
Теперь, чтобы получить отражение, нажмите Control и щелкните на только что созданном прямоугольнике.Нажмите Control + Shift + N , чтобы получить новый слой. Теперь нажмите на инструмент квадратной области и переместите выделенную область вверх, чтобы нижняя часть оказалась посередине прямоугольника.

Заливка с линейным градиентом от белого до нуля.

Step 35
Введите «Ссылки по теме», используя шрифт Myriad Pro Black и размер 16 pt.

Мы собираемся добавить ему небольшую тень на заднем плане, чтобы он лучше выделялся.

Step 36
Для ссылок мы просто будем использовать общие ссылки WordPress:

Блог разработчиков Документация Плагины Предлагают идеи Темы форума поддержки Веб-хостинг WordPress Planet Темы WordPress
Текст будет белого цвета Verdana 12 пунктов.Мы собираемся удерживать Shift и переместить его на две части и на одну вниз от заголовка «Ссылки по теме».

Шаг 37
Чтобы получить маркеры со стрелками, выберите инструмент произвольной формы (та же кнопка на панели инструментов, что и инструмент прямоугольника) и выберите ту же стрелку, что и я.

Измените цвет на # 3399FF и добавьте Bevel and Emboss с помощью значка стилей слоя.

Шаг 38
Повторите шаги 37 и 38, за исключением того, что наш заголовок будет «Категории», а для нашего макета мы просто поместим:

Номер категории Один Номер категории Два Номер категории Три Номер категории Четыре

Шаг 39
Повторите шаги 37 и 38, за исключением того, что наш заголовок будет «Архивы», а для нашего макета мы просто поместим:
Март 2009 Апрель 2009 Май 2009 Июнь 2009 Июль 2009

Step 40
Мы хотим добавить синее свечение в поле веб-сайта, как на панели навигации.Для этого нажмите Control, щелкните на поле веб-сайта и создайте новый слой с помощью Control + Shift + N .

Используя линейный градиент, щелкните и перетащите градиент # 3399FF сверху вниз.

Step 41
Наконец, мы добавим информацию о нижнем колонтитуле. Удерживая нажатой shift , переместите текст нижнего колонтитула на два пробела вниз.

Финал

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

Об авторе

Тайлер Денис — внештатный дизайнер по совместительству из Ашленда, Нью-Гэмпшир. Он также является создателем / автором блога о дизайне Denis Designs / blog , веб-сайта, посвященного качественным обучающим материалам и вдохновению. Вы можете подписаться на в Twitter или на его личном сайте Denis Designs .

41 Комментарии

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

Этот пост является частью недели электронной коммерции, посвященной электронной коммерции на сайте DesignM.ag и блог Vandelay Design, а также вдохновители дизайна электронной коммерции в CartFrenzy.

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

Вот что мы будем проектировать (щелкните, чтобы увидеть в полном размере):

Шаг 1. Создайте документ

В Photoshop создайте новый документ (Файл — Новый) шириной 1000 пикселей и высотой 1030 пикселей.

Шаг 2. Создайте меню навигации

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

Чтобы создать меню навигации, используйте инструмент прямоугольной области, чтобы выбрать область высотой 40 пикселей и ширину страницы. Верхняя часть меню навигации будет на 100 пикселей от верха страницы. Используйте ведро с краской, чтобы заполнить выделение цветом # 1e4a93.

Поскольку наш документ имеет ширину 1000 пикселей, а мы будем разрабатывать макет шириной 960 пикселей, на каждой стороне будет дополнительно 20 пикселей. Кроме того, мы добавим 20 пикселей отступа, поэтому текст первой ссылки в меню навигации должен начинаться на 40 пикселей слева от документа. Я установил вертикальную направляющую на 40 пикселей, чтобы выровнять текст. Я использую белый текст Arial размером 16 пунктов.

На новом слое с помощью инструмента «Карандаш» добавьте границы в 1 пиксель (# 2b5dae) к ссылкам.

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

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

Создайте новый слой. В правом верхнем углу заголовка мы добавим поле поиска. Поле поиска и кнопка будут иметь высоту 20 пикселей и 10 пикселей от верхнего края страницы. Правая сторона кнопки выровнена с вертикальной направляющей на 980 пикселей.

Используйте инструмент прямоугольной области, чтобы создать кнопку и залейте область цветом # eeb929. Затем придайте кнопке границу в 1 пиксель, используя цвет # d59d05, более темный оранжевый цвет. В поле поиска используется контур размером 1 пиксель в #dfdddd.

Затем мы добавим текст «поиск» к кнопке поиска с помощью шрифта Arial размером 12 пунктов белого цвета (#ffffff). И мы добавим текст «ключевое слово или элемент #» в поисковое поле, набранное 12 pt Arial, # 626262.

Рядом с полем поиска мы добавим две ссылки для «моя учетная запись» и «обслуживание клиентов.«Я использую 12pt Arial в черном цвете (# 000000).

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

Слово «Корзина» написано шрифтом Arial 14pt и цветом # 0f2e62. Вторая строка — это Arial, 12 пунктов, черного цвета.

Далее мы добавим значок корзины покупок.Иконка — это бесплатная иконка, разработанная и распространяемая Bartelme Design.

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

Чтобы создать полосу, сначала добавьте новый слой, используйте инструмент прямоугольной области и выберите область высотой 40 пикселей, покрывающую всю ширину страницы.Затем используйте инструмент «Ведро с краской», чтобы заполнить его цветом # d6d5d5.

Затем используйте черный текст Arial 14 пунктов, чтобы ввести сообщение, чтобы побудить посетителей подписаться на список рассылки. Я использую следующий текст: «Получайте коммерческую и рекламную информацию прямо вам по электронной почте. Введите свой адрес электронной почты, чтобы подписаться ».

Рядом с текстом используйте инструмент прямоугольной области, чтобы создать поле для ввода адреса электронной почты и кнопки регистрации. Оба имеют высоту 20 пикселей, то есть 10 пикселей сверху серой полосы и 10 пикселей снизу серой полосы.Поле электронной почты белого цвета с рамкой в ​​1 пиксель в #bdbcbc. Кнопка «зарегистрироваться» — # eeb929 с рамкой в ​​1 пиксель в # d59d05. Текст «Зарегистрироваться» — это Arial размером 12 пунктов белого цвета. Я также создал нижнюю границу размером 1 пиксель на серой полосе в #bdbcbc.

Шаг 4. Добавьте боковую панель

Мы собираемся использовать ширину 250 пикселей для боковой панели, которая будет содержать ссылки для покупок по брендам. Для создания боковой панели я использовал вертикальные направляющие на 20 пикселей и 270 пикселей. Затем на новом слое используйте инструмент прямоугольной области, чтобы выбрать область между направляющими для боковой панели, и залейте выделение цветом # f1f1f1, используя инструмент «ведро с краской».

Затем мы создадим текстовое поле с пространством в 20 пикселей от краев боковой панели и введем текст для боковой панели. Я использую шрифт Arial 14pt для всего текста на боковой панели. «Магазин по бренду» выделен жирным черным шрифтом, а ссылки — обычным (без жирного шрифта) # 0f2e62.

Я установил интервал 30 пикселей для текстового поля.

Затем добавьте границы в один пиксель слева и справа от боковой панели, используя инструмент «Карандаш» и цвет #dfdddd (я предпочитаю делать границы на новом слое на случай, если что-то испортится).Между каждой ссылкой на боковой панели мы создадим двухпиксельную границу, чтобы придать ей слегка скошенный вид. Граница верхнего пикселя будет иметь цвет #dfdddd, а нижний пиксель — цвет # f9f9f9, светло-серый, почти белый. Я также использовал карандаш для этих границ.

На этом боковая панель завершена.

Шаг 5. Создайте область избранного контента

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

Начните с установки вертикальных направляющих на 290 пикселей и 980 пикселей. Затем установите горизонтальные направляющие на 200 пикселей и 620 пикселей.

Создайте новый слой и с помощью инструмента прямоугольной области выделите область между направляющими. Залейте это выделение цветом # f1f1f1.

Установите дополнительные вертикальные направляющие на 625 и 645 пикселей, а затем установите новые горизонтальные направляющие на 640 и 903 пикселей.Это создаст ряд из двух прямоугольников под большой избранной областью. Выделите каждую область с помощью инструмента прямоугольной области и залейте цветом # f1f1f1.

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

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

Далее мы добавим текст поверх фотографии, чтобы продвигать товары нового сезона. Я использую шрифт Century, первая строка которого — 30 пунктов, а две нижние строки — 18 пунктов.Оранжевый цвет первой строки — # eeb929, а две другие — белые (#ffffff). Вы можете придать тексту тень, дважды щелкнув слой в палитре слоев и выбрав «тень». Я изменил настройки расстояния и размера на 2 пикселя каждый.

Чтобы создать ссылки для других элементов в избранной области, используйте круговую кисть (я установил ее на 30 пикселей в диаметре) и создайте три круга. Первый — # eeb929 (для активного элемента), а два других — белого цвета.Затем дважды щелкните слой в палитре слоев и выберите тень. Я также использовал 2 пикселя для расстояния и размера этой тени. Затем поместите текст поверх кружков с числами 1, 2 и 3.

Ниже выделенной области мы добавим изображение для мужской одежды и изображение для женской одежды. Опять же, я использую изображения, купленные на iStockphoto (здесь и здесь). Я изменил размер и обрезал каждое из этих изображений до 315 пикселей в ширину и 243 пикселей в высоту, чтобы уместиться в области, которую мы уже создали для них.Вставьте изображения в их места и поместите текст поверх каждой фотографии. Я использую 20pt Century черным цветом (# 000000).

Под каждой из этих фотографий мы добавим несколько ссылок. Я использую 14pt Arial в # 0f2e62.

Шаг 6. Создайте нижний колонтитул

Последней частью дизайна будет нижний колонтитул. На новом слое с помощью прямоугольного выделения выделите область нижнего колонтитула и залейте ее цветом # 1e4a93. Затем добавьте несколько основных текстовых ссылок. Для ссылок я использую шрифт Arial белого цвета с разрешением 14 пунктов.

Конечный результат:

Вот окончательный дизайн (щелкните, чтобы увидеть в полном размере)

Если вы хотите получить исходный файл PSD (за вычетом стоковых изображений, которые я не могу распространять повторно), чтобы следовать инструкциям в руководстве, его можно загрузить в виде zip-файла здесь.

Другие сообщения от E-Commerce Week:

РУКОВОДСТВО ПО ФОТОШОПУ для начинающих

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

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

Внизу страницы находится популярное руководство по Adobe Photoshop для начинающих.

См. «Руководство по настройке веб-сайта», если вы хотите узнать, как запустить веб-сайт.

Уроки Photoshop

Открытая книга со страницами

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

Часть 2 — Часть 3

Столешница

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

Часть 2

Приглашение на свадьбу

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

Листва

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

Часть 2

Атлантида

Используя фильтр Ocean Ripple и параметр Bevel, в этом руководстве создается веб-сайт, кнопки которого представляют собой острова, тонущие под волнами.

Лиственная вилла

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

Часть 2 — Часть 3

Переверните Бетховен

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

Учебное пособие для веб-сайта «Splat»

Используя несколько градиентов и применив фильтр Wave, можно сделать этот простой дизайн веб-сайта.

Блестящие завитки

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

Часть 2

Урок веб-дизайна Sunlight

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

Часть 2

Учебное пособие для веб-сайта фабрики слизи

Следуйте инструкциям, которые я предпринял для создания веб-сайта «Фабрики слизи». На этом сайте металлические текстуры смешиваются с гелеобразными веществами. (Для этого урока требуется Photoshop CS5, CS4, CS3, 8.0, 7.0 или 6.0.)

Часть 2

Учебное пособие по меню веб-страницы Duotone

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

Учебник по веб-дизайну Tigerskin

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

Простой веб-дизайн

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

Как сделать металлические кнопки и меню

Из этого туториала Вы узнаете, как использовать Gradient Overlays и Gloss Contour для изменения кнопок и меню с пластилина на реалистичное серебро и золото.

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

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

Создайте собственный логотип компании

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

Создание мозаичного фона веб-страницы

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

Как сделать веб-кнопки

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

Часть 2

Создание реалистичной текстуры древесины

Когда-нибудь использовали текстуру дерева в Adobe Photoshop? Вот как использовать инструмент градиента, чтобы создать текстуру дерева, которая выглядит намного лучше, чем текстура древесины лесопилки в Photoshop.(Для текстуры дерева требуется Adobe Photoshop 7 или более поздней версии для функции «Градиент шума».)

Учебное пособие для веб-сайта «Пятачок Фабрика»

Это руководство по Adobe Photoshop описывает шаги по созданию профессионального веб-сайта. В этом туториале показаны шаги, которые я предпринял, чтобы создать дизайн сайта для вымышленного (надеюсь) 🙂 Piglet Factory.

Различная туманность

Создайте реалистичное изображение красно-синей туманности в Photoshop, используя фильтр «Облака» и слой «Разница».Из этих туманностей получаются отличные фоны рабочего стола, поэтому я сделал один доступным для загрузки (на случай, если вы набьете лишнее, у вас нет Adobe Photoshop или вы просто здесь, чтобы посмотреть красивые картинки) 🙂

Рабочий объем

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

Пятиминутное руководство по веб-сайту

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

Уроки Photoshop для начинающих

20 приемов Photoshop для веб-дизайнеров

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

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

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

Вы готовы узнать больше о Photoshop? Тогда продолжайте читать.

Уловки Photoshop, которые превратят вас в мастера веб-дизайна

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

1. Оптимизируйте свое рабочее пространство

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

По этой причине наша первая остановка — Окно> Рабочая область> Графика и Интернет . Выбор этого параметра изменит доступные инструменты на те, которые вы, скорее всего, будете использовать для веб-дизайна.

После этого перейдите к Правка> Настройки . Здесь одна из самых важных остановок — Units & Rulers. Какое бы измерение вы не выбрали здесь (скорее всего, в пикселях), оно будет использоваться по умолчанию для всех последующих документов.

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

После этого перейдите к Preferences> Performance> History & Cache и нажмите Web / UI Design .

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

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

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

2. Изучите сочетания клавиш

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

Например, я использую Ctrl + Alt + 2/3 для создания заголовков h3 и h4 при написании этого сообщения. Это намного быстрее, чем использовать для этого панель инструментов редактора, поскольку мне не нужно отрывать руки от клавиатуры.

То же самое и с фотошопом. Знать, как выполнять действия с помощью простых нажатий клавиш, бесконечно быстрее, чем щелкать по меню.

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

3. Слои групп и имен

При работе с Photoshop вы будете работать с множеством слоев. Большинство элементов не только получают свой собственный слой, но и такие модификации, как яркость / контраст, также добавляются как слои.

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

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

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

Кроме того, вы также можете выбрать несколько слоев одновременно, удерживая Ctrl , ​​чтобы выбрать отдельные слои, или Shift , ​​чтобы отметить диапазон соседних слоев. Ctrl + G затем превращает их в группу.

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

4. Слои фильтров

Именование и группировка слоев — хорошее начало. Однако при работе с десятками или даже сотнями из них все равно легко запутаться.

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

Также можно напрямую выбрать слой с помощью инструмента Перемещение , ​​удерживая Ctrl и щелкая слой или объект.

5. Создайте сетку

Изображение предоставлено PureSolution / shutterstock.com.

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

Для этого используйте View> New Guide Layout . Также можно создать горизонтальные и вертикальные направляющие, просто щелкнув линейку и перетащив ее в документ. Используйте Ctrl для перемещения существующих направляющих.

6. Импорт образцов цвета

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

Чтобы воспользоваться этим трюком Photoshop, просто откройте панель Swatches , ​​щелкните раскрывающееся меню в верхнем правом углу и выберите Load Swatches . Теперь перейдите к нужному файлу и откройте его, чтобы импортировать новый образец цвета.

7. Сохранить пользовательские формы

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

Для этого щелкните правой кнопкой мыши нужную фигуру с помощью инструмента выделения контура (черная стрелка). Затем выберите Определить произвольную форму . Как только вы это сделаете, вы можете получить доступ к этой форме через параметры верхней панели инструмента Custom Shape .Просто щелкните раскрывающееся меню с надписью Форма: и выберите сохраненную форму.

8. Переключение между цветами фона и переднего плана

Два переключаются между цветом фона и переднего плана, не нажимая на значок, просто нажмите X на клавиатуре. Кроме того, если вы хотите, чтобы цвета снова стали черно-белыми, вы можете сделать это, нажав D .

9. Измените прозрачность с помощью клавиатуры

Еще одно сочетание клавиш. Для любого инструмента, который может изменять прозрачность, вы можете просто сделать это с помощью клавиатуры.Цифры от 1 до 0 устанавливают непрозрачность от 10% до 100%. То же самое работает и с непрозрачностью слоев.

10. Нарисуйте прямые линии

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

11. Образец цвета

Следующим в нашем наборе трюков Photoshop является возможность пробовать любой цвет.Если вам нужен цвет любого объекта, удерживайте кнопку Alt и щелкните по желаемому оттенку. Это работает как с кистью , , ​​карандашом , , ​​ведром с краской , ​​так и с любыми другими инструментами, использующими цвета.

12. Добавить в выделенное или удалить из него

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

13. Отменить более одного шага

Классический способ отменить последнее действие — использовать Ctrl + Z .Однако это работает только в том случае, если вы делали последнее. Чтобы вернуться на несколько шагов назад, используйте Ctrl + Alt + Z .

14. Динамическое изменение размера кисти

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

15. Сохранить для Интернета

Использование Safe for Web Функция очень важна, так как она обеспечивает минимальный размер изображения.Это очень важно для повышения скорости сайта.

В Photoshop это можно сделать через Файл> Экспорт> Сохранить для Интернета . Однако более быстрый способ — использовать Ctrl + Alt + Shift + S . Пожалуйста!

16. Открытие изображений как слоев

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

Более практичный способ сделать это — Файл> Сценарии> Загрузить файлы в стек .Найдите нужные изображения, отметьте их и дважды нажмите Ok . Теперь каждое изображение будет автоматически импортировано в отдельный слой.

17. Копирование CSS прямо из Photoshop

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

Чтобы воспользоваться этим, просто щелкните слой правой кнопкой мыши и выберите Копировать CSS .Или используйте меню Layer , ​​чтобы найти тот же вариант. Теперь у вас есть все необходимые стили, которые можно просто вставить в таблицу стилей или в любую другую программу, которую вы используете.

18. Дизайн для нескольких устройств и ориентации одновременно

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

Источник: ComScore

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

Я мог бы подробно описать оба здесь, однако Phlearn сделал отличный учебник по этому поводу, который работает намного лучше, чем я когда-либо мог:

19. Используйте автоматическую обработку для повторяющихся задач

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

Вот как это работает. Сначала откройте свой файл. Затем откройте Действия ( Alt + F9 ), найдите Создать новое действие и щелкните его. Введите имя и, при желании, назначьте ему комбинацию клавиш и цвет.

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

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

20. Предварительный просмотр на устройстве

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

Для этого установите приложение и используйте Device Preview для подключения Photoshop к внешнему устройству через USB или Wi-Fi. Вы найдете опцию в разделе Окно> Предварительный просмотр устройства .

Какие ваши любимые уловки в Photoshop?

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

Однако большая мощность сопряжена с большими сложностями, и особенно для новичков, освоение программного обеспечения может занять некоторое время.

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

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

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

Миниатюра статьи Изображение предоставлено Creative Stall / shutterstock.com

.