Як створити новий документ у фотошопі та перенести на нього картинки
Привіт шановний відвідувач!
Сьогодні розглянемо досить прості, але в той же час дуже необхідні дії, що часто виконуються при створенні дизайн-макета, це як створити новий документ у фотошопі і перенести на нього картинки з раніше отриманих заготовок.
Зміст
- Створюємо новий документ композиції шапки дизайн-макету сайту
- Переносимо картинки заготовок
Створюємо новий документ композиції шапки дизайн-макету сайту
Раніше, перед тим як робити заготовки для шапки, говорилося, що для відображення теми сайту, виникла ідея показати автомобіль, захищеною якоюсь захисною "аурою", а поряд з ним злодія невдахи з піднятими руками і прожектора, що потрапив у промінь світла.
На мою думку, така композиція певною мірою відображатиме суть протиугінного маркування скла, а саме: захист автомобіля через малу зацікавленість злодіїв до його викрадення та спрощення пошуку автомобіля та упіймання злодіїв у разі скоєння крадіжки.
У попередній статті ми зробили розмітку макета, де шапці відведено місце у розмірі 1200*210 пікселів (px), з яких 50px передбачалося для меню. Також, ми отримали заготовки для шапки сайту - це зображення автомобіля та злодія, який намагається його викрасти. Використовуючи це, спробуємо створити картинку, яка відображатиме тему нашого сайту.
На початку створимо окремий для шапки документ. Для цього через меню "файл/створити" відкриваємо вікно "новий", вводимо отримані при розмітці розміри полотна (ширина 1200px, висота 160px), як показано нижче і натискаємо "ОК".
Переносимо картинки заготовок
Далі, перенесемо елементи зображення наших заготовок на створене полотно шапки. Перенесенняелементів розглянемо докладніше, оскільки ця операція зустрічається досить часто для формування зображень. І зробимо це на прикладі картинки автомобіля.
Насамперед, для можливості роботи з прозорими та напівпрозорими ділянками зображень, переведемо формат "jpg", в якому ми отримали картинки заготовок, в растровий графічний формат "png".
Це можна зробити досить простим способом: у головному меню лівою кнопкою натиснути "Файл" і в спливаючому меню вибрати "Експортувати", а потім "Швидкий експорт в "PNG", як показано на рис.
Після цього ми повинні закрити картинку у форматі "jpg" і знову відкрити її вже у форматі "png".
Перед тим як переносити елементи зображень, ми повинні відокремити їх від фону заднього плану. У фотошопі є кілька інструментів, що дозволяють вирізати елементи, такі як "Швидке виділення", "Чарівне паличка", "Ласо" та ін. У GIMP є аналогічні інструменти.
Так як у наших заготовках присутній однорідний білий фон, контрастний із зображеннями самих фігур, то в нашому випадку досить зручно використовувати інструмент "Чарівна паличка".
Знайти цей інструмент можна на панелі інструментів у додатковому меню, натиснувши праву кнопку, або затиснувши та затримавши на кілька секунд ліву, як показано на рис.3.
Відкриємо першу заготівлю - картинку автомобіля та виберемо інструмент "Чарівна паличка".
Для того щоб виділити елемент, треба при включеному інструменті "Чарівна паличка", навести покажчик на фон і натиснути ліву кнопку миші. Після цього елемент повинен виділитись пунктирною лінією. При цьому допуск в панелі параметрів краще встановити в межах 30, а також увімкнути "Згладжування" та "Суміжні пікселі", як це показано нарис.4.
Далі, перенесемо виділений фон заднього плану на інший новостворений шар. Для цього, при вибраному інструменті "Чарівна паличка", потрібно навести курсор на зображення і натиснути на праву кнопку миші. Після чого, в меню, вибрати "Вирізати на новий шар".
У результаті, після виконаних операцій, ми отримали елемент автомобіля, відокремлений від заднього плану, який перемістився на новостворений шар (у нашому випадку це "Шар 1"). Це можна побачити, якщо відключити "Шар 1", як показано на рис.6.
Але, якщо уважно подивитися на зображення автомобіля, можна побачити, що на ньому залишився ще фрагмент не віддаленого фону в області спойлера. Видалимо фрагмент фону, що залишився, разом зі спойлером. На мою думку, спойлер тут буде зайвий.
Для зручності виділення необхідної області збільшимо масштаб зображення і скористаємося інструментом "Магнітне ласо".
Цей інструмент можна знайти на панелі інструментів у додатковому меню, натиснувши праву кнопку, або затиснувши та затримавши на кілька секунд ліву, як показано на наступному малюнку.
Виділяти елементи інструментом "Магнітне ласо" можна в такий спосіб. У початковій точці, клацнувши лівою кнопкою слід рухатися по контуру області, що виділяється, періодично натисканням кнопки фіксувати зупинки в найбільш крутих згинах контуру. При цьому, можна помітити, як лінія виділення по ходу руху буде "примагнічувати" до контуру. У місцях перетину виділеної області з раніше виділеним тлом, точного обведення контуру не потрібно.
Після замикання виділеного фрагмента потрібно двічі клацнути лівою кнопкою миші, після чого, що виділяється лінія повинна відобразитися пунктирною лінією, що означає,Фрагмент готовий до обробки.
Для перенесення виділеного фрагмента на новостворений шар потрібно, як і в попередньому випадку, навести курсор на зображення і натиснути на праву кнопку миші. Після чого, в меню, вибрати "Вирізати на новий шар".
Зрештою, після всіх проведених операцій ми отримаємо елемент автомобіля, повністю відокремлений від фону заднього плану. Це можна побачити, якщо вимкнути "Шар 1" та "Шар 2".
Отриману картинку краще зберегти для подальшого використання, видаливши при цьому непотрібні шари фрагментів фону. Це можна зробити натисканням на виділені шари правої кнопки миші і вибравши лівою кнопкою в меню "Видалити шари", як показано на рис.10. Після цього стандартним чином, через меню "файл/зберегти як" можна зберегти файл у потрібному місці.
Далі, перенесемо отриманий елемент автомобіля на полотно шапки.
Для цього, на початку зменшимо розмір зображення автомобіля пропорційно розміру шапки. Зменшимо ширину його, скажімо, до 200 пікселів, як показано на рис.11.
Потім, за допомогою зміни масштабу, зробимо розмір вікна зручним для подальшої роботи і перемістимо отримане зображення в нове вікно. Для цього, клікнувши правою кнопкою мишки по іконці відкритого вікна, в меню виберемо "Перемістити в нове вікно".
Перед тим як перемістити зображення автомобіля на полотно шапки виберемо інструмент "Переміщення". Цей інструмент можна знайти на панелі інструментів у додатковому меню, натиснувши праву кнопку, або затиснувши та затримавши на кілька секунд ліву.
Наразі все готове для перенесення. Для цього наведемо курсор на зображення, натиснемо ліву кнопку мишки і не відпускаючи її перетягнемо автомобіль на полотношапки.
На цьому операцію з розміщення зображення автомобіля у шапку ми завершили. На перший погляд здається, що це трудомістке заняття, яке включає безліч різних операцій. Але це зовсім не так.
Уявна трудомісткість викликана тим, що тут, з метою кращого розуміння, показано все до найдрібніших подробиць, навіть не великі дії. Насправді якщо не розписувати кожен крок, то часу на це піде не більше хвилини.
Наступним кроком буде перенесення на полотно шапки фігури злодія із піднятими руками з другої нашої заготовки. Робиться це в такому самому порядку, що і в попередньому випадку, тільки ширину зображення при переносі, можна ще зменшити, приблизно до 70 пікселів. Тому робити докладний опис цієї операції, на мій погляд, необхідності немає.
Кінцевий результат перенесення фігури злодія показано на рис.15.
Перенесені фігури надалі можна переміщати у будь-якому напрямку, використовуючи інструмент "Переміщення". Його можна знайти у верхній частині панелі інструментів, як показано нижче.
Також, ми можемо змінювати розмір виділених фігур, у режимі "Вільне трансформування", який можна вибрати через меню "Редагування", або скористатися гарячими клавішами "Ctrl+T". А якщо, при цьому, навести курсор на виділений шар і натиснути праву кнопку мишки, то у вікні можна вибрати й інші операції зі зміни виділеного зображення.
На цьому розміщення зображень наших заготовок у шапці сайту ми закінчили і переходимо до створення композиції.
У рамках цієї статті планувалося також показати і цю частину, але вийшло так, що опис перенесення зображень зайняло занадто великий обсяг, особливо в частині графічної інформації.Напевно, надто докладно це тут зображено. Але, може, це і на краще.
Тому частину, в якій буде розглянуто створення композиції шапки сайту, перенесемо в наступну статтю.