Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Урок фотошоп - Як зробити шапку для сайту або блогу

Дорогі друзі сьогодні ми з вами розглянемо таке актуальне питання - як зробити шапку для сайту або блогу? Після вивчення даного уроку ви навчитеся робити шапки для сайтів в фотошопі. Робити ми будемо ось таку шапку: Дорогі друзі сьогодні ми з вами розглянемо таке актуальне питання - як зробити шапку для сайту або блогу

(Натисніть на Картік для перегляду оригіналу)

У мене стоїть Photoshop CS4 (англійська версія). Будемо вважати що до нас надійшло замовлення на виготовлення шапки для сайту або блогу. Замовник надіслав зразок майбутньої шапки і пояснив:

Зліва на шапці хочу тематичну іконку + назва сайту та слоган, праворуч буде 3 тематичних картинки з мультфільму і фільмів. Знизу на шапці буде горизонтальне меню (по центру).

(Натисніть на Картік для перегляду оригіналу)

І так, сідайте за зручніше, я починаю свою розповідь 🙂 1. Створюємо новий документ File → New (Файл → Новий або CTRL + N - в дужках разом з перекладом буду вказувати скорочення - простіше кажучи "гарячі" клавіші, які дозволяють економити час в програмі фотошоп). У віконці я вказав наступні параметри:

В результаті вийшов новий документ: В результаті вийшов новий документ:

(Натисніть на Картік для перегляду оригіналу)

Після цього зробимо невелику налаштування фотошопа: Ставлю галочку Auto-Select (Автоматично вибрати) і в випадаючому меню вибираю Layer (Шари) - це налаштування дозволяє вибрати будь-який шар при натисканні на ньому.

Після цього зробимо невелику налаштування фотошопа: Ставлю галочку Auto-Select (Автоматично вибрати) і в випадаючому меню вибираю Layer (Шари) - це налаштування дозволяє вибрати будь-який шар при натисканні на ньому

Включаємо шкалу-лінійку для документа: Йдемо Views → Rules (Вид → Лінійки або просто тиснемо CTRL + R) повинна з'явитися горизонтальна і вертикальна шкала-лінійка. Включаємо шкалу-лінійку для документа: Йдемо Views → Rules (Вид → Лінійки або просто тиснемо CTRL + R) повинна з'явитися горизонтальна і вертикальна шкала-лінійка Відразу ж слід переконатися, що дані на лінійці відображаються в пікселях. Для цього клацаємо двічі мишкою по самій шкалою з лінійкою і вибираємо такі дані: Після цього я з допомогою напрямних (клацаєте по лінійці і тягнете мишку вправо або вниз), розмічаю місця під основні елементи шапки:

(Натисніть на Картік для перегляду оригіналу)

Напрямні можна Показувати / Ховати за допомогою View → Show → Guides (Вид → Показувати → напрямні) або CTRL +; 2. Приступимо до створення основних елементів шапки. Створимо фон для шапки. Йдемо Windows → Layers (Вікно → Шари або F7). Двічі клацаємо по шару Background, тим самим перетворимо його в простий шар (назва шару я вказав - fon-shapki)

Двічі клацаємо по шару Background, тим самим перетворимо його в простий шар (назва шару я вказав - fon-shapki)

Далі ще раз двічі клацаємо по шару fon-shapki і відкривається віконце зі стилями шару, там вибираємо потрібний стиль для шару, я вибрав градієнтну заливку - Gradient Overlay (Заливка градієнтом) і поставив наступні настройки. Клацаємо двічі по смужці з градентом: Далі ще раз двічі клацаємо по шару fon-shapki і відкривається віконце зі стилями шару, там вибираємо потрібний стиль для шару, я вибрав градієнтну заливку - Gradient Overlay (Заливка градієнтом) і поставив наступні настройки У наступному віконці клацаємо мишкою по лівому маркера: У віконці, внизу вказуємо колір 196ca6 і тиснемо OK. Далі клацаємо по правому маркера і в віконці вказуємо колір 0048a0 і тиснемо OK. Далі копіюємо наш шар з фоном. У палітрі Layers (Шари, F7) вибираємо наш шар мишкою, далі натискаємо мишкою на шари і не відпускаючи кнопки миші переносимо шар на наступну іконку і відпускаємо мишку. Створиться новий шар - копія попереднього (можна просто натиснути CRTL + J). Не знімаючи виділення з нового шару, встановимо йому Opacity (Непрозорість) в 18%. Далі клацаємо два рази нового шару, знімаємо галочку з Gradient Overlay (Заливка градієнтом) і ставимо галочку Pattern Overlay (Заливка текстурою), ставимо такі налаштування: Все фон для шапки у нас готовий. 3. Далі зробимо фон для горизонтального меню знизу. Робимо новий шар - натискаємо на піктограму або просто тиснемо Shift + Ctrl + N (у нас вийшов новий прозорий шар). Після цього вибираємо інструмент Rectangular Marque Tool (Прямокутне виділення, M) і малюємо прямокутне виділення.

(Натисніть на Картік для перегляду оригіналу)

Після цього заливаємо наше виділення довільним кольором. беремо інструмент Після цього заливаємо наше виділення довільним кольором Paint Bucket Tool (Відро, G) і натискаємо по виділенню (я вибрав колір 165394).

беремо інструмент   Paint Bucket Tool (Відро, G) і натискаємо по виділенню (я вибрав колір 165394)

Переходимо в стилі нового шару і ставимо галочки навпроти наступних пунктів: Drop Shadow (Відкидати тінь), Gradient Overlay (Градиентная заливка), Stroke (Обведення), з наступними настройками: Переходимо в стилі нового шару і ставимо галочки навпроти наступних пунктів: Drop Shadow (Відкидати тінь), Gradient Overlay (Градиентная заливка), Stroke (Обведення), з наступними настройками:   Після цього вкажемо Opacity (Непрозорість) шару в 80% Після цього вкажемо Opacity (Непрозорість) шару в 80%.

(Натисніть на Картік для перегляду оригіналу)

Після того як у нас готовий фон, можна приступати до створення інших елементів шапки. 4. Напишемо назву сайту, слоган і текст для горизонтального меню. Для цього вибираємо інструмент Після того як у нас готовий фон, можна приступати до створення інших елементів шапки Horizontal Type Tool (Горизонтальний текст) і клацаємо на шапці в тому місці, в якому плануємо написати напис, і пишемо її. Маленька підказка. Cлоі дуже зручно рухати або перетягувати з документа в документ за допомогою інструменту Move Tool. Я вибрав для назви сайту напис "Myvideo.com" і настройки тексту вибрав наступні:

com і настройки тексту вибрав наступні:

Для слогану вибрав напис "тільки краще відео і фільми" і наступні настройки тексту: Для слогану вибрав напис тільки краще відео і фільми і наступні настройки тексту:   Для пунктів меню я вибрав написи Головна, Про сайт, Контакти, Пошук, Реклама на сайті, Блог я вибрав наступні настройки тексту:   І ось що у мене вийшло Для пунктів меню я вибрав написи "Головна", "Про сайт", "Контакти", "Пошук", "Реклама на сайті", "Блог" я вибрав наступні настройки тексту: І ось що у мене вийшло.

(Натисніть на Картік для перегляду оригіналу)

Для шару з назвою сайту, застосував такі настройки для стилів шару (Drop Shadow і Bevel and Emboss).

Для шару з назвою сайту, застосував такі настройки для стилів шару (Drop Shadow і Bevel and Emboss)

Що б змінити колір тексту, вибираємо інструмент Що б змінити колір тексту, вибираємо інструмент   , Клацаємо прямо по тексту з назвою сайту і виділяємо текст для якого потрібно змінити колір (я вибрав колір - add7fe) , Клацаємо прямо по тексту з назвою сайту і виділяємо текст для якого потрібно змінити колір (я вибрав колір - add7fe). 5. Після цього нам потрібно підібрати тематичну іконку. Іконку можна легко знайти на цікавому сайті Iconfinder.com , Просто заходимо на сайт, вводимо слово характеризує потрібну нам тематику (я ввів слово - Video) і натискаємо Search (Пошук). Вибираємо вподобану іконку і зберігаємо (натискаємо правою кнопкою миші по картинці і вибираємо пункт Зберегти зображення ...) її на комп'ютер. Я вибрав таку картинку: Далі відкриваємо картинку в фотошопі File → Open. Тепер потрібно перенести шар з іконкою в наш документ з шапкою. Для цього вибираємо інструмент Move Tool, вибираємо шари з іконкою, натискаємо правою кнопкою миші і вибираємо пункт Dublicate Layer (Копія шару). У віконці, що з'явилося вказуємо, який шар, в який документ копіювати: Після виконаних маніпуляцій іконка повинна додатися в документ з шапкою. Як бачимо, вона має набагато більший розмір, ніж нам потрібен, будемо її зменшувати. Для цього йдемо Edit → Free Transform (Правка → Вільна Трансформація, Ctrl + T). Навколо картинки утворилася рамочка з маркерами. Далі для рівномірного зменшення картинки, натиснемо Shift і не відпускаючи його робимо рамку менше (зменшуючи мишкою рамку) тим самим трансформуємо картинку як нам потрібно. У мене вийшло ось так:

(Натисніть на Картік для перегляду оригіналу)

Як бачите більшу частину шапки ми вже зробили, залишилося додати тематичні картинки праворуч і у нас вийти цікава шапка для сайту або блогу. 6. Покажу, на прикладі як я робив першу картинку. Як бачите на кінцевому зразку шапки (картинка на самому початку цієї новини), все картинки вставлені в рамочки. Нам потрібно створити рамку і помістити в неї картинку з нашим зображенням. Для цього створимо новий шар Shift + Ctrl + N. Вибираємо інструмент інструмент Як бачите більшу частину шапки ми вже зробили, залишилося додати тематичні картинки праворуч і у нас вийти цікава шапка для сайту або блогу Rectangular Marque Tool (Прямокутне виділення) і малюємо прямокутне виділення. Зручно робити виділення з направляющимися (якщо потрібен точний розмір), але можна і без них (на око).

Зручно робити виділення з направляющимися (якщо потрібен точний розмір), але можна і без них (на око)

Заливаємо наше виділення будь-яким кольором беремо інструмент Заливаємо наше виділення будь-яким кольором беремо інструмент   Paint Bucket Tool (Відро, G) або просто тиснемо Alt + Backspace Paint Bucket Tool (Відро, G) або просто тиснемо Alt + Backspace. Після цього клацаємо по шару два рази і потрапляємо в стилі шару. Я виставив такі настройки для Drop Shadow, Color Overlay: Тематичні картинки мультфільмів і фільмів я взяв з сайту Kinomania.ru . Після того як ми підібрали картинки, відкриваємо їх в фотошопі. Переносимо кожну картинку в документ з нашої шапкою.

([color = # ce2c2c] Увага! [/ color] Шар з картинкою після додавання в новий документ може виявитися нижче інших верств распложение в цьому документі. Порядок шарів в документі можна змінювати мишею. Для цього в палітрі Layer (Шари, F7) виберіть потрібний шар, натисніть мишею на нього, тепер не відпускаючи миша перетягніть шар вище або нижче інших верств в документі.) Якщо ви хочете що б шар виявився вище всіх шарів - виділіть шар і натисніть Shift + Ctrl +].)

(Натисніть на Картік для перегляду оригіналу)

Далі будемо робити ефект виходу картинки з кадру. Для цього ми будемо використовувати маски в фотошопі. Вибираємо шар з нашої картинкою, після цього вибираємо інструмент інструмент Далі будемо робити ефект виходу картинки з кадру Rectangular Marque Tool (Прямокутне виділення, M) і малюємо прямокутне виділення поверх зробленого фону.

Після цього в палітрі Layers (Шар, F7), натискаємо на кнопочку Після цього в палітрі Layers (Шар, F7), натискаємо на кнопочку . Далі прибираємо замочок (клікаєм по ньому мишкою) між картинкою і її маскою. Після цього вибираємо саму картинку. Виконані дії дозволять нам рухати картинку всередині маски, так само всередині картинку можна трансформувати. Рухати картинку можна клавішами - Вправо, вліво, Вгору і Вниз на клавіатурі або за допомогою інструменту Move Tool. Рухаючи і трансформуючи картинку доб'ємося потрібного нам результату:

(Натисніть на Картік для перегляду оригіналу)

Тепер нам залишилося тільки додати ковбоєві обрізану капелюх. Для цього йдемо в палітру з шарами (тиснемо F7), виділяємо наш шар з картинкою і вибираємо піктограму з маскою шару.

Для цього йдемо в палітру з шарами (тиснемо F7), виділяємо наш шар з картинкою і вибираємо піктограму з маскою шару

Далі встановлюємо в фотошопі колір переднього / заднього плану за замовчуванням (чорний / білий), для цього тиснемо D на клавіатурі, так само можна змінювати кольори місцями за допомогою клавіші X (є так само відповідні кнопочки внизу панелі з інструментами). Далі встановлюємо в фотошопі колір переднього / заднього плану за замовчуванням (чорний / білий), для цього тиснемо D на клавіатурі, так само можна змінювати кольори місцями за допомогою клавіші X (є так само відповідні кнопочки внизу панелі з інструментами) Після цього вибираємо інструмент Brush Tool (Кисть, B). Тепер малюючи пензлем коли обраний Чорний колір - як колір переднього плану, на картинки у нас буде маска стиратися, а коли у кисті стоятиме Білий колір - як колір переднього фону, картинка у нас буде з'являтися. Простіше кажучи, при активному Чорному кольорі, пензлик працює як Гумка (тобто стирає зображення), а при активному Білому кольорі пензлик працює як Восстановитель (відновлює все те, що приховано). Акуратно обробивши картинку пензлем, у нас вийшов ефект виходу з картинки (шапка виходить за межі картинки). Додамо внутрішню тінь для картинки. Додамо стиль для шару Inner Shadow (Внутрішня Тінь). ось що вийшло: Залишилося повторити всі ці дії для другої і третьої картинки. В кінцевому підсумку у мене вийшла готова шапка для сайту або блогу. (Натисніть на Картік для перегляду оригіналу)
Шапка вийшла простенька, але зі смаком.

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

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

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: