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





そのため、その後PhotoshopからSketch 3プログラムに切り替えることを目標に、Sketch 3プログラムの研究を続けています。 最初の部分はここで読むことができます





ボヘミアンコーディングの開発者に誇りを抱く主な理由の1つは、ピクセルを操作するためのすべてのツールを完全にシャープにすることです。 最適なピクセルフィッティングアルゴリズムが実装されるグラフィックエディターをゼロから作成するというアイデアを思い付くまで、プログラムの作成者自身はPhotoshopとIllustratorに苦しんでいました。



Sketchでグラフィックを作成すると、自動的にピクセルグリッドにスナップされるため、端数の値を取得することはありません。つまり、ぼやけたエッジ、ふわふわした線、その他の不条理を意味します。 すべてのエッジが完全に均等に形成され、丸みが最適な方法で滑らかになります。



しかし、Sketchの最も印象的な機能は、オブジェクトを一挙に修正する機能です。これは、何らかの理由で、エッジに沿って隆起とぼかしを形成しました。



イラストレーターで作成された単純なグリフのセットの例を見てみましょう。 それらがSketchに転送されたとき、それらはすべていくらかぼやけていることが判明しました。







次に、「レイヤー」>「最も近いピクセルエッジに丸める」コマンドを適用します。 出来上がり! すべてのアイコンは、通常の線の太さから逸脱しないように配置されます。







この驚くほどシンプルだが効果的な機能は、ランタイムを大幅に短縮できます。 個人的には、クライアントのアイコンとロゴのクリーニングとトリミングに多くの時間を費やしたことを覚えています。 さらに、ピクセルグリッドに合わせるには、各オブジェクトを手動で処理する必要がありました。 Sketchでは、これは数秒の問題です。 印象的。



ただし、注意してください。 時々、この関数は最良の方法で機能せず、いくつかのベジェスプラインを修正し、アーティファクトが表示される場合があります。 開発者がアルゴリズムを完成させ、ピクセル化の保証が完全に予測可能になることを期待する価値があります。



もちろん、Sketchは丸みのある長方形を作成する機能を完全に実装しています。 長方形で何をするにしても、個々の長方形と一度に選択されたすべての角、および特に選択された角度の両方の角の丸みを変更する機会が常にあります。







ところで、オブジェクトをダブルクリックするか、Enterキーを押すと、そのコンポーネントの編集モードに入ります。 そして、ベジェスプラインの結節を選択してすすり、結節点を4つのタイプのいずれかに変換し、その他の便利な操作を行うことができます。



このモードでは、個々のポイントを選択したり、それらが相互作用する方法を示したりできます。 Bohemian Codingは、整数値が基準として使用されるため、ピクセル分割はあまり望ましくないと判断しました。 ただし、より細かい調整が必要な場合があります。 そしてこの場合、0.5ピクセルの値を持つオブジェクトのノードを修正する機能が追加されました。







このモードでは、1つまたは複数のノードを選択し、マウスを使用して静かにスライドさせて、半透明の目的の境界線を形成できます。 場合によっては、これは非常に便利です。



編集モードでは、マウスオーバーすると、曲線のノードとセグメントが強調表示されます。



カーブに新しいノードを簡単に追加できます。 青い線で強調表示されている面の1つにカーソルを移動するだけで十分です。 クリックすると、新しいアンカーポイントが作成されます。 作成されたポイントをダブルクリックすると、コーナー(ストレート)と対称ガイドのあるスムーズなポイント(ミラー)の間で切り替わります。 Cmdキーを押したまま、曲線のいずれかのセグメントにカーソルを合わせると、曲線のこのセクションに存在する可能性のあるポイントが表示されます。既存のノードポイントから等距離にあり、後続のクリックで作成できます。 非常に便利な機能:







任意のポイントを選択して、BackspaceキーまたはDeleteキーを押すと削除できます。



残念ですが、プログラムの開発者は、ベジエ曲線を作成するときに2つの重要な機能を隠すことで、それを少し上書きしました。 「編集の終了」ボタン(EscまたはEnterを押すと置き換えられます)と「パスを閉じる」(alas、デフォルトでは何も置き換えられません)の両方のボタンは、インスペクターパネルの上部にほとんど表示されません。







鉛筆ツールまたはベクターツールを使用している場合、[パスを閉じる]ボタンまたはEscキーをクリックしなければ、曲線の描画を停止できません。 その後、オブジェクトの任意のポイントを選択し(単純なクリックまたは目的のポイントの周囲のフレームによって)、それらを使用して変換を行うことができます。たとえば、選択したポイントのタイプを変更します。







閉じた曲線で「パスを開く」ボタンを押すと、曲線を停止して必要なポイントの選択に移動することなく、曲線を描くためのツールが再び表示されます。 また、Illustratorのようにカーソルを単に終点に移動するだけでは、ベクターシェイプを閉じることはできません。 ロジックは完全に明確ではありませんが、慣れることができます。



キーボードショートカットCmd-Alt-Pを機能[レイヤー]> [パス]> [パスを閉じる]に割り当てました。ベジェ曲線を作成するプロセスで、エンドノードを簡単に閉じることができます。







一般に、Sketchで曲線を作成および編集することは、特にPhotoshop内でイラストレーター機能を導入するというやっかいな試みの後、喜びです。



ところで、Sketchの1つのルールを覚えておく必要があります: どこか間違っているか、何か間違っている場合は、常にEscキーを押してください-Sketchのほぼすべての場所で、これによりモードの包含がキャンセルされるため、間違えにくいです。



スケッチには、任意のセクションのストローク幅を変更する機能があります。 ストロークのあるオブジェクトを選択し、レイヤー>パス>ストローク幅を有効にする必要があります。 パス上のペアのコントロールポイントを追加または削除して、ストロークを狭めたり広げたりすることができます。







[レイヤー]> [パス]> [ストロークのベクトル化]機能を使用して、ストロークを塗りつぶしに簡単に変更できます。 この機能にCmd-Alt-Rキーボードショートカットを割り当てました。







「タイプ」>「テキストをアウトラインに変換」コマンド(Shift-Cmd-O)を使用して、テキストを編集可能な曲線に変換することもできます。







ほとんどの場合、変換は成功しますが、不要なアーティファクトが表示される場合があります。



曲線に変換する場合、Sketchは、変換されたテキストの各文字が個別のレイヤーであるグループを作成します。 したがって、各文字のみを個別に編集できます。 すべての文字を一度に選択し、異なる文字のすべてのアンカーポイントを同時に編集しても機能しません。



実際、Sketchにはブール演算に関するやや独特であまり馴染みのない作業があります。 ボヘミアンコーディングの開発者は、ベクトル形式のブール演算は非破壊的であると判断しました。 つまり、いつでもフォームの相互作用のタイプを変更したり、コンポーネントを編集したりできます。



この場合、ブール演算の結果は、元のフォームをそのままの形式で含むグループです。 このグループは、小さなアイコンでレイヤーパネルに表示されます。これは、元のシェイプを結合して得られたアウトラインです。 灰色のアイコンが右側に表示され、上にあるフォームが下にあるジョイントと相互作用するタイプを示します。 このアイコンをクリックすると、他の種類のブール演算を選択できるポップアップが表示されます。







ただし、開発者は複数のフォームを1つに結合する可能性を提供しました。 (レイヤー)>(パス)>(フラット化)コマンドを使用して(またはツールバーの対応するボタンをクリックして)、元のフォームのセクションをマージして、互いに補完(ユニオン)するか、互いに減算(減算)するか、交差(交差)します。 この場合、結果は1つの新しいオブジェクトのみになります。 交差または穴の領域が発生した場合、そのような領域は個別のレイヤーとして表示されます。 したがって、ブール演算の差分の場合、常に少なくとも2つのオブジェクトがグループに配置されます。 複数のフォーム間のより複雑なタイプのアーティキュレーションにFlattenを適用しようとすると、予想外のオプションがはるかに多くなります。 少し珍しいですが、次のことに慣れることができます:







ところで、ブール演算のタイプを変更したり、フォーム自体に触れたりすることなく、穴の表示を非表示にできます。 これを行うには、右側のインスペクターパネルで、[塗りつぶし]セクションの小さな歯車アイコンをクリックし、ポップアップリストから偶数/奇数モードの代わりに非ゼロモードを選択します。 ただし、この方法は常に機能するとは限りません。 たとえば、文字Aを曲線文字に変換すると、穴は覆われずに残り、長方形の内側の円形の穴は消えました(ただし、円形の形状自体はグループに残っています)。







Flattenが使用されていない場合、ブール演算を使用して結合されたオブジェクトは、Layer> Paths> Splitコマンドを使用して切断できます。







さらに、「レイヤー」>「パス」>「結合」コマンドを使用して、閉じていないフォームを結合できます。 これらのオブジェクトを2つ以上選択し、結合を適用すると、ソースフォームの最も近い端が1つのノードポイントに接続される1つのオブジェクトが形成されます。







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



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












All Articles