Всім привіт! Сьогодні я розповім як можна досить непогано працювати з PSD-макетами без Фотошопа на комп'ютері. У вільний час трохи захоплююсь версткою (навчальні цілі) і часом виникає необхідність "розпиляти" будь-якої навчальний макет на шматочки, щоб використовувати їх уже за призначенням.
Дизайнери зазвичай поставляють шаблон у форматі Adobe Photoshop (вже якийсь де-факто стандарт), і нам, верстальщикам, потрібно розпиляти його на окремі зображення (поміряти всі відстані) і т.д. для правильної верстки. Як це зробити?
Найпростіший варіант - маючи Photoshop. Але що робити, якщо під рукою його не виявилося? Виявляється, Adobe безкоштовно надають інструмент, яким можна скористатися, щоб виконати деякі операції з PSD-файлами.
Але для цього нам потрібно AdobeID:
Відкриваємо сайт за посиланням, що я дав вище, натискаємо на "Отримати Adobe ID", якщо ще не маємо. Реєстрація безкоштовна, рекомендую.
Потрапляємо в робочий кабінет. Переходимо на "Мої ресурси", тут будуть зберігається всі наші файли і, до речі, шматочки, які ми будемо вирізати. Тиснемо на посилання "відправити" з мого комп'ютера. При цьому завантажуємо макет PSD.
Я взяв типовий макет Nerds, який верстаю у вільний час (вчуся), це для прикладу. В принципі можна завантажити довільний.
Кількома на піктограму і відкривається макет. Переходимо на вкладочку Extract. Тут у нас дві зони - перша - макет, друга - властивості. Кількома на довільне зображення і бачимо випадає панельку, де можна зберегти зображення окремо, а так само побачити його розміри і зміщення. А в правій частині побачити CSS стиль елемента.
Зокрема ось шрифт. Бачимо, що використовується шрифт Roboto, даний його розмір і т.д.
Зберігаємо довільну картинку з макета, як я показував, натискаємо на зображенні, натискаємо на кнопку завантаження в з'явилася під картинкою панелі, вибираємо формат збереження. Що вибрати JPEG або PNG. Коли картинка буде збережена, вона відобразиться у вкладці "Ресурси".
Тепер знову переходимо на головну - куди ми закачували макет - там в файлах з'явиться нова папка, в яку скидаються всі збережені файли.
Кожен файл ми можемо зберегти, клікнувши на нього, відкривши і вибравши в операціях пункт "Завантажити".
Такий ось нехитрий спосіб, про який я дізнався буквально сьогодні! Може комусь стане в нагоді!