スケッチに切り替えます。 パート1

1年前にSketchについて学びました。 デモをダウンロードしてから、2番目のバージョンをダウンロードしました。 率直に言って、彼女は私をまったく感動させませんでした。 一部は単純すぎるように見えました。 私はAdobeの洗練されたソフトウェアインターフェイスに慣れており、何らかの理由でApple iWorkスタイルのパネル（Pages、Numbers、Keynote）のレイアウトが好きではありません。 さらに、現在はPhotoshop CCに含まれているダークインターフェイスを使用する方が快適であることがわかりました。 さらに、Sketch 2はかなり曲がっており、多くの迷惑なバグが含まれていて、一般的に作業のスピードには感心しませんでした。 一般的に、私はデモをいじってみましたが、安全に忘れていました。 しかし、それは無駄であることが判明しました...







しかし、時間の経過とともに、私はプログラムについてますますお世辞になったレビューに会い始めました（たとえば、 こことここ ）。 特に、それらの多くは、ボヘミアンコーディングが製品の第3バージョンをリリースした 2014年の春に登場し始めました。 クリエイターは、デザイナー自身であるため、デザイナーのニーズに最大限に合わせた製品の製造に焦点を合わせていることを保証しました。 まず第一に-インターフェイスとサイトのデザイナー。 まあ、それは私のようなものです。



新しいバージョンのデモを再度ダウンロードしました。 私は何かが好きで、何かは好きではありません。 繰り返しになりますが、このプログラムが自分に合っているという印象はありませんでした。 彼はいつものフォトショップに戻りました。



そのため、非常に複雑で非常に興味深いプロジェクトを行う必要がありました。このプロジェクトでは、Retina解像度のiPadのインターフェイス要素を描画する必要がありました。 多くのツールバー、パネル、ポップアップがありました。 これはすべて、iOS7（半透明の曇らされたガラス）のように不透明な半透明の効果で行われることが決定されました。 Photoshopでこれを行うのは簡単ではありません。特に、移動中に下のレイヤーをぼかし続ける動的オブジェクトが必要な場合はそうです。 ただし、このような方法は利用可能です。 しかし、多くの欠点があります。 最初に、バックグラウンド構造が変更された場合、常に新しいスマートオブジェクトを作成する必要があります。 次に、各パネルで、ぼかしのあるスマートオブジェクトのコピーを選択して、必要なマスクを作成する必要があります。 一般的に、このため、レイアウトは非常に急速に膨張しました。



RAMにほとんど収まらないことがわかったら、すべてのプロセスの速度が低下し、ハードドライブで約700メガバイトかかります。 レイアウトを論理コンポーネントに分割し、いくつかの小さな部分に分割しようとしました。 それでも、各PSDは少なくとも100〜200メガバイトを占めていました。 さらに、いくつかのレイヤーを別のレイヤーに転送するために、これらのレイアウトを2つまたは3つ同時に開く必要がある場合がありました。 同時に、Photoshopは非常に遅くなりました。 私の老人はすでに5歳で、ボードにはデュアルコアCore2Duoと256 MBのビデオメモリを備えたシンプルなビデオカードしかありません。 購入時に、彼は割り当てられたタスクに多かれ少なかれ対処しましたが、結局のところ、PhotoshopはバージョンCS5であり、現在のCCほど貪欲ではありませんでした。 残念ながら、アドビはあらゆる種類の機能を備えた製品を毎年拡大していますが、10ケース中9ケースは役に立たず、肥大化したパッケージのパフォーマンスを低下させるだけです。



一般的に、トラブルと頭痛。



そして、私はスケッチについて思い出しました。 レイヤーには背景ぼかしプロパティがあることを学びました。これにより、トリックを使用せずに、半透明のパネルで目的のつや消しガラス効果を簡単に実現できます。



現在のバージョン3.0.3をダウンロードしました（ちなみに、開発者の保証と多数のユーザーレビューによれば、最終的にほとんどのバグと誤解が失われました）。 そして彼は試し始めました。 なぜなら、私はAdobe製品に15年間忠実であったにもかかわらず、Photoshopからより適切なものに切り替えることを決めたからです。



Photoshop CCでは、パネルレイアウトオプションは次のようになります（クリック可能）。







これは、起動したSketchのウィンドウがどのように見えるかで、上部のツールバーを私のニーズに合わせて少し微調整しています。







さて、今は仕事でプログラムを試してみる時です。



そもそも、EPS形式で持っていたベースをレイアウトに埋め込むことにしました。 これは、単純な漫画のキャラクターのベクトル図です。



Photoshopでは、EPSをスマートオブジェクトとして開くことができます。これは、Photoshopでレイヤーの名前をダブルクリックすることでのみAdobe Illustratorで編集できます。 このオプションは私にはまったく不適切でした。特定の瞬間に、イラストからオブジェクトを非表示にし、別の場所に移動し、回転させて半透明にする必要があったからです。 そのため、イラストレーターで必要なオブジェクトを個別に選択し、必要なコンポーネントの20レイヤーの適切なセットが得られるまで、コピー/貼り付けを介してスマートオブジェクトとしてPhotoshopに転送する必要がありました。 一方で、それは非常に退屈な作業であることが判明し、一方で、元のEPSの重さはわずか7メガバイトでしたが、PSDベースのフレームワークのレイアウトは40メガバイトになりました。 これが、PhotoshopとIllustratorの1つのパッケージからの「驚くべき」製品群です。 これまでのところ、AdobeがこれらのプログラムによるPSDおよびAI形式の適切かつ相互理解を行っていないことは奇妙です。



合理的な質問が発生する場合がありますが、なぜイラストレーターで完全に作業していないのですか？ まあ、どういうわけかそれは私とうまくいかなかった。 私が彼について好きではない何か、私はそれに慣れることができない。 さらに、彼はPhotoshopと同じくらい肥大化したモンスターであり、そのパフォーマンスに決して満足していません。 さらに、すりガラス効果を簡単な方法にすることは完全に不可能です。 つまり、Adobe Illustratorは一種の中間ツールとしてのみ必要であり、個人的にはデザインのメイン環境としては適していません。



そして、私はIllustratorを積み替えのベースとして使用しました。 事実、SketchはEPS形式を理解していますが、それを何らかの形で曲がってインポートし、しばしば塗りつぶしとストロークを誤解します。 しかし、Scalable Vector Graphics（SVG）形式には非常に良い友達です。 そのため、Illustratorでは、既存のEPSがSVGで上書きされ、Sketchで開かれました。 レイアウトの読み込みは数秒で完了し、すべてのオブジェクトがその特性を保持していると言わなければなりません。 さらに言います-ベクトル形式のすべてのグループ化は真実であることが判明したので、適切なオブジェクトを選択し、それを使って何かをすることはますます簡単になりました。 実際、必要なもの。 最終的に.sketch形式のファイルは、元のEPS-7.5 mbよりわずかに大きいことが判明しました。 40奇数メガバイトの.psdに対して！



同時に、両方のプログラムがディスク上とメモリ内で占めるサイズを調べ、ストップウォッチを使用して、ドキュメントの開始、オープン、書き込み、プログラムの終了の速度を測定しました。



結果は次のとおりです。







ご覧のように、Photoshopはあらゆる点で悲惨なことに失われます。 さらに、スケッチのように、イラストレーターから描画されたすべてのオブジェクトを完全に編集することはできません。



ほとんどのキーボードショートカットは両方のプログラムで同じであることが判明しましたが、Sketchで慣れなければならないものもありました。 一般に、これは問題ではありません。 しばらくして、習慣から外れてPhotoshopに戻った後でも、スケッチのショートカットを何度か試しました。 それらはすべてこのサイトで説明されています： sketchshortcuts.com



ちなみに、独自のショートカットを追加する方法についても説明します。 たとえば、Sketchにはガイドガイドを表示/非表示するためのキーボードショートカットがなかったため、Cmd-の通常の組み合わせを追加しました。







将来的には、プログラムを使用する際に、より便利な組み合わせを追加すると思います。 ただし、現在使用可能なもので十分です。



次のステップは、iOS7のスタイルですりガラス効果のある同じ半透明のウィンドウを作成する必要性でした。 上記で書いたように、Photoshopでは、スマートオブジェクトのコピーでトリックを使用する必要がありました。これには、ノイズを追加したガウスぼかし（20ピクセルのガウスぼかし）を適用しました（1％の値でノイズを追加）。



Photoshopのレイアウトは次のとおりです。 たとえば、シンプルな背景写真を撮り、曇ったポップアップウィンドウをシミュレートする白い丸い長方形を追加しました。







このPSDのサイズは5.5 MBです



組み込みの背景ぼかしとノイズ効果を使用して、Sketchで同じことを行いました。 これは何が起こったかです：







そして、この.sketchファイルのサイズは643 Kbです。 ほぼ10倍少ない！ この場合、3つのレイヤーのみです（実際、ポップアップのベースに必要なレイヤーは1つだけで、Photoshopのように3つではありません）。



言うまでもなく、バージョン3.0から15年間長い間取り組んできたPhotoshopを支持する議論は、単に見当たりません。



その後、すでにiPad Retinaの下にあるより大きな画像を撮影し、半透明のウィンドウを作成し始め、アイコンとテキストを詰め込みました。 そして、私の弱いビデオカードはそのような負荷に耐えることができなかったことがわかりました。そして、私がこのすべてのものを大量に動かそうとすると、非常に顕著なブレーキが始まります。



しかし、判明したように、これは簡単に解決できる問題です。 Sketchにはリンクスタイルのような素晴らしいものがあるからです。



透明度、ぼかし、塗りつぶし、ノイズのすべての必要な効果があるオブジェクトの1つを選択し、リンクスタイルを追加します。







次に、このスタイルを必要なすべてのオブジェクトに適用します。



また、画面上のこれらすべてのオブジェクトを何らかの方法でシャッフルする必要がある場合、対応するチェックボックスをクリックしてブラーとノイズ効果を一時的に削除できます。これらの効果は、このスタイルのすべてのオブジェクトに対して無効になります。 その後、すべてのレイヤーの移動と変換が可能な限り高速になります。 画像をエクスポートする前に、数回クリックするだけで簡単にエフェクトをオンにする必要があります。







Photoshopでこのようなポップアップを10個作成したとき、ファイルサイズは19.1 mbに増加しましたが、同様の.sketchは672 kbにまで増加しました!!!



スケッチには、オブジェクトを相互に位置合わせするためのボタンがまったくありませんが、[配置]メニューにはこのようなアイテムがあります（位置合わせと分配）。 Photoshopのツールバーでこのようなボタンを使用していたため、最初はがっかりしました。 しかし、結局のところ、それらは完全に不要です。 結局のところ、Sketchはスマートガイドを完全に実装しており、オブジェクトを移動するときに、それが別のオブジェクトの端にくっついたり、中心にあることを簡単に認識できます。







実験中に、Sketchの興味深い機能を数多く発見しました。これらの機能は、ワークフローを驚くほど改善し、高速化します。



たとえば、Photoshopでは、行揃えのタイプを変更する必要がある場合、テキストを「ジャンプ」するのは常に面倒でした。 すべてのテキストが右に移動したため、中央揃えのテキストブロックに左揃えを適用する必要がありました。 これにはおそらく何らかのロジックがありますが、この動作を予測し、レイヤーの位置を再調整する必要があるたびに、それを認めなければなりません。







Sketchにはジャンプはありません。 テキストブロックはそのまま残りますが、このブロック内の行の相互配置のみが変更されます。 些細なことですが、素晴らしい：







ところで、テキストについてもう少し。 Webサイトおよびインターフェイスの開発者は、Sketchがシステムアンチエイリアシングを使用していることを喜ばしく思います。サブピクセルレンダリングを有効または無効にすることができます。これにより、サイトまたはプログラムで表示されるものと最大限一致させることができます。 Photoshopには何がありますか？ CCバージョンでは、既存の5種類のスムージング（なし、シャープ、クリスプ、スムース、ストロング）に加えて、さらに2つ（MacおよびMac LCD）が追加されました。 ただし、ブラウザなどで使用されているアンチエイリアスは繰り返されません。 これにより、アンチエイリアシングテクニックのこの束全体がほとんど役に立たなくなります（ただし、非常にまれなケースではNoneは役に立ちません）。



Photoshop、Sketch、およびSafariブラウザでのアンチエイリアスタイプは次のとおりです。







また、Photoshopでテキストオブジェクトを作成した後、ツールバーで何か他のものを選択する必要がある場合（たとえば、オブジェクトを移動するためのツール）、テキストの編集に戻るためにテキストツールを選択し、Sketchではツールを切り替える必要はありません。 作成したテキストレイヤーを選択し、ダブルクリックして編集します。 その後、他のオブジェクトまたは空のキャンバス領域をクリックするだけです。



マウスをホバーするときにオブジェクトを青いストロークで強調表示すると非常に便利です。 また、レイヤーパレットでこのオブジェクトの名前を囲むフレームも強調表示されます。







Photoshopで作業しているときに、奇妙で予測できないサイズの外挿に遭遇することがよくありました。 たとえば、さまざまなサイズの多数の画像をレイアウトに挿入し、それらをスマートオブジェクトに変換し、これらすべてのオブジェクトの高さを所定の値に調整する必要があります。 高さ100ピクセルに比例して縮小するとしましょう。



そして、ここでしばしば苦しみが始まりました。 各オブジェクトは手動で減らす必要があったため、外挿の精度を常に監視していました。 この場合、デフォルトのサイズがパーセントで示されているトップパネルに移動する必要があり、ピクセルで正確な値を入力するために「px」を追加する必要がありました。彼はそのようなユニットを理解していないため、呪われた。 さらに、プロポーショナルズームを担当するチェーンシンボルは、運が良ければ、デフォルトで常にオフになっており、オンにすることを思い出させる必要があるたびにオフになっています。 もちろん、そのような苦痛に慣れることはできますが、それは必要ですか？



ほとんどの場合、Photoshopはスケーリングに正しく対応しましたが、高さが99ピクセルまたは101ピクセルの場合がありました。 実際には、側面の1つにほとんど目立たない半透明のストライプがそこに行きました。



Sketchでは、オブジェクトをスケーリングする場合（これはラスタオブジェクトに関して特に重要です）、インスペクタウィンドウで指定したような整数値のみを取ります。 そして、「ふわふわ」の縁はありません。



同時に、「px」のような追加の文字は必要ありません。元々Sketchはピクセルを操作するためにシャープ化されていたためです。 ただし、入力してパーセントを指定することはできますが、通常はオブジェクトを認識してスケーリングします。 さらに、300 * 2または256 + 128などの算術演算を使用できます。



Cmd-Dキーボードショートカットの多様性は非常に有用であることが判明しました。 レイヤーがコピーで移動されていない場合、このショートカットは単にレイヤーを複製します。 ただし、コピー中に（Altキーを押しながら）レイヤーが移動された場合、Cmd-D呼び出しは、元のオブジェクトに対応するオフセットでオブジェクトを複製します。 そのため、コピーを同じ距離ですばやく分散できます。



オブジェクトを配布する別の、より奇妙な方法があります-オブジェクトのグリッドを作成します。 まず、必要なオブジェクトを選択する必要があります。







次に、メニューコマンド[配置]> [グリッドの作成...]を選択する必要があります。







そして、オブジェクトは指定されたインデントで配布されます：







また、Boxedチェックボックスを有効にすると、オブジェクト自体の直線寸法ではなく、選択したオブジェクトが配置される同じサイズのボックスが考慮されます。







この場合、提案されたボックスのサイズは、オブジェクトの1つの最大サイズに対してプログラムによって自動的に計算され、オブジェクト自体はボックス内の水平および垂直方向の中央に配置されます。 これは、異なるオブジェクトを配布するのに非常に便利です。







ところで、三角形には奇妙なオプションがあります。 描画された三角形を編集して、異なる角度と辺になるようにした場合、インスペクターの[等辺]チェックボックスをクリックすると、簡単に二等辺三角形に変換できます。







もちろん、最新バージョンでも、小さな迷惑なバグがあります。 たとえば、オブジェクトを時々操作すると、画面のアーチファクトが残ります。 しかし、開発者はこの問題の修正に積極的に取り組んでいます。 ベータバージョン3.0.4では、このようなニュアンスは見られなくなりました。 明らかに、バージョンからバージョンへのプログラムはより良く、より安定するでしょう。 さらに、開発者がデザイナーの希望に耳を傾けていることは喜ばしいことです。 また、私はいくつかのアイデアを提供し、彼らは次の日、将来のバージョンのウィッシュリストに私の希望を含めて答えてくれました。



今のところすべてです。 次のパートでは、すばらしいプログラムSketchでの私のさらなる発見についてお話します。



良いフォトショップスケッチをしてください！

---

• スケッチに切り替えます。 パート2
• スケッチに切り替えます。 パート3
• スケッチに切り替えます。 パート4

---