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

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

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

• 1. Создаем новый документ 1200×1200 пикс. Цвет заливки сделаем #d6d6d6, цвет фона #efefef. После берем инструмент Градиент:

• 2. Делаем заливку холста сверху вниз на 250-300 пикселей.

• 3. Выбираем инструмент Прямоугольная область и создаем выделение высотой примерно 160-170 пикс. на всю ширину изображения.

• 4. Устанавливаем цвет заливки #483f38, цвет фона #1e1916, и опять берем инструмент Градиент, но стиль уже выставляем на Зеркальный

Из середины прямоугольного выделения делаем заливку к любой из его сторон. Затем идем в Фильтр Шум Добавить шум

• 5. Инструментом Текст создаем наш заголовок и слоган. Цвета шрифта я указал в самой картинке.

Заходим в Параметры наложения нашего заголовка и делаем следующее:

Тень (режим умножение):

К одному из слов заголовка применим Наложение градиента (режим — нормальный, стиль — линейный)

Примерно вот так:

• 6. Берем инструмент Прямоугольник с закругленными углами (радиус 10пикс.) и создаем фигуру в правой части нашей шапки:

В Параметры наложения фигуры:

Внутренняя тень (режим — умножение):

• 8. Сейчас мы будем создавать основную навигацию. Перед этим, нам нужно отделить область шапки. Инструментом Прямоугольная область или Горизонтальная строка создаем две 1-пиксельные линии чёрного и белого цвета друг под другом. Эти линии должны быть расположены сразу под шапкой.

Выбираем инструмент Прямоугольник с закруглёнными углами и рисуем фигуру:

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

Тень (режим — умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

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

Устанавливаем Непрозрачность слоя на 5%. Теперь нам требуется создать новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш рисуем вот такой узор чёрного цвета:

Отлично, теперь переходим в меню Редактирование Определить узор (Edit Define Pattern) и сохраняем узор под именем “Диагональные линии”.
Возвращаемся в основной документ и делаем выделение основного прямоугольника навигации (Ctrl+левая кнопка мыши), создаем новый слой и заливаем выделение узором при помощи инструмента Заливка. Непрозрачность слоя – 10%.

• 9. Инструментом Горизонтальный текст пишем названия наших разделов навигации. В правой области навигации создаем прямоугольник с закругленными углами (радиус 5 пикселей)

Далее в Параметры наложения:

Внутренняя тень (режим — умножение):

Добавляем иконку поиска и следующий текст:

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

Справа от текста вставляем нашу упаковку с софтом:

Делаем копию упаковки, с помощью клавиш Ctrl+T уменьшаем ее размер, располагаем ее сзади оригинала и применяем: Фильтр Размытие Размытие по Гауссу (1 пикс.)

Повторяем эту операцию еще один раз:

С помощью инструмента Прямоугольник с закруглёнными углами (радиус 10пикс.) делаем две кнопки. Применяем к ним те же стили слоя, что и к навигационной панели.

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

Создаем выделение прямо под ними:

Устанавливаем цвет заливки — #e6e6e6, цвет фона — #efefef, и делаем заливку линейным градиентом сверху вниз.

• 12. Под разделителем слева рисуем прямоугольник с закруглёнными углами:

Далее в Параметры наложения:

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Заполняем текстом этот прямоугольник:

• 13. Справа от прямоугольника пишем немного текста и можно вставляем наши, заранее скаченные иконки:

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

Всем до встречи, встретимся в новых уроках!

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

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

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

• 1. Создаем новый документ 1200×1200 пикс. Цвет заливки сделаем #d6d6d6, цвет фона #efefef. После берем инструмент Градиент:

• 2. Делаем заливку холста сверху вниз на 250-300 пикселей.

• 3. Выбираем инструмент Прямоугольная область и создаем выделение высотой примерно 160-170 пикс. на всю ширину изображения.

• 4. Устанавливаем цвет заливки #483f38, цвет фона #1e1916, и опять берем инструмент Градиент, но стиль уже выставляем на Зеркальный

Из середины прямоугольного выделения делаем заливку к любой из его сторон. Затем идем в Фильтр Шум Добавить шум

• 5. Инструментом Текст создаем наш заголовок и слоган. Цвета шрифта я указал в самой картинке.

Заходим в Параметры наложения нашего заголовка и делаем следующее:

Тень (режим умножение):

К одному из слов заголовка применим Наложение градиента (режим — нормальный, стиль — линейный)

Примерно вот так:

• 6. Берем инструмент Прямоугольник с закругленными углами (радиус 10пикс.) и создаем фигуру в правой части нашей шапки:

В Параметры наложения фигуры:

Внутренняя тень (режим — умножение):

• 8. Сейчас мы будем создавать основную навигацию. Перед этим, нам нужно отделить область шапки. Инструментом Прямоугольная область или Горизонтальная строка создаем две 1-пиксельные линии чёрного и белого цвета друг под другом. Эти линии должны быть расположены сразу под шапкой.

Выбираем инструмент Прямоугольник с закруглёнными углами и рисуем фигуру:

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

Тень (режим — умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

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

Устанавливаем Непрозрачность слоя на 5%. Теперь нам требуется создать новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш рисуем вот такой узор чёрного цвета:

Отлично, теперь переходим в меню Редактирование Определить узор (Edit Define Pattern) и сохраняем узор под именем “Диагональные линии”.
Возвращаемся в основной документ и делаем выделение основного прямоугольника навигации (Ctrl+левая кнопка мыши), создаем новый слой и заливаем выделение узором при помощи инструмента Заливка. Непрозрачность слоя – 10%.

• 9. Инструментом Горизонтальный текст пишем названия наших разделов навигации. В правой области навигации создаем прямоугольник с закругленными углами (радиус 5 пикселей)

Далее в Параметры наложения:

Внутренняя тень (режим — умножение):

Добавляем иконку поиска и следующий текст:

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

Справа от текста вставляем нашу упаковку с софтом:

Делаем копию упаковки, с помощью клавиш Ctrl+T уменьшаем ее размер, располагаем ее сзади оригинала и применяем: Фильтр Размытие Размытие по Гауссу (1 пикс.)

Повторяем эту операцию еще один раз:

С помощью инструмента Прямоугольник с закруглёнными углами (радиус 10пикс.) делаем две кнопки. Применяем к ним те же стили слоя, что и к навигационной панели.

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

Создаем выделение прямо под ними:

Устанавливаем цвет заливки — #e6e6e6, цвет фона — #efefef, и делаем заливку линейным градиентом сверху вниз.

• 12. Под разделителем слева рисуем прямоугольник с закруглёнными углами:

Далее в Параметры наложения:

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Заполняем текстом этот прямоугольник:

• 13. Справа от прямоугольника пишем немного текста и можно вставляем наши, заранее скаченные иконки:

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

Всем до встречи, встретимся в новых уроках!

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

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

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

• 1. Создаем новый документ 1200×1200 пикс. Цвет заливки сделаем #d6d6d6, цвет фона #efefef. После берем инструмент Градиент:

• 2. Делаем заливку холста сверху вниз на 250-300 пикселей.

• 3. Выбираем инструмент Прямоугольная область и создаем выделение высотой примерно 160-170 пикс. на всю ширину изображения.

• 4. Устанавливаем цвет заливки #483f38, цвет фона #1e1916, и опять берем инструмент Градиент, но стиль уже выставляем на Зеркальный

Из середины прямоугольного выделения делаем заливку к любой из его сторон. Затем идем в Фильтр Шум Добавить шум

• 5. Инструментом Текст создаем наш заголовок и слоган. Цвета шрифта я указал в самой картинке.

Заходим в Параметры наложения нашего заголовка и делаем следующее:

Тень (режим умножение):

К одному из слов заголовка применим Наложение градиента (режим — нормальный, стиль — линейный)

Примерно вот так:

• 6. Берем инструмент Прямоугольник с закругленными углами (радиус 10пикс.) и создаем фигуру в правой части нашей шапки:

В Параметры наложения фигуры:

Внутренняя тень (режим — умножение):

• 8. Сейчас мы будем создавать основную навигацию. Перед этим, нам нужно отделить область шапки. Инструментом Прямоугольная область или Горизонтальная строка создаем две 1-пиксельные линии чёрного и белого цвета друг под другом. Эти линии должны быть расположены сразу под шапкой.

Выбираем инструмент Прямоугольник с закруглёнными углами и рисуем фигуру:

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

Тень (режим — умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

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

Устанавливаем Непрозрачность слоя на 5%. Теперь нам требуется создать новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш рисуем вот такой узор чёрного цвета:

Отлично, теперь переходим в меню Редактирование Определить узор (Edit Define Pattern) и сохраняем узор под именем “Диагональные линии”.
Возвращаемся в основной документ и делаем выделение основного прямоугольника навигации (Ctrl+левая кнопка мыши), создаем новый слой и заливаем выделение узором при помощи инструмента Заливка. Непрозрачность слоя – 10%.

• 9. Инструментом Горизонтальный текст пишем названия наших разделов навигации. В правой области навигации создаем прямоугольник с закругленными углами (радиус 5 пикселей)

Далее в Параметры наложения:

Внутренняя тень (режим — умножение):

Добавляем иконку поиска и следующий текст:

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

Справа от текста вставляем нашу упаковку с софтом:

Делаем копию упаковки, с помощью клавиш Ctrl+T уменьшаем ее размер, располагаем ее сзади оригинала и применяем: Фильтр Размытие Размытие по Гауссу (1 пикс.)

Повторяем эту операцию еще один раз:

С помощью инструмента Прямоугольник с закруглёнными углами (радиус 10пикс.) делаем две кнопки. Применяем к ним те же стили слоя, что и к навигационной панели.

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

Создаем выделение прямо под ними:

Устанавливаем цвет заливки — #e6e6e6, цвет фона — #efefef, и делаем заливку линейным градиентом сверху вниз.

• 12. Под разделителем слева рисуем прямоугольник с закруглёнными углами:

Далее в Параметры наложения:

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Заполняем текстом этот прямоугольник:

• 13. Справа от прямоугольника пишем немного текста и можно вставляем наши, заранее скаченные иконки:

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

Всем до встречи, встретимся в новых уроках!

5. Создание дизайна сайта в Photoshop.

Интересные записи

• Курсы Web дизайна (Html, CSS, Photoshop) для начинающих в Киеве
• Как в Photoshop перенести одно изображение на другое
• Рисуем сайт в Photoshop и устанавливаем его на WordPress
• Как сделать прозрачный фон на фотографии
• Как сделать сайт - режем шаблон в Photoshop
• Красивый дизайн кнопочек для сайта