覚えておくと便利！WEB制作で使えるPhotoshop「繰り返し」のショートカット

こんにちは、デザイナーの沙知です。

皆さんGWはいかがお過ごしでしたでしょうか？
私は最近なんとなく西国三十三所巡りをしてみようと思い立ったので、お寺巡りをしていました。
全部巡り終わると極楽浄土に行けるらしいみたいなそんなことなんだそうです。
寺社仏閣はなんとなく落ち着きますね。日本人の心ーーーー！うわ～～～～～～い！って感じがします。
お寺って山の上などにあることが多くて自然を感じながらお参りできるので、マイナスイオンを滅茶苦茶浴びたので心なしか髪がサラサラになった気が。
写真もいっぱい撮りました。あとでデータを確認してみると、苔の生えた石垣の写真が多いこと！自分の変なツボを見つけれることができました。これも御仏のお力なのでしょうか。
石垣良くないですか？ひとつ一つは結構いびつな形をしているのに、きれいに収まるべきところに収まってる…そんなところが素晴らしくないですか！？っと熱く語りたくなります。あと石段も好きみたいです。めっちゃ写真撮ってました。

今日は石垣ではありませんが、レンガ調のものをPhotoshopの繰り返しのショートカットを使って作っていきたいと思います。
テーブルのデザインをPhotoshopで作るときに使えるので覚えておくと便利です。

1. 繰り返しのショートカットって？
2. まずは1つ長方形を作ろう
3. 長方形をコピーして2つに
4. 大量にレンガを並べよう
5. 二段目以降をつくって重ねていく
6. 完成

繰り返しのショートカットって？

事前にした操作を繰り返すことです。例えばillustratorのCtrl＋Dのような操作です。
PhotoshopだとCtrl+Alt+Shift+Tです。覚えましょう！

まずは1つ長方形を作ろう

長方形ツールを選択してカンバスをクリックして、80×30pxの横長の長方形を作成します。

長方形をコピーして2つに

作成した長方形を選択してCtrl+Alt+Tでバウンディングボックスを表示させます。

Shiftを押しながら方向キーで最初に作成した長方形と少し離して(今回は3px)コピーしてからEnter。

大量にレンガを並べよう

Ctrl+Alt+Shift+Tで繰り返しコピー。
6個ほどコピーしてグループにまとめてから中央に寄せてます。
ここでレンガっぽい色合いを調節しておきます。

一段目のレンガが完成しました。

二段目以降をつくって重ねていく

一段目のレンガを今回はパスの選択ツールで選択します。

Ctrl+Alt+Tでバウンディングボックスを表示、shiftキーで下にコピーします。

一段目との隙間は横と同じ3pxです。ここでレンガっぽくするために横に40pxずらしてから、Enterで決定。

三段目以降は一段目と2段めを同じ要領でコピーして作っていきます。

一段目のレンガを今回はパスの選択ツールで選択して、shiftキーで下にコピーしてEnterで決定。
Ctrl+Alt+Shift+Tで繰り返しコピーでレンガの間を埋めていきます。

完成したレンガがこちら。

一番下のレイヤーに暗い色をいれてもいい感じですね。

同じ要領でテーブル風のデザインも簡単につくれます！

同じものを何度も同じ数値だけコピーしたいときに便利なショートカットですのでぜひお試しください。