Photoshopのカンプからの時短コーディングの道1

テックアカデミーの実力判定テストに向けての独学コンテンツをして思ったのが、Photoshopの動作が重い事です。まとめるために不満点を箇条書きにしてみます。

1.パソコンのメモリが69％～98％まで行ってしまう
2.Ctrl+1キーのショートカットで100％表示するだけで1秒ほどフリーズ
3.スペースキー押しながらでカーソルを移動させるのも面倒
4.さらに1つずつ要素をクリックして確認するウインドウも武骨な感じでウンザリ
5.Ctrlキーを押して要素間の距離を測るのに手間取る(長方形ツールなども微妙)

この不満を解決してくれるのが、Zeplinでした。まず気に入ったのが動作の軽さ。文字の大きさの違うテキストブロックも、それぞれの場所にカーソルを移動させる一瞬でZeplinで参照できます。

さて前置きはこのくらいにして、僕なりに考えたPhotoshopのデザインカンプからの時短コーディングの手順に入ります。Zeplinを使う前にPhotoshopでやるべき事を箇条書きにします。

SP版とPC版のPSDファイルを、ハンバーガーメニュー開閉、スライド、アコーディオンメニューの開閉の差分が予測される数だけコピーする。(アートボードの名前はsp_acd_closeなど名前を変えて保存しましょう)
　ファイルを別にする理由は、PSD側のアートボードの名前が違うだけではZeplinの方で同じ物だと判断して上書きして時間の無駄になるだけだからです(spの名前をsp_closeに変更してもspの更新となってしまう)
なのでPSDファイルをコピーした上でアートボード名を変更しましょう。

PSDのアートボードからZeplinに向けて出力する。1つのプロジェクトに付き100枚までのアートボードが使えます。出力に時間が掛かりますが、先行投資のような気持ちでこらえましょう。

Zeplinを起動する前に、Photoshopでやった事が良い方の確認です。画像はPhotoshopで書き出した方が良いそうです(素材とPerfect Pixel用の画像)。またGoogle fonts用にdetectfonts.jsxのスクリプトで使われている全部のフォントを洗い出すのも良いと思います。WindowsだとSketchが使えないため、Zeplinでスタイルガイドが作れないようです。

準備が終わりましたら、いよいよZeplinとGoogle Chromeとvscodeの同時起動で作業開始。とりあえずこの記事に関してはここで終了です。自分への備忘録のようなものになってしまいましたが、お役に立てれば幸いです。