Як зробити шапку для блогу: покрокова інструкція

1. Вставка шапки блогу Blogspot
2. Створення шапки блогу в Photoshop
3. Шари в Фотошопі
4. Скругляются кути шапки

Завдяки цьому посту і наступного посту ( Робимо шапку блога на blogger в photoshop: частина 2 ) Навіть людина, яка в очі не бачив Photoshop, зможе зробити шапку свого блогу на Blogspot самостійно. Якщо ваш проект на іншій платформі, наприклад, WordPress, не читайте спочатку - відразу переходите до цього кроку . Особисто я на навчання витратила півдня, але, слідуючи моїм рекомендаціям, ви зможете впоратися за набагато менший термін.

Для початку визначимося, навіщо потрібна унікальна шапка. Блог, для кращої впізнаваності, повинен відрізнятися чимось від інших. Якщо у вас блог на безкоштовній платформі Blogger, то зробити свій, індивідуальний дизайн блогу досить проблематично, якщо ви не володієте спеціальними знаннями. А ось шапку блога можна зробити унікальною. Зараз я розповім, зокрема, про те, як створити унікальну шапку сайту для блогу на Blogspot в Photoshop або будь-якою іншою блозі і сайті, яка зробить його відмінним від інших (як відомо, на блогспоте це проблематично). Для початку подивимося, як саме вставляється шапка блогу в Blogspot.

зміст посту

Вставка шапки блогу Blogspot

1. В адмінці блогу в меню праворуч натискаємо Дизайн. Знаходимо гаджет, в якому зазвичай знаходиться назва блогу. У мене це виглядає так (гаджет виділено синьою рамкою):

1. Кількома "Змінити" - і в меню, що з'явилося пишемо назву вашого блогу на Blogspot. Поле "Опис блогу" можна залишити порожнім або написати щось - все залежить від вашої задумки.
2. Завантажуємо картинку, що відповідає розміру блоку, в якому буде поміщена шапка. В іншому випадку зображення буде або обрізане, або спотворено. Якщо не хочете всякої подоби, то залиште це поле також порожнім. Особисто я дізнавалася розмір наступним чином.
3. Вибираємо «Місце розміщення» «Після назви та опису». Так заголовок блогу на Blogspot буде лежати на нашій картинці. Потім дізнаємося ширину майбутньої картинки для шапки, щоб вона з'явилася в блозі без спотворень і встала на всю ширину.
4. Якщо ми хочемо змінити розташування заголовка на шапці, то знову зайдемо в дизайнер шаблонів і на вкладці "Додати CSS" додамо подібний код (пограйте з кількістю пікселів, щоб вибрати найбільш зручне місце розташування заголовка). В CSS є безліч інших можливостей, наприклад, ви можете змінювати розмір, шрифт, текстові ефекти заголовка, але ми на цьому не будемо зупинятися: це тема окремої розмови. Поки спробуйте зробити так, як на картинці - і подивіться, що вийде.

Текст коду: h1 {margin-left: 270px; margin-top: 50px;}

5. Тиснемо "Застосувати до блогу". Ось що вийшло у мене:

Створення шапки блогу в Photoshop

Далі переходимо до створення унікального зображення в Photoshop, для якого нам знадобиться:

1. Фонове зображення, бажано таке, щоб на ньому назву блоґу не меркло і не зливалося.

1. Допоміжні зображення на прозорому тлі (пташки, квіточки, звірятка - що завгодно залежно від вашої тематики). Їх може бути скільки завгодно.
2. Текст (не обов'язково).

Всі ці елементи ми створимо в процесі розробки нашої шапки.

Намагайтеся підбирати малюнки так, щоб вони гармоніювали один з одним і з загальним оформленням блогу на Blogspot. Можете використовувати контраст: спокійне оформлення блогу - яскрава шапка. Головне, щоб кольори поєднувалися.
Отже, перейдемо безпосередньо до оформлення шапки блогу на Blogspot в Photoshop.

1. Відкриваємо сам Photoshop. В меню вгорі вибираємо Файл-> Відкрити. Відкриваємо наш фонове зображення.
2. Alt + Ctlr + I. Заповнюємо поля, виділені синьою рамкою на слід. малюнку. Замість сантиметрів вибрати пікселі. Задаємо ширину і висоту.

Ось наша майбутня шапка прийняла потрібні розміри.

Шари в Фотошопі

Для початку ознайомимося з поняттям шарів в Photoshop. Пам'ятайте аплікації в молодших класах, коли ви спочатку робили фон, потім вирізали фігурки, наклеювали їх і виходила картина? Такий же принцип лежить в основі створення шарів в Photoshop. Тільки тут все більш зручно: їх можна видаляти, робити напівпрозорими, перетягувати з одного місця фону на інший, накладати один на одного і міняти місцями і т.д.

У випадку з нашим фоном має бути 2 шари: нижній - прозорий, щоб, якщо ми захочемо закруглити кути шапки, після обрізки гострих кутів було видно фон блогу, а не білий фон. Навіть якщо ми будемо міняти дизайн, ці обрізані шматочки прийматимуть колір фону. Щоб було зрозуміліше, перейдемо до прикладу.

Отже, у нас є фон. Відкриємо його в окремому файлі в Фотошопі.

1. Меню вікно-> Шари. Справа внизу на панелі інструментів з'явиться вікно з одним шаром:

Зверніть увагу, що він фоновий, тобто заблокований, з ним ми нічого зробити не зможемо. Тому робимо подвійний клік по виділеному синім кольором шару і у вікні тиснемо «ОК». Тепер наш шар розблоковано, і зображення замка зникло.

Потім зажмём CTRL і кликнемо по іконці шару на панелі шарів. Наш фон повинен виділитися пунктирною лінією. Тиснемо CTRL + X, подорожуємо у створений нами файл шапки з заданими розмірами і натискаємо комбінацію CTRL + V. Якщо фон не встав по всій ширині, його можна підкоригувати, натиснувши CTRL + T.

Скругляются кути шапки

Далі, якщо потрібно, закруглити краю. Для цього перейдемо на нижній шар і зробимо його прозорим.

Виберемо інструмент "Прямокутник з округленими кутами" зліва на панелі інструментів. Намалюємо його на всю ширину нашої шапки, не заходячи за краї. Колір прямокутника виберемо будь-який, радіус заокруглення (вгорі в настройках інструменту) - на ваш розсуд, бажано без рамки. Я вибрала 20 пікселів.

Шар з прямокутником з'явився над нашим фоном.

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

Потім правою кнопкою миші кликнемо по верхньому шару і в випадаючому меню виберемо "Створити обтравочную маску". Все, біля шару з'явиться стрілочка, а кути стануть округленими. До речі, за допомогою відсічної маски таким способом можна надати фону будь-яку форму, використовуючи різні фігури фотошопа.

Можете зберегти результат, вибравши "зберегти як ..." в форматі psd, щоб потім знову відкрити файл для редагування із збереженням всіх шарів. Для публікації зберігати потрібно через "Зберегти для веб і пристроїв" в форматі png-24, щоб збереглася прозорість наших країв. Після збереження можна подивитися проміжний результат, завантаживши картинку в Blogger.

Ось як виглядає моя заготівля в блозі:

Пам'ятайте, що завжди можливо змінити колір заголовка (в блоггеге це робиться в дизайнера шаблону - додатково - назва блогу) і його розташування (див. Вище), а також доведеться колір фону заголовка знову зробити прозорим:

У наступному уроці Робимо шапку блога на blogger в photoshop: частина 2 ми навчимося вирізати різні зображення і накладати їх на фон.