スマホアプリ、スマホWEB制作アプリSketchのテクニック

Sketchのテクニック

● シンボルを作成していろんなページで同じパーツを使い回す

シンボルにしたいオブジェクトを選択した状態で「Layer」→「Create Symbol」を選択してシンボルを作成。 後はそのシンボルをコピーペーストでいろんなページに配置すれば、シンボル修正時にすべてのページで反映されます

● Sketchのプラグインを検索して自動でインストールする

こちらのアプリ sketchtoolbox をインストールすると簡単にプラグインを追加することができます。
http://sketchtoolbox.com/

こちらのアプリ Sketchpacks for macOS も簡単にプラグインを追加することができます。
Sketchpacks for macOS https://sketchpacks.com/

● Sketchのプラグインを手動sketchplugin手動でインストールする

Finderのメニューから「移動」「フォルダ移動」を選択し

~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

移動する。 ここにダウンロードしたプラグインファイルを置く

● スケッチおすすめプラグイン一覧

・Autolayout	(レスポンシブでiPhone、Macのwebページを作成時に自動で複数画面を生成)
・Clipboard Fill(クリップボードにコピーした画像をペーストするだけでクリッピングマスク状態でペーストできる)
・Sketch Palettes(良い感じのカラーセットを自動で生成してくれる)
・Craft(適当な画像を生成して貼り付けてくれる)
・Sketch Measure	(オブジェクトの情報を簡単に調べる)
・Sketch Page Switch	(ページ切り替えショートカットで行えるようにする)
・Sketch Style Inventory	(スタイルを楽に扱えるようにする)
・Sketch Distributor	(便利な整列プラグイン)
・Duplicator	(連続して複製する)
・AEIconizer	(いろんなサイズのアイコンを作成する)
・Content Generator for Sketch	(画像やテキストの適当なデータを入れてくれる)
・Rename It	(レイヤー名一括変更)
・Sort Lauyers	(レイヤーをソートする)
・CSSketch	(cssを編集する)

● 他のレイヤーからスタイルを取ってくる

レイヤーのスタイルをコピー + Option + C

レイヤーのスタイルをペースト + Option + V

● レイヤーの順序を移動

レイヤーを上位に移動 + Option +

レイヤーを下位に移動 + Option +

● カラーピッカーを表示

Ctrl + C

No.1157
06/29 15:58

edit

MacのWEB制作(コーディング・プログラミング)用エディター・統合開発環境(IDE)

MacWEB制作(コーディング・プログラミング)用エディター・統合開発環境(IDE)を紹介します(おすすめ順)

● sublime text (シェアウェア・無料試用可能)

https://www.sublimetext.com/

とにかく高速。色々パッケージを追加しても遅くなりません。
各種パッケージも豊富に揃っています。

● Atom (フリーソフト)

https://atom.io/

とにかくフリーソフトで良いエディターをお探しならこれをお勧めします。
動作はかなりもったりしていますがプログラミングに必要なパッケージはほとんど揃っています。
一番最初に使うエディターとしておすすめです

● PhpStorm (シェアウェア・無料試用期間あり)

https://www.jetbrains.com/phpstorm/

php 専用の統合開発環境。 ( 【IntelliJ IDEA】のPHP版 )
色々なエディタや開発環境を試して最終的に行き着くのがこれなのかなという気がします
ある程度他のエディターのくせや良さがわかった上で使うことをおすすめします。

● vim (フリーソフト)

mac の場合ターミナルから vim と入力して起動します

ネットワーク管理者、サーバー管理者の標準エディター。 元々は unix のコマンドラインから使用できる vi エディターが拡張されたものが vim エディターです。 mac os x も unix 系 os なので標準でインストールされています。 拡張もかなり豊富で自分好みにカスタマイズしたい方にはお勧めのエディターです。

● visual studio code (フリーソフト)

https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

こちらもフリーソフト。
バージョンが上がるごとにだんだん良くなっています。

No.1112
04/02 14:01

edit