javascript

選択範囲にあわせてガイドを引く.jsx

(なんだかガイドを引くjsxばっかり作ってる気がするけど)
選択範囲に沿ってガイドを引けた方が、前に作ったカンバス枠にガイド引くだけの機能よりシンプルさはあまり変わらず使い道が広がって便利だよなぁとほんのり思ったので改造した。
Ctrl + Aすればカンバス枠の選択範囲が出来るわけだし。

使い方

[ファイル] – [スクリプト] – [参照] から下からダウンロードしたjsxを選択する。
(xpの場合) C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト の中に.jsxを入れておけば[ファイル] – [スクリプト] から使用できる。

ExtendScript Toolkitからも使える。

ダウンロード

addGuide.jsx|選択範囲にあわせてガイドを引く.jsx

挙動 / どんなガイドが引かれるか

こんな感じの選択範囲だと
[image]四角形の選択範囲

こうなる
[image]ガイドが引かれた

四角じゃない選択範囲だと
[image]円形の選択範囲

続きを読む

大量のテクスチャー画像を、超簡単にパターン登録する.jsx ( バッチ処理不使用

以前作ったjsxは ( Fireworksのテクスチャー画像等をPhotoshopのパターンに一括登録したい )

  1. .jsxをアクションに登録して
  2. [ファイル] – [自動処理] – [バッチ] から登録したアクションを指定

といった手順を踏む必要があったけれど今回のはバッチ処理なしでいけるはず、多分。
WindowsXPのCS3では大丈夫だった。

どういったモノ?

パターンに画像を、ファイル名で登録するだけ。
大量に登録したい時に威力を発揮するはず。

例えばこうゆう.patではないパターン画像を超簡単に一気に登録できる。
patterns: set no.7 by ~77words on deviantART

使い方

[ファイル] – [スクリプト] – [参照] から下からダウンロードしたjsxを選択する。
(xpの場合) C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト の中に.jsxを入れておけば[ファイル] – [スクリプト] から使用できる。

ExtendScript Toolkitからも使える。

ダウンロード

続きを読む

懲りずに ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

前回までの作りは、jsを読み込む元々のhtml(とcss)に多少依存していました。

positionで段組みしてるhtmlに、コンテンツ部分が短い時はmenuがfooterが食い込んじゃう!どうしよう!
なんて、そんな事はコーディングする時にどうにかする問題で、javascriptでどうにかしなきゃならんもんではないだろうし
同じように、メニューを動くようにする為に、予めpositionを仕込んでおかなければならないなんてのも良くないかと。

今回は、元々あるレイアウト(htmlやcss)になるべく手を加えずとも動くようにしたい。を念頭にやったので、floatで組んだページも、positionで組んだページも、フッターの有無に関わらず使えるように出来たと思う。
メニューとフッターのidを合わせるか追加する必要はあるけれど。

floatレイアウト
floatレイアウトにフローティングメニューを追加のサンプル
positionレイアウト
positionレイアウトにフローティングメニューを追加のサンプル

作成したjavascript
floatingmenu-v2.0.2.js

あるぇ?
“続きを読む”以降の文章が全部なくなってる…なぜ…

続きを読む

続き / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQuery練習中

二転三転中、最初の見極めが甘いんだろうなぁ
作って試してみると、じゃあこうゆう時はどうなる?こうなったら?が出てくること出てくること。
あーしたい、こーしたいって欲も。

前回の練習以降に変更した事。

_1.footerと被った部分の処理とあえて移動させない処理。
ウインドウサイズをちょこちょこ縮めていくと(普通はそんな使い方しないけど)メニューとフッターが被る。
処理を1.ヘッダーが画面内にある場合 / 2.フッターが画面内にある場合 / 3.両方画面内にない場合の3段階に分けて、メニューが移動する位置などを決めるようにした。

_2.コンテンツの中身が全然ないhtmlの場合
4.ヘッダーもフッターも同じ画面にある場合はどうなるの?と思って試してみた。
コンテンツ部分を短くしたら(このページは現在製作中です的な長さ、公開するなよって話)不具合が。

_3.コンテンツの中身が全然ないhtmlの場合:修正
短い場合の修正として、コンテンツの高さを無理やり広げた。
そうしたところ、今度はbodyの高さを取得する順番なんかが狂ってしまった。
スクロールに合わせて移動するメニューなのに移動させない処理を追加

_4.javascript外部化、要素名を変数化
いままでのままだと、移動する要素ややヘッダーやフッターの名前を変更したい時に書き換える部分が沢山あるので変数にした、速度とかも。あとhead内の記述から.jsにした。

続きを読む

jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

この投稿には最新版(続き)があります。
懲りず ) jQueryを使った画面スクロールに合わせてついてくるフローティングメニューが一応形になりまんた。

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

jQueryの練習

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

続きを読む

ステージ枠と中央にガイドを引く.jsx

[追記 / 20100501] for文の中身を変更した。

カンバス枠にガイドを引く.jsxを使ったところ

使い方イメージ

上のソースを[適当な名前].jsxで保存。
program files以下のphotoshopフォルダにある\プリセット\スクリプト ( C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト ) にぶち込むと[ファイル] – [スクリプト]から選べるようになるので便利。

[ファイル] – [スクリプト] – [参照(B)…]から[適当な名前].jsxを選んで使える。

ステージ枠にだけガイドを引くには

上の.jsxのままだとカンバスの中央にもガイドが引かれて邪魔かもしれない、真ん中のは必要ないよって場合は1行目の50を削除する。

  • ここを  var posArr=[0,50,100];
  • こうする var posArr=[0,100];

結構作ってる人がいる。

うちが作ってみた理由もこれと全く同じでした。
外枠にガイドを引くスクリプト | Dearps ~Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです~

カンバスのサイズに合わせたシェイプを描きたい場合等フォトショップはピクセルにスナップしてくれないので外枠にガイドをひく必要があります。

高機能、他のjsxもすばらしい。
Add Guides EX(1.0.0) – Adobe Photoshop

ダイアログボックスからガイドの位置・幅・間隔・数等を指定することによって、自動的に位置を計算してガイドを作成します。

さくさくと引ける。
flabaka – 複数のガイドを一度に引けちゃうJSX

x=50,x=100,x=150,x=200の計4本ガイドを引きたい場合、50,100,150,200と入力し、OKボタンを押します。