Как создать профессиональный макет сайта в Photoshop Блог Москвиных Мысли практиков Как создать профессиональный макет сайта в Photoshop Опубликовано Урока с сайта Автор: NiranthM Перевод на русский язык: Екатерина Москвина В этом уроке показано, как создать профессиональный веб-дизайн в Photoshop с нуля. Попутно вы можете узнать полезные методы для создания дизайна.Итак, начнем! РесурсыИзображение в шапке - depositphotos.com P- wefunction.com - iconeden.com - dafont.comШаг 1: МакетПрежде чем приступить к дизайну мы должны спланировать технические требования, внешний вид и функциональность, а затем Pвоплотить идеи в макете. Макеты и каркасы позволят нам создать гибкий дизайн, так как это передовые практики в вебстроительстве.Ниже я набросал макет, используя только серые тона. Так мы исключили цвет из общей картины, чтобы не отвлекаться на него и сконцентрироваться на расположении блоков и элементов. Макет может быть детализирован на столько, на сколько вы хотите, просто кратко определите расположение элементов.Шаг 2: Настройка холстаИтак, у нас есть чертеж нашего макета. Давайте вместе создадим дизайн! Мы собираемся создать макет шириной 960px. Создайте новый документ 1200 x 1500.Ширина макета 960px, поэтому нам необходимо определить рабочую область. Нажмите Ctrl+A, чтобы выделить весь документ.Перейдите Select>Transform Selection. Сократите выделенную область до 960px. Это рабочая область макета.Добавьте направляющие линии к выделению.Вам нужно создать отступы между границей и контентом, который мы добавим позже. Выбираем снова Transform Selection, выделение должно быть активно. Изменяем ширину выделенной области до 940px. Это означает, что отступы будут по 20px с каждой стороны, итого 40px.Добавьте направляющие линии к выделению.Шаг 3: Создание шапкиДавайте создадим шапку макета! Создайте выделение 465px в высоту.Залейте выделение серым цветом и в дальнейшем используете стили слоя, чтобы добавить цвета и градиенты. Следуйте этому методу в дизайне для поддержания визуальной иерархии. Добавьте градиент в шапку. Двойной щелчок мыши по слою. Выделите Gradient Overlay. Создайте двухцветный градиент. Используйте настройки.Должно выглядеть так.Далее нужно создать блик. Создайте новый слой, нажав Ctrl+Alt+Shift+N. Выберите мягкую кисть с диаметром 600px. Цвет кисти #19535a. Просто кликните один раз в центре шапки.Создайте вверху выделение высотой 110px.Нажмите кнопку Delete и удалите выбранную область. Это выглядит, как показано ниже.Сократите её по вертикали, нажав Ctrl+T.Мы должны убедиться, что блик находиться строго по центру. Выделите слой шапки и блика и нажмите "V", чтобы переключиться на инструмент MoveTool. На панели настроек нажмите кнопку Align Horizontal Centers.Создайте новый слой, нарисуйте линию шириной 1px, используя PencilTool с цветом #01bfd2. (Е.М.: Чтобы линия была ровной, зажмите Shift в момент рисования).
Комментариев нет:
Отправить комментарий