С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Макет сайта для вашего портфолио в Фотошопе

Макет сайта для вашего портфолио в Фотошопе

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

 

Предварительный просмотр

 

 

Ресурсы, используемые в этом уроке

 

Woofunction Icon Set
Hora Del Juego By Reevolver
Vijaya Font

 

Создание фона для макета

 

Создайте новый документ (Ctrl + N) размером в  1200 на  1245 пикселей с белым фоном # FFFFFF. Щелкните правой кнопкой мыши по фоновому  слою и в контекстном меню выберите команду Слой из заднего плана (Layer From Background), дайте этому слою имя, а затем добавьте стиль слоя Наложение градиента (Gradient Overlay), используя следующие настройки, как показано на изображении ниже.

 


 

Выберите инструмент Овальная область (Elliptical Marquee Tool (M)) и нарисуйте большой эллипс на верхней части холста.

 

 

Создайте новый слой выше фонового слоя, то назовите его «Background Jazz». Теперь выберите инструмент Градиент (Gradient Tool) со следующими параметрами, как показано на изображении ниже.

 

Макет сайта для вашего портфолио в Фотошопе

 

Перетащите градиент над частью верхней части эллипса, так как мы не хотим, чтобы был заполнен весь эллипс.

 

 

Снимите выделение (Ctrl + D), и у вас должно получиться  что-то вроде этого.

 

 

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

 


 

Создание заголовка

 

На левой стороне холста добавьте название и лозунг, используя инструмент Горизонтальный текст (Type Tool (T)). Используйте шрифт, указанный ниже.

 

Vijaya font

 

 

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

 

 

 

Вот, что должно у вас получиться на данный момент.

 

 

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

 

 

 

Создание слайдера

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) с радиусом в 10 пикселей,  затем создайте прямоугольник достаточного размера под элементы заголовка.

 

 

 

Теперь выберите слой с прямоугольником и слой «Featured», добавьте к ним следующие стили слоя.

 

 

 

Теперь понизьте непрозрачность слоев до 50%, у вас должно получиться что-то вроде этого, как показано на изображении ниже.

 

 

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

 

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

 

 

После того, как создадите выделение, перейдите в меню Выделение> Модификация> Сжать (Select> Modify> Contract). Задайте значение в 15 пикселей и затем нажмите кнопку ОК. 

 

Теперь откройте изображение Hora Del Juego By Reevolver в Фотошопе и скопируйте его в буфер обмена, затем вернитесь к исходному холсту и перейдите в меню Редактирование> Специальная вставка> Вставить в (Edit > Paste Special > Paste into) или нажмите комбинацию клавиш Alt + Shift + Ctrl + V. Переместите и измените размер изображения, чтобы оно выглядело, как вам нужно. Наконец снимите выделение нажав комбинацию клавиш Ctrl + D.

 

 

Выберите инструмент Перо (Pen Tool (P)) или Прямолинейное Лассо (Polygonal Lasso Tool (L)) и создайте следующее выделение изображения, как показано на изображении ниже.

 

 

Выполните заливку выделения на новом слое белым цветом # FFFFFF, затем понизьте непрозрачность слоя до 35%.

 

 

Далее нужно добавить подпись для изображения. Просто выберите инструмент Прямоугольная область (Rectangular Marquee Tool (M)) и создайте прямоугольное выделение в нижней части изображения.

 

 

Залейте выделение любым цветом и добавьте следующие стили слоя.

 

 

 

 

Выберите инструмент Горизонтальный текст (Type Tool (T)) и добавьте немного текста в качестве заголовка внутри прямоугольника, у Вас должно получиться что-то вроде этого, как показано на изображении ниже.

 

 

Создание галереи слайдера

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) и создайте следующий  квадрат.

 

 

Измените цвет квадрата на белый # FFFFFF  и сожмите на 5-10 пикселей так же, как вы делали для большого прямоугольника. После добавьте изображение в квадрат.

 

 

Повторите этот шаг еще 3 раза, таким образом, у вас должно получиться в общей сложности 4 изображения.

 

 

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

 

 

Добавьте следующие стили слоя к двум стрелкам.

 

 

 

Вот, что должно у вас получиться.

 

 

Создание содержания

 

Начните с добавления простой разделительной линии.

 

 

Разделительная линия будет создана с помощью инструмента Горизонтальный текст (Type Tool (T)) и клавиши тире (-). Как только вы создали разделитель, добавьте следующие стили слоя.

 

 

 

Понизьте непрозрачность слоя с разделителем до 50% и все готово. Теперь, используя инструмент Горизонтальный текст (Type Tool (Т)) добавьте слоган, используя тот же шрифт.

 

Дублируйте слой с разделителем и поместите дубликат под слоган.

 

 

Скачайте набор иконок Woofunction Icon Set и добавьте две иконки в область содержимого. Рядом с каждой иконкой добавьте заголовок и небольшое описание.

 

 

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

 

 

В пространстве на правой стороне области содержимого добавьте заголовки статей из блога.

 

 

Наконец дублируйте длинный горизонтальный разделитель ещё раз и перетащите его под содержание, которое вы только что создали.

 

Создание блока для Twitter

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) и создайте прямоугольник под последней разделительной полосой, которую вы только что создали.

 

 

Добавьте следующие стили слоя.

 

 

 

 

Вот, что должно у вас получиться.

 

 

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

 

 

Создание футера

 

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

 

 

Добавьте текст с копирайтами и иконки социальных сетей.

 

 

Вот и всё.

 

 

Урок по теме – Руководство по созданию потрясающей обложки для Facebook в Фотошопе.

 

Источник



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


  • 10.02.2014
  •   Просмотров: 5170
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки