Создаём дизайн для страницы блога в Фотошоп. Дизайн в фотошопе


Дизайн сайта в фотошопе для начинающих. Уроки веб дизайна

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

В дизайне используется следующая палитра:

Чтобы начать создавать дизайн сайта в фотошопе, нам необходим собственно сам Photoshop. Где скачать фотошоп и как его установить: google в помощь 🙂

Также нам понадобится bootstrap сетка, поскольку текущий дизайн сайта мы будем в дальнейшем верстать, используя css фреймворк bootstrap.

После скачивания и распаковки архива у вас будут две папки: Responsive grid и Pc grid

Responsive grid - содержит в себе PSD для создания дизайна сайта под различные расширения (PC, Планшеты, мобильные устройства). Поскольку создавать дизайн сайта для всех расширений дело кропотливое, мы ограничимся только PC версией, находящейся в папке Pc grid. Зачастую, для создания дизайна сайтов, ее использование более чем достаточно.

➡ Приступаем к созданию дизайна

Открываем bootstrap макет в фотошопе, который находится в папке Pc grid.

Далее я рекомендую вам сохранить документ в новый файл. Ведь с bootstrap сеткой вы будете работать довольно часто. Поэтому во избежании перезаписи текущего документа сохраним его в новый. Для сохранения воспользуйтесь командой: файл -> сохранить как... или воспользуйтесь горячими клавишами shift + ctrl + s

Сохраните документ в нужное для вас место

Далее необходимо отключить ненужный слой Bootstrap 4 grid. Он особой роли не играет и его можно даже удалить. Да этот слой содержит в себе визуальную bootstrap сетку, но на практике она бесполезна и только мешает работе. Справа на панели слоев, вам необходимо кликнуть по глазу, тем самым слой станет невидимым.

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

Сочетанием клавиш ctrl + ж мы активируем предустановленные направляющие. Попробуйте - это важно!

Давайте начнем создание дизайна сайта. Слева вы видите панель инструментов, а справа панель слоев. Панель слоев - очень важная панель. Поэтому если у вас ее нет, то в можете ее вызвать клавишей f7 или перейти в меню и выбрать окно -> слои.

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

Меню: ОКНО -> ИСТОРИЯ - возврат к предыдущим действиям (Выбор конкретной сохраненной точки из множества)ctrl + f1 - приближение документа к 100%.ctrl + s - быстрое сохранениеalt + колесо мыши - приближение/удаление.ctrl + левая кнопка мыши (по объекту) - переходит к выбранному объектуctrl + t - редактирование объекта (деформирование, масштабирование, итд)стрелки на клавиатуре - перемещение объекта по пиксельно (слой должен быть выделен)стрелки + shift - перемещение объекта на 10 пикселей (слой должен быть выделен)пробел + левая кнопка мыши - смещение обзора. Например: если документ сильно приближен, то можем перемещаться в более удобной формеshift + alt + стрелки - дублирование объектаPS. используйте shift или Alt с объектами при их создании. это позволит вам создавать пропорциональные объекты!

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

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

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

Называйте слои осмысленно. В будущем верстальщик будет юзать ваш PSD файл, я думаю ему не понравиться бардак да и вам тоже. Поэтому приучайте себя к полному порядку. Слои группируйте в папки и переименовывайте их. Вы создали слой? отлично. Теперь переименуйте его кликнув по его имени два раза. Я назову его КАРКАС и помещу в папку. Для этого выделите слой и сочетанием клавиш ctrl + g слой автоматически поместится в папку.

Теперь выделите слой КАРКАС и выберите слева на панели инструментов инструмент: прямоугольник (U). Нарисуйте квадрат любых размеров. Помните, что любой объект можно отредактировать. Сочетанием клавиш ctrl + t отредактируйте объект опираясь на финальное изображение дизайна сайта. Я надеюсь вы сохранили его? если нет то вернитесь в начало статьи и сохраните изображение на компьютер. Вам необходимо нарисовать Топ Бар синего цвета с иконками соц. сетей и E-mail адресом. Не важно какую высоту он имеет. Делайте на глаз. У меня высота равна 40px. Что касаемо палитры, то также сохраните ее на компьютер и перетащите мышью в текущий документ. Палитра нужна вам для быстрого снятия нужного цвета, инструментом: ПИПЕТКА. Что касаемо текстовых иконок, то я использую иконочный шрифт: Font awesome. Скачать его можно по этой ссылке. Просто установите шрифт в систему или прочитайте отдельную статью, где я рассказываю как его установить в фотошоп. Только не забудьте потом перезагрузить фотошоп! Давайте взглянем что у вас должно получится:

Вы можете заметить у иконок соц. сетей свечение. Здесь нет ничего необычного. На самом деле это просто инструмент эллипс. Я убрал у эллипсов заливку и обводку и они стали невидимыми. Теперь мы можем добавить им эффекты. На панели слоев, в самом низу в найдете значок FX. Выделите нужный слой с эллипсом и нажмите на FX. Вам откроется панель с эффектами. Побалуйтесь с ней, я уверен вам понравиться 🙂 Используйте эффект ВНЕШНЕЕ СВЕЧЕНИЕ или ТЕНЬ и попытайтесь сделать нечто похожее.

Собственно переходим к основному меню. Аналогично Топ Бару, возьмите инструмент прямоугольник и создайте каркас для меню. Добавьте ему немного тени. Загуглите любой логотип (или возьмите логотип из материалов) в поисковике и скачайте понравившейся логотип в формате PNG. Не обращайте внимание на цвет. Мы его можем легко заменить! Скачали логотип? Теперь перекиньте его в фотошоп, в наш рабочий документ и измените масштаб (ctrl + t). Не забывайте использовать shift при масштабировании объектов! Это позволит сохранить их пропорции. Воспользуйтесь FX эффектами и наложите на логотип свой цвет. Добавьте ссылки в меню, используя обычный инструмент ТЕКСТ. Аналогично, создайте полоску инструментом прямоугольник, а фигуру с косым углом сделайте инструментом ПЕРО (P) только не забудьте замкнуть фигуру 🙂

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

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

2. Далее по дизайну сайта, создаем полупрозрачный блок и изменяем ему прозрачность.

3. Затем создаем форму связи.

Далее следуя дизайну, необходимо создать новый слой, но расположить его выше СЛАЙДА на панели слоев. По дизайну сайта мы видим, что присутствует фотография девушки и она перекрывает блок со слайдом. Перетащите из материалов фотографию в документ, измените масштаб и добавьте заголовок МОИ СКИЛЫ. В этой же группе создайте еще два слоя, где будут находится два блока с информацией.

Настало время показать вам сетку. Надеюсь вы про нее не забыли? 🙂

Далее по дизайну сайта, аналогично слайду с формой связи, создаем блок под фоновое изображение. Мы уже умеем пользоваться масками, поэтому на этом я останавливаться не буду. Но возникает вопрос: как обесцветить изображение? Для этого слой необходимо растрировать. Выделите слой с изображением и кликнув правой кнопкой мыши выберите РАСТРИРОВАТЬ СЛОЙ. После необходимо перейти в меню: ИЗОБРАЖЕНИЕ -> КОРРЕКЦИЯ -> ОБЕСЦВЕТИТЬ (shift + ctrl + u). Создаем блок опираясь на bootstrap сетку и добавляем ему немного ТЕНИ или ВНЕШНЕГО СВЕЧЕНИЯ. Внутри блока добавляем абсолютно любой текст. В моем же случае вместе с обычным текстом идут шрифтовые иконки Font awesome.

Вы можете воспользоваться моим текстом из готового дизайна сайта портфолио:

-Разработка дизайна сайта, дизайн-концепции, доработка уже существующих разделов-Прототипирование, отрисовка чернового макета(Axure)-Уверенные знания Adobe Photoshop,Adobe Illustrator,Inkscape, фреймворка bootstrap, css и html-Оптимизация под мобильные устройства-Создание логотипов, иконок и различных баннеров-Умение проектировать и создавать промо-страницы, лэндинги, полноценные сайты, решения по интерфейсам

Раздел портфолио. Сначала идет заголовок затем содержимое. Возьмите инструмент текст и напишите: ПОРТФОЛИО. Затем инструментом ЛИНИЯ создаем линии по сторонам заголовка. Не забудьте удерживать shift при создании. Далее мы опять сталкиваемся с масками. Создайте блок с работой и перетащите в документ изображение. Под блоком идет подчеркнутая ссылка на текущую работу. Подчеркивание также делается инструментом ЛИНИЯ, но с соответствующими настройками для обводки. Вам необходимо убрать фон и добавить обводку. Режим обводки точечный. Теперь когда вы создали один блок с работой, разумнее продублировать его несколько раз при этом не забывайте о горячих клавишах для дублирования и перемещения объектов! Под всеми работами создайте кнопку для просмотра всех работ.

Я думаю вы столкнулись с проблемой нехватки места 🙂 Дело в том, что у нас фиксированная высота холста. Нам необходимо расширить ее очень быстрым способом. Возьмите инструмент РАМКА (C) спуститесь в самый низ документа и просто потяните за край документ инструментом РАМКА. Вы можете либо уменьшать пространство вашего документа либо расширять его. Возьмите место с запасом. Нам еще необходимо по дизайну добавить ФУТЕР 🙂

Если взглянуть на финальный дизайн сайта, то увидим, что ШАПКА И ПОДВАЛ идентичны. Следовательно берем группу слоев ШАПКИ и дублируем не забывая про горячие клавиши. Помещаем ФУТЕР в самый низ и переименовываем папку.

Наш дизайн сайта портфолио полностью готов! Не забывайте регулярно сохранятся клавишами ctrl + s. Теперь нам необходимо сверстать этот макет, но это отдельная работа для верстальщика. Позже мы попробуем сверстать этот макет с использованием фреймворка boostrap.

worldof.tech

Дизайн в Photoshop: Создание красивых радужных обоев

Дизайн в Photoshop: Создание красивых радужных обоев

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

Для начала создайте новый документ необходимого размера (1920х1080) и залейте его черным цветом. Затем примените фильтр Filter > Render > Difference Clouds и нажмите Ctrl+F 7 раз (таким образом Вы примените данный фильтр восемь раз).

Теперь примените фильтр Filter > Noise > Add Noise с установленным Percent на 155%.

Дальше, примените фильтр Filter > Blur > Motion Blur. Настройки следующие: Radius 90° и Distance 999. Также примените его еще семь раз (Ctrl+F).

Создайте дубликат слоя (Ctrl+J). Вернитесь на первый слой и разблокируйте его, дважды кликнув по нему мышью в панели слоев. Кликните правой клавишей мыши по этому слою и выберите Blending Options. В открывшемся окне выберите стиль Gradient Overlay. Вам необходимо применить линейный градиент с цветами радуги (он есть по умолчанию) с углом 180°.

Перейдите на верхний слой и установите режим наложения (Blend Mode) на Hard Light.

Создайте новый слой и заполните его черным цветом и установите заливку (Fill) на 0%. Затем, добавьте Gradient Overlay от черного к прозрачному с настройками: поставьте галочку на Reversed, в поле Style выберите Reflected, установите угол 90° и непрозрачность (Opacity) на 90%.

Создайте новый слой. Выберите инструмент Custom Shape Tool и выберите форму Registration Target 2 как в уроке Web-дизайн в Photoshop: Создание панели навигации в стиле Windows 7. Создайте форму большоги размера и разместите ее посередине. После этого, удерживая клавишу Ctrl щелкните мышью по слою с формой – появится область выделения. Создайте новый слой и залейте область выделения белым цветом (Edit > Fill). Теперь можно удалить слой с фигурой и область выделения (Ctrl+D).

Теперь примените фильтр Filter > Blur > Gaussian Blur с Radius 7. И установите режим наложения (Blend Mode) Overlay и заливку (Fill) слоя на 25%.

Создайте новый слой и заполните его черным цветом. Примените фильтр Filter > Render > Lens Flare с параметрами: Brightness 110%, а Lens Type 105mm Prime. Установите вспышку в центре изображения и нажмите ОК. Поменяйте режим наложения (Blend Mode) на Hard Light и Fill на 50%.

Вот и все!!! Попробуйте сами и пишите комментарии!!!

Похожие записи

Опубликовать пост в социальных сетях

quicktuts.ru

Создаём дизайн для страницы блога в Фотошоп

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

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

Посмотреть полноразмерный концепт темы блога

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

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

Выберите инструмент Прямоугольная область  (Rectangular Marquee Tool) и нарисуйте квадратное выделение где-нибудь в центре. Инвертируйте выделение и удалите излишки. Методом проб и ошибок нужно найти секцию, которая повторяется без видимых углов.

Уменьшите непрозрачность (Opacity) текстуры примерно до 30%, потом посмотрите, корректно ли она повторяется при дублировании на большую площадь. Используйте инструмент  Штамп (Clone Tool), чтобы удалить все не желаемые частички в оригинальном файле.

С выбранным файлом оригинальной текстуры перейдите в меню Редактирование > Определить узор (Edit > Define Patterns), чтобы сохранить образец. Заполните фон файла с дизайном только что созданным узором.

Обведите зону размером 960px в центре документа и залейте ее белым. Я использую инструмент  Прямоугольная область (Rectangular Marquee Tool), кликнув правой кнопкой мыши по выделению и выбрав Трансформировать выделенную область (Transform Selection). В верхней панели вы можете ввести точные размеры.

Добавьте прямоугольнику с контентом тонкую Тень (Drop Shadow). Я использую такие настройки - 6% Непрозрачность (Opacity), 0 Смещение (Distance), 0 Размах (Spread) и размер (Size) 10px. Также добавьте слою очень тонкий серый штрих размером 1px, чтобы отделить грань.

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

Добавьте Наложение градиента (Gradient Overlay), используя режим Наложение (Overlay blending mode). Уменьшите непрозрачность (Opacity), чтобы смягчить воздействие градиента и оставить мягкую смену цвета.

Добавьте штрих размером 1px более темного красного оттенка, затем добавьте эффект Внутреннее свечение (Inner Glow), используя более светлый оттенок. Отрегулируйте настройки так, чтобы Режим наложения (Blending mode) был нормальным (Normal), стягивание (Choke) 100%,размер 1px.

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

Пора добавить текст нашему логотипу. Здесь я использовал шрифт American Typewriter, с размером и корректировками для слова "Stub".

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

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

Добавьте пару иконок для RSS и Twitter в верхней правой части.

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

Весь текст в шаблоне будет с шрифтом Helvetica, в то время как темно красный был выбран для цвета всех ссылок.

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

Сгенерированный "рыбный" текст можно использовать, чтобы представить вводный контент поста. Установите шрифт на разборчивые 14px с достаточной высотой линии около 24px, чтобы увеличить читабельность. Черный шрифт основного текста на белом фоне слишком контрастирует, поэтому смягчите его к светло-серому.

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

Настройте эффект Внутреннее свечение (Inner Glow), используя Режим наложения (Blending mode) - нормальный (Normal), 100% стягивание (Choke), размер 1px, чтобы создать эффект двойной границы.

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

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

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

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

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

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

Используйте инструмент Овальная область  (Elliptical marquee) как основу для иконки увеличительного стекла. Кликните правой кнопкой мыши и выберите Выполнить обводку (Stroke), чтобы придать выделению белую обводку толщиной 2px, затем закончите иконку, дорисовав рукоятку при помощи инструмента Линия  (Line Tool)

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

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

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

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

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

Посмотреть полноразмерный концепт темы блога

Автор: Chris Spooner

photoshop-master.ru

Как нарисовать сайт в Фотошопе

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

Adobe Photoshop редактирование фото

В Фотошопе нарисовать несложный дизайн сайта под силу даже новичку

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

Немного о создании сайтов

Расшифровка некоторых терминов.

  • CSS (Cascading Style Sheets) и HTML (HyperText Markup Language) — компьютерные языки, которые используются при создании веб-ресурсов. Если открыть исходный код любой страницы в интернете, там будут HTML-тэги.
  • Вёрстка — компоновка и монтаж материалов из макета, превращение его в html-шаблон. От этого зависит, как располагаются объекты, красиво ли они выглядят в общей композиции, удобно ли читать текст и тому подобное.
  • Слои — части макета. Они вместе составляют общую картину. Но их можно редактировать и перемещать отдельно друг от друга.
  • Тело — место, где находится контент. Вокруг него может быть фон.
  • Фрейм (Frame) — элемент страницы. Блок с какой-то информацией, картинкой, формой.

Сделать потрясающий сайт с нуля может только профессионал. Для этого нужно разбираться в веб-дизайне и знать HTML. Так как готовый макет надо ещё грамотно сверстать.

HTML 5

Но есть и более простые способы. Существуют онлайн-сервисы и программы, которые автоматически преобразуют .psd (формат файлов Photoshop) в HTML и CSS. Вам останется лишь правильно собрать шаблон.

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

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

  • Одностраничный. Все элементы, контент, всё наполнение ресурса находится в одном месте. На одной странице. Чтобы просмотреть содержимое сервиса, не надо переходить по ссылкам или открывать новые вкладки. При этом сам сайт может быть сколь угодно большим. В нём поместится и маленькая рекламная брошюра, и огромный роман на 600 листов.
  • Многостраничный. Соответственно, включает много страниц. Это могут быть, например, «Главная», «Форум», «Гостевая книга», «Ответы на часто задаваемые вопросы», «Контакты». Для каждой из них нужно делать макет. Ещё потребуются навигация и карта сайта: отдельный раздел со ссылками на все части сервиса. Чтобы пользователь мог быстро найти нужную ему закладку.
  • «Резиновый». Меняет размер в зависимости от разрешения экрана. Растягивается вместе с окном обозревателя. Надо заранее рассчитывать, как будет выглядеть сайт. Если при ширине 1300 всё отображается нормально, то в 900 пикселях часть статьи может «уехать» за границы фрейма, изображения встанут не так, как надо, а flash-анимация закроет форму для ввода.
  • Фиксированный. Тело сайта не меняет размер. Самый лёгкий и практичный вариант. Чтобы страница выглядела цельной, и при расширении окна не было «пустого» места по краям, можно сделать резиновым фон.

Сайт

Макет

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

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

  • Создайте новый документ (Файл — Создать). Размеры подбираются с расчётом на маленькие мониторы или низкое разрешение: 1024×720 пикселей. Это ширина «информационной» части, а не всего рисунка. Если вы хотите страницу в 1100 пикселей, то надо делать документ шириной от 1300 пикселей. Длина, по сути, не фиксирована — она зависит от того, сколько контента вы хотите разместить на ресурсе. Это рекомендации, а не правила. Можете собрать большой макет, если хотите.
  • Включите линейки. Нажмите Ctrl+R или перейдите в меню Просмотр — Линейки. Это измерительная шкала. Она появляется снаружи рисунка. Без неё придётся прикидывать размеры и расстояния «на глаз», что не очень хорошо скажется на конечном результате. Настроить эту функцию можно в меню Редактирование — Установки — Единицы измерения и линейки. Там лучше поменять сантиметры на пиксели, чтобы работать с одним параметром, а не высчитывать, сколько точек в одном дюйме.
  • Также следует активировать сетку. Просмотр — Показать — Сетка или Ctrl+Э (отключить её можно также). Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт.
  • Чтобы её настроить, перейдите в Редактирование — Установки — Направляющие, сетка и фрагменты. Там можно выбрать размер клеток, а также цвет и тип линий (сплошная, пунктирная, из точек).
Современный сайт

Пример современного дизайна сайтов

  • Установите направляющие. Между ними будет находиться основной контент-ресурса — фиксированное тело сайта. А за ними — резиновый фон. Чтобы это сделать, нажмите Просмотр — Новая направляющая. В блоке «Ориентация» отметьте пункт «Вертикальный». В поле «Положение» напишите, на каком расстояние от левого края будет находиться объект. Ориентируйтесь по шкале линейки.
  • Нужны две направляющие — справа и слева от тела страницы. Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024×720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах.
  • Почему 1003, а не 1024? Если сайт надо пролистывать («скроллить») вниз, в браузере будет вертикальный ползунок для прокрутки. Размер этого ползунка — примерно 21 пиксель. Если его не учитывать, появится горизонтальный скролл. И посетителю ресурса придётся двигать страницу вправо-влево, чтобы увидеть всю информацию.
  • Тело должно быть в центре холста.

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

  • Для начала вашему макету нужен фон. Его можно сделать самостоятельно или скачать из сети. Существует много ресурсов с бесплатными текстурами. Не ставьте на сайт изображения, на которые распространяются авторские права. Не стоит брать яркий или контрастный фон. Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы.
  • Если просто открыть рисунок в Фотошопе, он окажется на новой вкладке, а не добавится в макет. Выделите весь фон. Для этого нужно сочетание клавиш Ctrl+A или инструмент «Выделение» (он находится на панели слева). Скопируйте его и вставьте в шаблон.
  • Также эта опция доступна, если нажать Редактирование — Вставка.

Adobe Photoshop

  • В списке справа внизу появится новый слой. Кликните по нему правой кнопкой мыши, чтобы посмотреть возможные действия. В меню «Параметры слоя» можно изменить его имя. В «Параметры наложения» находятся основные настройки изображения. Можно сделать ему свечение, тиснение, глянец, обводку, градиент. Если выберите какую-то опцию, изменения сразу отобразятся в Фотошопе. Есть набор готовых стилей. Так из стандартной текстуры создаются оригинальные дизайнерские решения. И ничего дополнительно рисовать не надо.
  • Кнопка «Фильтры» есть в строке меню. Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие.
  • Можно выбрать однотонный фон. Цвет зависит от ваших личных предпочтений. Но лучше не делать его чёрным или ядовитым. Подойдут постельные и мягкие тона или прозрачные холодные (например, светло-серый, нежно-голубой).
  • После текстур можно собирать сам сайт. Вот тут вам предоставлена свобода для творчества.
  • Чтобы добавить какую-то фигуру (отрезок, квадрат, овал), нажмите на соответствующую кнопку справа. Она будет иметь вид и название того объекта, который в данный момент выбран для рисования. Например, «Инструмент Эллипс», «Инструмент Многоугольник». В Фотошопе количество фигур ограничено. Но их можно найти в интернете, скачать и установить через меню Редактирование — Управление наборами. В поле «Тип» укажите, коллекцию каких объектов вы загружаете.
  • В разных версиях программы эти фигуры вызываются по-разному. Либо кнопкой в виде маленького чёрного треугольника (она справа), либо пиктограммой в виде шестерёнки, либо пунктом «Форма растровой точки» (она под строкой меню). Объекты можно комбинировать, группировать, делать из них композиции.
  • Чтобы создать текстовый фрейм, нажмите на кнопку в виде заглавной буквы «T». Потом выберите место, где должны располагаться символы, кликните туда и напечатайте то, что вам нужно.
  • Каждый элемент лучше ставить на отдельный слой. Так будет удобнее перемещать и редактировать, не «задевая» весь сайт. Чтобы добавить этот объект, перейдите в Слои — Новый.

Создание сайта в Фотошопе

  • Чтобы спроецировать изображение в заранее выбранную область, вначале выделите её, а потом откройте Редактирование — Специальная вставка. Там будут опции «Вставить вместо» и «Вставить за пределами».
  • Можно часть одного рисунка перенести на новый слой. Для этого надо выделить её, щёлкнуть по ней правой кнопкой мыши и выбрать «Вырезать на новый слой».
  • С фигурами, надписями и изображениями доступны те же опции, что и с фоном: эффекты, фильтры и так далее.
  • В Фотошопе существует ещё много инструментов для рисования: кисти, перья, карандаши.

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

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

Как превратить макет в html-файл?

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

HTML Panda

Его можно отдать верстальщику, который сделает качественный html-шаблон. Но есть и другой вариант. Воспользоваться сервисами для конвертации PSD-файла в HTML и CSS.

  • Psd2Html Converter. Платный онлайн-сервис. Быстро конвертирует формат Photoshop в шаблон интернет-страницы. С этим ресурсом даже из некачественного макета можно создать приличный сайт.
  • HTML Panda.
  • PSDCenter
  • 40 Dollar Markup.

Конструкторы

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

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

nastroyvse.ru

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

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

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

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела "Photoshop".

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

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

  1. Дать имя своему макету, у меня на примере "mysite"
  2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
  3. Единицы измерения установи в "Пикселях". Разрешение "72" Пиксели/дюйм.
  4. Жми "OK". И сохраняй его как psd "Файл > Сохранить как..." в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент "Прямоугольник",  установи в параметрах инструмента значение "Пиксели"  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным). 

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

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения "Прямоугольная область". А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

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

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось "Файл -> Сохранить для Web -> PNG-24"

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

  1. Правый клик на файле
  2. В контекстном меню "Открыть с помощью"
  3. Выбери браузер которым пользуетесь (у меня hrome).
  4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
  5. Кликни один раз для отображения изображения в полный размер.

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

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

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

Создание группы слоев

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

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

  1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
  2. Выбрать инструмент "Перемещение" (это стрелочка напоминающая курсор)
  3. Открой вкладку с логотипом
  4. Наведи курсор на изображение логотипа
  5. Нажми и не отпускай левую кнопку мыши
  6. Тащи изображение на вкладку с макетом
  7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
  8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента "Текст" пишу "Горячая линия" и номер телефона организации "+7 (3435) 25-60-60". Я разместил телефон в шапке по двум причинам. Первая это наличие телефона с правой стороны в шапке уже привычно пользователям, так сделано на большинстве сайтов компаний. Вторая, если это сайт компании, то многие посетители почитав, то что их интересуют наверняка захотят позвонить и им не придется открывать страницу контакты. Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

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

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

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

  1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
  2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
  3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
  4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне "Символ"

257 13

Я использовал 14 размер и стандартный для Windows шрифт "Verdana"

Старайся использовать стандартные шрифты по максимуму. Так как при просмотре сайта пользователь используется шрифты своей системы.

Получилось вот такое меню:

Дизайн содержимого сайта

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

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

Направляющие в дизайне

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

Получилось вот что:

Дизайн подвала сайта

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

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

Результат:

Дизайн сайта в фотошопе (Photoshop)

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

www.opengs.ru


Смотрите также