カテゴリー別アーカイブ: 未分類

CSSのmix-blend-modeを用いた表現

概要

ちょっとCSSのmix-blend-modeを用いた表現をいろいろ考えてみる。
mix-blend-modeを使用するとPhotoshopで言うところの描画モードのような表現を行うことができる。
これは夢が広がる。。。

試し

ローディングとかで使えそうな表現

See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.


ちょっと色がどきついけどRGBそれぞれの円を用意して少し中心座標をずらして回転させることで様々な重なり方をして色の変化が起きる。

写真などに重ねてアニメーションさせる

See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.


アニメーションさせることによっておもしろい表現ができそう。

mobile safari で web font を用いたときに文字の間隔が空いてしまうときの対処方法

経緯

任意の欧文フォントを使用したくて @font-face を用いてオリジナルの font-family で使用するようにしていたのだが、なぜだが欧文フォントの間隔が mobile safari でみると空いてしまう問題がおきた。

原因

どうやら mobile safari のレンダリングのバグなのか、 web font に対して font-weight: bold; が適用されているとそういった表示になってしまうらしい。
任意の欧文フォントを使用する style に関しては font-weight: normal; を適用することで無事解決した。

PhotoshopのJSXでレイヤーを任意の順番に並び替える

たまにPhotoshopの自動処理を書いていると必要になってくるのでメモ書き。

使用方法

引数には並び替えたい順番でレイヤー名が格納されている配列を渡してあげると動作します。
例)[‘レイヤー名1′,’レイヤー名2′,’レイヤー名3’]
例の配列を渡してあげるとレイヤー名1が最前面に、レイヤー名3が再背面に来る感じです。
処理の動きとしては、もらった配列の後ろのレイヤーからどんどん最前面に押し上げていってソートを実現している感じ。

ソース

PhotoshopのJSXで特定のレイヤーを天地左右中央揃えに

特にJSでやる必要もないんだけど、メモ書き程度に。

使用方法

引数には移動させたいレイヤーのレイヤー名を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

PhotoshopのJSXで指定したレイヤーの複製を作成する関数

任意のレイヤーを指定した名前で複製する関数を作成してみました。

使用方法

第一引数には複製したいレイヤーの名前を文字列で渡し、第二引数には複製したレイヤーの名前を文字列で渡します。

ソース

PhotoshopのScripting Listenerで取得したJavaScriptのメソッドまとめ

Photoshopの自動処理をJavaScriptで書いていると、なかなか任意のメソッドを見つけられない時があります。
PhotoshopのScripting Listenerを使用すれば自分で行ったアクションをすべてJS形式で吐き出してくれるので、必要なコード部分だけを取り出し関数化しておけば希望の処理を行うことができます。
自分でよく使っていた関数をメモしておきます。

レイヤーを最前面に

レイヤーマスクをかける

レイヤーのピクセル描画範囲から選択範囲を取得

レイヤーを一階層下へ

レイヤーをスマートオブジェクト化