7

СОЗДАНИЕ МАКЕТА САЙТА В ФОТОШОП

Создание макета сайта в фотошоп-Создание макета сайта в фотошоп

Мы будем создавать макет сайта шириной в пикселов. Для этого, создайте новый документ размером х пикселов. .serp-item__passage{color:#} Переходим к созданию шапки сайта. Создайте выделение высотой в пикселов в верхней части макета. Залейте выделение серым цветом, а в дальнейшем. верстка сайта на Photoshop. 31 видео 1 просмотров Обновлен 14 мар. г.  Создание сайта с нуля. Урок #1: Скетч.  Начинаем верстать макет. Создание и размеры документа. Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно  Создание дизайна или макета сайта. Важно! Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно.

Создание макета сайта в фотошоп - Создаем дизайн сайта в фотошопе

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

На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали Align Horizontal Centers. Для рисования используйте цвет 01bfd2. Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент Gradient Tool и создайте градиент, как показано ниже: Примените новый создание макета сайта в фотошоп с маской, которую залейте только что созданным градиентом. Шаг 4. Создаем узор Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш Pencil Tool размером в 2 пиксела нарисуйте две точки, как показано на рисунке.

Нажмите ОК. Результат: Переходим к добавлению логотипа. Выберите мягкую кисть с цветом a и нарисуйте пятно. Напишите текст: Перейти на источник слою с логотипом добавьте стиль слоя Тень Создание макета сайта в фотошоп Shadow. Шаг 6. Навигация Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения Rectangular Marquee Tool. Залейте выделение любым цветом и уменьшите параметр Заливка до нуля. К слою с кнопкой добавьте стиль Наложение градиента Gradient Overlay. Шаг 7. Слайдер для контента Создайте выделение размером х пикселов. Залейте выделение любым оттенком серого. Поместите изображение. Закрепите его со слоем, который создали ранее. Теперь к слайдеру добавим эффект.

Откройте палитру Кисть F5 и установите те параметры, которые показаны на скриншоте: Выберите черный цвет и нарисуйте пятно: Для смягчения краев примените фильтр Размытие по Гауссу Gaussian Blur. Выделите нижнюю половину тени и удалите Delete. Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения Rectangular Marqee Tool. Залейте кнопки черным цветом Добавьте фигуру стрелки на кнопки слайдера: На нижней части слайдера нарисуйте полосу и залейте ее черным цветом На эту полосу добавьте описание Степик веб разработка для начинающих ответы проекта: Шаг 8.

Добавляем текст с приветствием Напишите текст с приветствием: Шаг 9. Завершаем работу над шапкой сайта Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть Brush Tool. Оставьте между тенью и заголовком пропуск в 1 пиксел. Шаг Добавляем кнопки для слайдера Нарисуйте кнопки смены слайдов. В группе создаём новый слой и называем его «фон».

Создание макета сайта в фотошоп

Это будет фон нашего верхнего меню. Вот что должно получиться: Опять вытягиваем линейку и выставляем её как на рисунке: Создание макета сайта в фотошоп инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки: В палитре цветов вбиваем по этому адресу этот цвет 0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»: Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц.

Потом Вы можете переместить текст куда Вам .

Создание макета сайта в фотошоп

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

Создание макета сайта в фотошоп-Как сделать дизайн сайта в фотошопе с нуля – Блог psdev.ru

Переходим в пункт «Тень» и задаём следующие параметры: Вот, что должно получиться: После этого просто копируем слой https://psdev.ru/razrabotat-sayt-internet-magazina/sayt-dlya-sozdaniya-meshapov.php нашей линией и выставляем после каждого слова. Вот что у меня получилось: Иконки социальных закладок Нажмите для деталей же в меню только с правой стороны мы добавим иконки закладок.

В моём случае это фигурыно можно поставить и обычные скачанные иконки.

Создание макета сайта в фотошоп

Скачать можете вот. Для начала с помощью линейки нужно выставить https://psdev.ru/razrabotat-sayt-internet-magazina/sozdanie-saytov-tsena-portala.php наших иконок, что бы они были ровными.

Создание макета сайта в фотошоп-Веб-дизайн. Быстрый старт

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

Вот что должно получиться: Создаём группу «Нижнее меню» и новый слой. Нижнее меню Главное Выставляем линейки как на рисунке: Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом Вот что должно получиться: Отменяем выделение во вкладке узнать больше. Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения: Добавляем название рубрик, создание макета сайта в фотошоп по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня: Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии.

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

Создание макета сайта в фотошоп

Как обычно в группе «Хидер» создание макета сайта в фотошоп группу «Инфо панель» с новым слоем. Панель с информацией Для начала добавляем полосы с линейки как на рисунке ниже: Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом eeeeee Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге: Контент Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара Правой колонки.

Сразу же нужно создать 2 отдельных группы: Метки — в эту группу мы будем добавлять текст с размером наших колонок. Https://psdev.ru/razrabotat-sayt-internet-magazina/sozdanie-www-sayta.php — группа создание макета сайта в фотошоп будет находиться вся наша середина сайта. В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями. Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину рх высоту рх.

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

Создание макета сайта в фотошоп-Продолжение

В группе «Контент» делаем под группу с названием «Правый» Сайтбар. Будем размечать место для правой колонки сайта. Опять берём «прямоугольная взято отсюда, а вот в стиле области задаём немного меньший размер в ширину рх высоту оставим ту же в рх. И далее делаем всё как на рисунке: Вот теперь мы точно знаем где будут блоки с записями и сайтбар. И всё будет ровно. Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня: Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры. Блоки с записями Начнём мы пожалуй с блоков с записями, делаются они в данном случае очень.

В группе «Левый» создаём подгруппу «блок» и новый слой. Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры х Подгоняем под линии. Потом заливаем вот этим цветом d9d9d9. Это у нас получилась миниатюра. В той же группе добавьте метку с помощью текста как у меня на рисунке выше. Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой: Https://psdev.ru/razrabotat-sayt-internet-magazina/razrabotka-veb-portala.php информацию к посту.

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

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

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

В https://psdev.ru/razrabotat-sayt-internet-magazina/sayt-dlya-sozdaniya-chehlov-na-telefon.php панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным. Вот нажмите чтобы узнать больше должно получиться: Копируем слой этого маленького круга опять перемещаем его влево.

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

igtigle

7 Comments

  1. Да, я вас понимаю. В этом что-то есть и мне кажется это отличная мысль. Я согласен с Вами.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *