PHOTOSHOP СОЗДАНИЕ МАКЕТА САЙТА

Photoshop создание макета сайта-Photoshop создание макета сайта

В этом уроке Вы узнаете, как создать профессиональный макет сайта с нуля. Создание дизайна или макета сайта. Важно! Всегда создавайте группы для слоёв и давайте им названия. .serp-item__passage{color:#} Вот теперь мы можем наблюдать почти готовый и простой макет для нашего будущего сайта. Футер (Низ сайта). верстка сайта на Photoshop. 31 видео 1 просмотров Обновлен 14 мар. г.  Создание сайта с нуля. Урок #1: Скетч.  Начинаем верстать макет.

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

Photoshop создание макета сайта-Затем она должна появиться у Вас в окне просмотра. А вот как она выглядит: Выделяем наш слой, нужно просто один раз кликнуть на него: А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр.

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

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

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

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

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

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

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

Photoshop создание макета сайта-Профессиональный макет сайта в фотошоп / myshlaev.ru

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

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

Photoshop создание макета сайта-Как сделать макет или дизайн сайта в Photoshop | myshlaev.ru

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

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

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

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

Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара Правой колонки. Сразу же нужно создать 2 отдельных группы: Метки — в эту читать мы будем photoshop создание макета сайта текст с размером наших колонок. Контент — группа где будет находиться вся наша середина сайта. В группе контент создаём под группу «Левый», в которой будут находиться наши photoshop создание макета сайта с записями. Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину рх высоту рх. Вот итог: Добавляем линии с линейки как на рисунке, и отменяем выделение: Получается что мы добавили посмотреть еще линии и получили область где будут находиться наши блоки с записями.

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

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

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

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

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

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

Распространенной ошибкой дизайнеров является расположение контента в пределах рабочей области макета и ручной отступ. На стандартном экране это допустимо, но при открытии страницы на телефоне или планшете текст просто-напросто прилипнет к краю. Как это исправить? Макет автоматически разместится по центру, и у вас получится отступ нажмите для деталей 20 пикселей с каждой стороны.

6 Comments

  1. Абсолютно с Вами согласен. Я думаю, что это хорошая идея.

  2. Полностью с Вами согласна, примерно неделю назад написала про этоже в своем блоге!

Leave a Reply

Your email address will not be published. Required fields are marked *