MixItUp3の基礎的な設置方法

ソートをアニメーションで楽しく動かすMixItUp3
https://www.kunkalabs.com/mixitup/

オプションが豊富で様々な面白い動きができるんですが、まず基礎的な設置方法がよくわからなかったので、基礎的な設置だけ載せておきます。

HTMLに記述

「category-a」「category-b」とかがカテゴリ名になります。
そのまんま書いてますので、リストタグにしてもいいと思いますが。

ボタンを設置

ボタン群を先ほどの記述した上に追加記述。

jsを読み込み

GitHubに圧縮ファイルがあるので、そこからDL
その中の「dist」フォルダにある「mixitup.min.js」を任意の場所に設置。

読み込ませた下に追記します。</body>の直前に。

これせ動くはずなので、装飾はご自由に。

Illustrator:スライスは画像アセットで簡単に

従来のスライスの切り方はいちいち面倒だったので、最近はほぼ画像アセットにしています。
これ知っておくととても便利・早いのでおすすめ。

画像アセット

例えば、以下のようなオブジェクトがあったとします。
矢印系のマークです。レイヤーを見るとグループ化してることがわかります。

従来の、スライスであれば「オブジェクト」→「スライス」→「作成」でしなければ、ならなかったのですが、画像アセットはその過程がいりません。

アセットの書き出しパネルを開く

「ウィンドウ」→「アセットの書き出し」パネルを開きます。

開いたら、オブジェクトをドラッグ&ドロップ。
すると、下のようになるのでそのままその中へ入れます。

入った!

入った直後は名前は「アセット」になっていますので、クリックして名前を変更しておきます。
ここでつけた名前が書き出し時の名前になります。

拡張子を選択

書き出しの拡張子を選びます。
今は「png」になっていますが、▼をクリックするとお好みの拡張子で保存できます。

サイズを選択

画像アセットでは書き出しサイズが選択できます。
「1×」の横の▼をクリックで、用意されたサイズや任意のサイズでも書き出し可能です。

私がよく使うのは「2×」。
スマホサイズで作ったデザインの場合、2倍の大きさ程度にしないと画像がボケてしまうから。

サイズを例えばに「2×」変えると、横の欄が「@2x」に変わります。
これは、「point」という名前の画像が、2倍で書き出された時に「pint@2x.拡張子」という名前になります。
「スケールを追加」をすることで、いくつものサイズの画像が1回で書き出し可能となります。

アセットの書き出しパネルを開く

「スクリーン用に書き出しダイヤログを開く」をクリックすると、詳細な設定が可能です。
この「スクリーン用に書き出しダイヤログを開く」は「ファイル」→「書き出し」→からでもダイヤログは開きます。

設定アイコンをクリックすると、各詳細な設定も可能です。
Pngの背景を透明にするか、白にするかなど。

あとはアセットの書き出しパネルから書き出せばOK!
ただし、マスクしたものに関しては、マスクで隠してる場所まで書き出されてしまうので、マスクしてるものに関しては、従来のやり方がいいかも。

Illustrator:パターンをつくる(ストライプ・斜めストライプ編)

ずいぶん前に、フリー素材で拾ってきたパターンの色変えを書きました。
こちらから行けます→ Illsutator:パターンの色変え

これで大抵できますが、パターン拾いすぎて(整理してなくて)探すの面倒な場合は
作った方が断然早い!
ということで、ご紹介。

パターンをつくる(ストライプ)

2px × 12pxの矩形を描きます。色付きのやつね。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_1

その横に、4px × 12pxのベタなし、枠なしの矩形を描き、それをコピペして、全体を12px × 12pxの矩形を並べます。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_2

それを全部選択して、スウォッチパネルに入れます。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_5

普通に、矩形を描いてその描いた矩形を選択しまたた、スウォッチパネルに先ほど入れたストライプを適用すると、ストライプパターンの出来上がり。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_6

パターンをつくる(斜めストライプ)

先ほどまでの、ストライプが適用された矩形を選択し、「オブジェクト」→「変形」→「回転」で回転パネルを開きます。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_7

回転を「45度」にして、「オプション」の「オブジェクトの変形」のチェックだけを外します。ここにチェックが入っていると、適用した図形そのものが回転してしまうので、失敗します…必ず、ここのチェックを外すこと!
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_9

これでストライプ完成!!
斜めを反対に傾けたいなら角度を「315度」に。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_10

ストライプの調整

作ったあとで、調整もできます。
スウォッチパネルにあるストライプをダブルクリックすると編集画面になります。
ここで、細さなどを調整できます。
Illustrator:パターンをつくる(ストライプ・斜めストライプ編)_11

以上、イラストレーターのストライプのパターンの作り方でした。