Corder’s high
web制作関連イベントcss nite、次世代のコーディングをテーマにしたイベント「LP54 Corder’s high」に参加してきました。
せっかくなので備忘録もかねて、セッションの中でも印象に残ったセッション１の内容をメモ。
コーダーの前仕事、後仕事
コーディングのワークフローの中で、コードを書くこと以外についてのお話。
つまり、
仕様確認、作業環境構築、画像の書き出し
デザイン反映チェック、エミュレーター、トラッキングコードについて
当ブログでは中でも気になった、画像の書き出しとデザイン反映チェックについてメモ。
画像書き出しtips：アセット抽出用のリネームエクステンション
画像書き出しtips：背景透過じゃなくて乗算で白ごまかされてた時用アクション
「スライス（アセット抽出）中に、背景透過のアイコンを書き出したら……背景が白い！乗算で透明にしてただけだった……！」
【PhotoShop】乗算レイヤーの白いところを透明にできるアクション
https://qiita.com/ituki_b/items/afe36d2e8552afdb93b6
このアクションを使いましょう。
画像書き出しtips：illustratorあるある「マスクしていても余白が出る問題」
クリッピングマスクがかかっている画像を書き出しパネルに置くと、画像の周りに元の画像のサイズ分の余白がついてしまう問題。
書き出したい画像を
①ライブラリに登録→②ライブラリから配置→③書き出しパネルに置く
これだけで、悩みの種の余白が消えます！
画像書き出しtips：illustratorあるある「小数点のピクセル」
illustrator入稿されたデータは、往々にして位置やサイズの値に小数点がついている。
そんな画像を書き出すと、ふちに白いふちがついてしまう……
小数点は丸めましょう。
デザインチェックtips：ピクセルパーフェクトにもざっくりちぇっくにも
①ブラウザーの表示の上に、画像を透かして表示する拡張機能
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja
②chromeの開発者ツール付属のスクリーンショット機能。
支給されたデザインカンプの幅でスクリーンショットをとってから、フォトショなどでカンプに乗せれば、ざっくりちぇっくも簡単。
https://blanche-toile.com/tools/chrome-capture-full-page-screenshot
デザインとの重ね合わせは、ピクセルパーフェクト案件用と思いがちですが、コンテンツの長さが著しく違えば、コンテンツの抜け漏れやコピーしすぎ問題を一発発見しやすいのでおすすめ。
コメント