UI/UX

AdobeXDで三角形を作成する方法。正三角形はフォトショかイラレからのコピペの方がオススメ

WEB制作

投稿日:2019-03-07 更新日:

結論から言うとAdobeXDだけで三角形(正三角形)を作成するよりも、フォトショかイラレで作成してCreativeCloudライブラリで共有した方が100倍早いです。とはいえ、AdobeXDは無料で利用できるアプリケーションとなっていますが、PhotoshopやIllustratorは体験版の利用期間が終了してしまうと有料となるためどうしてもAdobeXDだけで作成したいなんてケースも稀にあるかもしれません。

そんな時のためにAdobeXDだけで三角形を作成する方法をご紹介しておこうと思います。

少しでも作業を短略するためにショートカットキーはできるだけ把握しておきましょう。

https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html

AdobeXDで不等辺三角形を作成する場合

こちらの作成は簡単で「ペンツール」利用して適当に三点をクリックしてパスを閉じましょう。

AdobeXDで二等辺三角形を作成する場合

長方形ツールを使いシフトキーを押しながらドラッグで正方形を描画します。四角形の頂点をダブルクリックして編集モードにした上でデリートキーを押すと二等辺三角形の完成です。

頂点編集モードが入りづらいんですが角の内側をダブルクリックで選択できます。

AdobeXDで正三角形を作成する場合

この正三角形を作成する場合が、とても面倒で通常であれば前述の二等辺三角形をベースにパスを操作して終わるのですが、パス操作できるものの動作がよくわからずコマンドキーを押しながらクリックで動くもののグリッドへの吸着やスマートガイドも表示されず。

Google先生に頼った結果、ヒットしたkotar0さんのQiitaを参考にさせてもらいました。

適当に正方形を作成

先ほどと同様に適当に正方形を描きます。

楕円形ツールで左下、右下の頂点を基点に二つの円を作成

※この時にalt+シフトキーを押しながらドラッグで基点からの描画になります。

また、作成した二つの円をコマンドキーとGでグループ化しておきましょう。

円の交点に正方形を作成

グループ化した円と交差に作成した正方形を選択して交差を選択

このような見た目になると思います。

最初に作成した正方形の左上の頂点を編集して三角形へ変更

XYの数値把握用に線を引きXYの数値を記憶

※画像ではX188、Y446.5

三角形の右上の頂点をダブルクリックで選択してX188、Y446.5を入力

不要なガイドを作成して完成!

不等辺三角形であれば、特に問題はないんですが正三角形が面倒なので効率を考えてもフォトショとイラレでの作成をオススメいたします。

Adobe XD CCが3月のアップデートでさらに便利に!

ダブルレクタングルからレスポンシブへ




ダブルレクタングルからレスポンシブへ




-WEB制作
-,

SOURCE

執筆者:

関連記事

簡単にコアサーバー(CORESERVER)でサブドメインの作成、設定を行う方法

久々の備忘録。 コアサーバーにレンタルサーバーを変更した旨は以前に記事にしましたが、サブドメインの作成手順をまとめました。 以前、といってもかなり昔でまだロリポップを使っていた頃にworks.deri …

ジェットパック

Jetpack(ジェットパック)の問い合わせフォーム(フィードバック)の設定方法

最近、このブログとは別に新しいブログをWordPressで作成しているのですがそちらで問い合わせフォームを設置しようと思った時にジェットパックのフィードバック機能を利用しようと思ったら、項目が見つから …

UI/UX

Adobe XDのクラウドドキュメントが開けないトラブルが発生!その解決方法は?

今やウェブサイトの制作・作成に欠かせないツールとなりつつあるアドビのUI/UXデザインアプリケーション「AdobeXD」。 以前は「Photoshop」や「Illustrator」などでワイヤーフレー …

アニメーションの最適化

【第2回】アニメーション コンテンツの動画フォーマットの最適化