Малюємо у Фотошопі логотип та favicon для сайту

Підвищуємо впізнаваність блогу в інтернеті

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

Дуже хочеться одразу перейти до справи, без довгих вступів та "водички", та все ж вирішив розпочати нашу сьогоднішню розмову про важливість вміння користуватися графічним редактором Photoshop. Якщо ти і без моїх порад розумієш, що Фотошопом блогеру потрібно вміти користуватися, відтак, пропусти парочку перших заголовків.

Photoshop — наше все

Навіщо тобі потрібен Фотошоп

Photoshop — це той інструмент блогера, без якого просто не можна обійтися. Ти твердо і безповоротно вирішив(-ла) стати блогером? — Дуже добре! Але якщо ти хочеш стати успішним блогером, тобі обов'язково потрібно вміти користуватися даними графічним редактором.

Тільки Фотошоп володіє всім необхідним інструментарієм для створення та оптимізації зображень. І якщо тобі не хочеться вникати в тему створення унікальних, якісно оптимізованих картинок для свого блогу, краще відразу залиш цю затію з блогерством та займись чимось іншим. Адже блог необхідно наповнювати не лише унікальним (авторським) текстом, але й такими ж зображеннями.

Для ведення блогу (на будь-яку тему) одних текстів недостатньо, в будь-якому випадку, доведеться використовувати фотографії, малюнки та/або інфографіку. На одних скріншотах теж далеко не заїдеш. Та й скріншоти також потрібно якось облагороджувати, додаючи різні стрілочки-підказочки та інші графічні елементи, створюючи інформативні колажі, з різними ефектами. Наприклад, такі колажі присутні в даній статті трохи нижче. Всі вони були створені виключно за допомогою Photoshop.

Стокові фотографії для блогу

Чому не варто їх використовувати

Якщо ти думаєш, що картинки для свого блогу в інтернеті можна брати безкоштовно, спішу тебе розчарувати — це не так. Тобто взяти в Мережі інтернет ту чи іншу вподобану фотографію ти, звісно ж, зможеш, проте я не раджу цього робити. Причина проста до неподобства. Всі вони, по-перше, не унікальні, а по-друге, більшість з них захищені авторським правом, і не підлягають вільному використанню, поширенню. У кожної фотографії є власник, пам'ятай про це.

Стокові фотографії для блогу

Стокові фотографії не годяться для блогу без попередньої унікалізації. Наприклад, ти хочеш використовувати картинку з якогось стокового ресурсу. Гаразд. Але ця фотографія вже 100500 разів використана на просторах інтернету. І варіацій цього зображення теж дуже багато, особливо коли фотографія або картинка надто затребувана в твоїй тематиці.

Ти можеш унікалізувати те чи інше безкоштовне зображення взяте на стоці, однак, без певних навичок редагування все ж не обійтись. Ось тут й стане в нагоді Фотошоп. А щодо того, навіщо потрібні всі ці танці з бубном навколо унікалізації зображень, я детально розповім в інших розділах — крок третій та четвертий. Що ж, зі вступом закінчили, тепер переходимо до основної теми статті.

Розробка логотипу для сайту

Яким повинен бути логотип

Перш за все, логотип повинен відповідати тематиці блогу, візуально підказуючи користувачам мету та призначення веб-ресурсу. Логотип може складатися з якогось малюнку, фрагменту фотографії та/або літери, цифри, символу тощо. Головне, щоб він відображав суть проекту, був добре розрізнювальним та/або читабельним. Не потрібно в логотип включати занадто багато візуальної інформації, знижуючи тим самим його читаність та сприйняття.

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

Коли варто замовляти розробку логотипу в дизайн-студії

Якщо власна фантазія дала збій, або просто не хочеться морочитися з цим, можна замовити розробку логотипу в якійсь дизайн-студії або ж покластися на професіоналізм дизайнера фрілансера. За розробку логотипу, звісно ж, доведеться заплатити гроші, але він, скоріш за все, вартуватиме витрачених коштів.

Припустимо, з Фотошопом ти добре знайомий(-а), прототип майбутнього логотипу накидано на папері або закріплений в уяві, чудово. Саме час приступити до створення логотипу. Відкриваємо Фотошоп і починаємо малювати.

Процес створення логотипу у Photoshop

Створюємо новий документ та визначаємо його роздільну здатність

Щоб стискання зображення після оптимізації не привело до низької якості картинки, слід створити документ з високим рівнем роздільної здатності — 300 dpi, та розмірами, як мінімум, — 700 x 700 пікселів. Отже, Photoshop відкритий, створюємо новий документ. Натискаємо комбінацію клавіш «Ctrl+N», або ж кнопку «Файл» → «Створити...». З'явиться вікно, в якому прописуємо наступні параметри, див. скріншот нижче.

Створюємо новий документ та визначаємо його роздільну здатність

Натиснули «OK», і тут же на робочому столі Фотошопу з'явився новий документ у формі квадрату, чудово, рухаємось далі.

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

Як створювався логотип для цього блогу

Отже, я вирішив що «Лампочка» для тематики «Освіта» підходить якнайкраще. Тому, довго не роздумуючи, натиснув клавішу «U» (активувати даний інструмент можна також через ліве меню), клікнув правою клавішею мишки по порожньому полю редактора, тим самим викликавши меню довільних фігур. Після цього, клікнув по іконці з лампочкою, див. картинку нижче.

Меню довільних фігур Фотошопу

Малюємо фігуру

Фігура лампочки у Фотошопі

Притиснувши клавішу «Shift» (щоб зберегти правильні пропорції фігури) і ліву клавішу мишки, проводимо по новому документу, малюючи фігуру лампочки. Як результат, в квадраті з'явилася картинка, яка зображена праворуч.

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

Видаляємо зайві елементи

Симпатичну "вольфрамову нитку" прибрав за допомогою звичайного виділення фрагменту — клавіша «M», з подальшим натисканням чудотворної клавіші «Del». В принципі, зараз цього можна не робити, адже я все одно збираюся заливати лампочку кольором. Це зроблено лише для наглядності процесу.

Фігура лампочки без вольфрамової нитки

Дві темні смужки на різьбі виділив все тим же інструментом виділення, але вже в режимі «Прямокутна область», після чого, залив виділену область білим кольором.

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

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

Заливка кольором виділеної області

Фігура лампочки залита білим кольором

Отже, спершу виділив по білому контуру область заливки. Потім залив її, використовуючи поєднання клавіш «Alt+Del».

Стеж за тим, щоб потрібний колір заливки знаходився зверху в панелі перемикання кольорів переднього та заднього плану — «X». Якщо заливний колір знаходиться знизу, тоді потрібно натискати клавіші «Ctrl+Del».

Отже, після заливки лампочка набула форми. Тепер фігурі можна надавати об'єм, роблячи її більш реалістичною, бо вона для мого логотипу в такому сумному вигляді не дуже підходить.

Надаємо фігурі об'єму

У графічному редакторі Photoshop є чудова панель інструментів під назвою «Стиль шару», викликати яку можна двічі клікнувши по шару, або за допомогою відповідної іконки в нижній панелі піктограм. На скріншоті нижче, представлено параметри інструменту «Тиснення», який я використовував для надання об'єму плоскому об'єкту.

Стиль шару тиснення

В результаті роботи даного інструменту, фігура вийшла об'ємною, більш реалістичною, що, власне, й було потрібно. Дана фігура попередньо була залита синім кольором, див. скріншот нижче.

Робота інструменту Фотошоп тиснення

Завершальні штрихи обробки

Все начебто добре, проте темний об'єкт губиться на чорному фоні. Щоб зробити лампочку більш виразною, я підклав під неї круглий жовтий фон з внутрішньою тінню по контуру. Таким чином, наш об'єкт став виразним та легко розрізнювальним. По завершенню створення логотипу було прибрано чорний бекграунд, див. скріншот нижче.

Готовий логотип з лампочкою у центрі

Стиснення та збереження файлу

Ми на фінішній прямій. Залишається лише стиснути наш логотипчик і зберегти його на ПК.

Перед подальшими маніпуляціями з початковим файлом (котрий 300dpi), обов'язково збережи його на своєму ПК в форматі «PNG», а краще «PSD». Щоб згодом можна було повернутися до його редагування, коли виникне така необхідність. А вона обов'язково виникне, повір...

Після обробки файлу, йому потрібно задати ті чи інші фізичні розміри в пікселях, після чого зберегти для використання на своєму сайті. Але зберігати його потрібно з оптимізацією для WEB. Отже, спочатку задаємо розміри. Нехай це будуть такі параметри: ширина 200px, висота 200px, роздільна здатність 72 dpi, див. скріншот нижче.

Стиснення файлу інструментом розмір зображення

Після зміни фізичних розмірів і роздільної здатності файлу, переходимо до оптимізації зображення. Клікаємо по пункту меню «Файл» → «Зберегти для Web та пристроїв», див. скріншот нижче.

Меню зберегти для Web і пристроїв

Відкрилось велике вікно оптимізатора. У ньому потрібно вказати формат та інші параметри для оптимізації файлу, див. зображення нижче.

Параметри оптимізації зображення

Після кліку по кнопці «Зберегти», вибираємо папку для збереження файлу та зберігаємо. Все, логотип у нас в кишені, можна вішати на блог. Як це зробити я розповім іншим разом. Сьогодні лише створюємо логотип з фавіконкою. До речі, фавіконка, про неї зараз і поговоримо.

Створення favicon для блогу

Перетворюємо логотип в фавіконку за одну хвилину

На робочому столі Фотошопу відкрито початковий великий файл з логотипом, чудово. Зараз будемо міняти його розміри на: 16x16 або 32x32, без різниці, головне встановити роздільну здатність 72 dpi. Після зміни розміру, відразу ж переходимо до збереження цього файлу в форматі «.ico». Відкриваємо вже знайоме меню «Файл» → «Зберегти як...» або «Shift+Ctrl+S», див. колажо-скріншот нижче.

Пункт меню Фотошопу зберегти як

Далі вибираємо з випадаючого меню потрібний формат (1), та зберігаємо файл (2). Після цього, знаходимо цей файлик в папці, і спокійно перейменовуємо його з «logo.ico» на «favicon.ico» (3). Все, наша фавіконка успішно створена! А щоб ще більше прискорити процес створення favicon, можна безпосередньо на другому кроці (2) змінити ім'я файлу, і зберегти його з правильним ім'ям, тобто «favicon.ico», див. схему нижче.

Збереження файлу з ім'ям favicon.ico

Таким чином, всього за кілька хвилин роботи в редакторі Photoshop, ми створили два важливих для блогу файли — логотип та favicon. У наступній статті я розповім як їх "прикрутити" до блогу. Тобто, яким чином додати логотип в тему WordPress і встановити Favicon на сайт. Власне, там і зустрінемося. До зустрічі!

Щоб зрозуміти наскільки ти в темі, пройди тест 👇
  • 100 секунд на проходження тестуRealCase

    Тест
  • 5 питань по тематиці сайту
  • 4 варіанти відповідей на кожен
Готовий(-а) перевірити рівень своїх знань?

  •  Тест пройдено 2 рази.
  • Останнє проходження: 13.02.2020 15:34

   
  
 
 
📚Не проґав!
💬Коментарі (Ще немає... твій буде першим)  
    • Ліміт 2000 символів
    • залишилось: