【Photoshop cc】「スクロール」機能でパターンを簡単に作成する方法

こんにちは。デザイナーの佐竹です。
今回は「スクロール」という機能を使ってシームレスなパターンを作成する方法をご紹介します。
パターンを登録すると、いつでも呼び出して使うことが可能です。

「カスタムシェイプツール」で好きなシェイプを作成します。

カンバスサイズは切りの良い数字にしておきます。
オブジェクトのレイヤーを1枚コピーして非表示にしておきます。

フィルターメニューから「スクロール」を選択


「フィルター」→「その他」→「スクロール」を選択します。

「ラスタライズする」というアラートが表示されるので「ok」をクリックしてください。

ダイアログボックスが表示されるので「水平方向」「垂直方向」を、カンバスサイズの半分のサイズで入力します。
「未定義領域」で「ラップアラウンド(巻き戻す)」を選択してOKします。
そうすると、オブジェクトが四隅に配置されます。

非表示レイヤーを表示

最初にコピーして非表示にしていたレイヤーを表示します。
四隅+中央にシェイプが配置されたパターンが完成します。
「パターンを定義」を選択して、新規パターンとして登録します。

【Photoshop cc】シェイプ機能で簡単にテキストを回り込ませる方法

こんにちは!デザイナーの佐竹です。

デザインカンプ作成などの際に、きれいに短時間で文字列を成型したいときに便利な機能を紹介します!
テキストの変更があっても、改行で悩まずサクッと文字を入れ替えられますよ!!

では、早速手順です。

「長方形」ツールでシェイプを作成

文字を流し込む領域と、画像+余白の領域にシェイプを作成します。
画像も右下のシェイプの下に配置しておきます。
二つのシェイプは右下で揃えておきます。
領域がわかりやすいように、背景に薄い色を付けておきます。

シェイプを結合して中マドにする

「レイヤー」パネルで二つの長方形を選択して、「Shift」+「E」で結合します。

「パスコンポーネント選択」ツールを選択して、先ほど結合した長方形を選択します。

「オプションバー」の「パスの操作」から「シェイプが重なる領域を中マド」を選択します。


シェイプが中マドになり、下にあった画像が表示される状態になりました。
「パスの操作」で「シェイプコンポーネントを結合」を選択します。

そうすると、「この操作を行うとライブシェイプが標準のパスにかわります」というアラートが表示されますので、「はい」を選択します。

文字を挿入する


シェイプレイヤーを選択した状態で「横書きツール」を選択し、文字を入力します。
この段階で、シェイプと同じ形のテキストエリアが作成されます。
シェイプは削除してください。

いかがだったでしょうか。シェイプは色々な形で作成可能ですので、表現の幅が広がりますね。

【Photoshop cc】小さな文字を鮮明に表示する方法

こんにちは。デザイナーの佐竹です。

デザインカンプを作成して、お客様に見て頂く際に、キャプションなどの小さな文字が潰れてしまって、そもそも読めない!ということがあります。
前提として、コーディングしたときのブラウザに表示される文字と、デザインカンプの文字は別物であることがデザイナー、ディレクター、お客さまとの共通認識である必要があるのですが、それでもデザインを見た段階で、文字が見にくいのは印象が良くないですよね。

Photoshopなどのデザイン用ソフトには「アンチエイリアス」という機能があります。
文字や画像の周りなどにグラデーションの枠をつけ、ジャギーを目立たなくする機能です。

ある程度のサイズの文字であれば、アンチエイリアスの標準的な「滑らかに」という種類を選択しておけばスムーズな文字を表示できます。
しかし、小さすぎる文字の場合、線が潰れたりして、きれいに表示することが出来ませんでした。

さて、Photoshop ccの新機能の一つとして、このアンチエイリアスに「WindowsLCD」という項目が追加されました。
これは、WindowsOSのフォントスムージング機能を再現したものみたいです。
Macの場合は「MacLCD」と表示されていると思います。

さて、これで文字を打ってみましょう。

9pxのサイズで文字を打ってみます。
オプションで「アンチエイリアス」の選択欄から「WindowsLCD」を選択します。
比較のため、同じ9pxで普通のアンチエイリアス「滑らかに」「鮮明」を選択した文字と、大きいサイズのアンチエイリアス「滑らかに」の文字も打っておきます。


小さい文字も、鮮明に表示できるようになりましたね。

【Photoshop cc】リアルな光沢のある文字を簡単に作る方法!

こんばんは。デザイナーの佐竹です。

今日は「リアルな光沢」のある文字を簡単に書く方法をご紹介します!
ここ2、3年、「ベベル」や「エンボス」とは無縁の生活を送ってきました。
ちょっと古臭い表現になってしまうような気がするし、あまり好んで使うことはなかったのですが・・・

しかし、ここぞという時にガツンとピカピカした目立つ文字を書きたい時もあると思います。
今回は「光沢輪郭」という機能をつかって、ピカピカな文字をリアルに表現したいと思います。

色々な表現に応用も聞くと思いますので、知っておいて損はない機能だと思います。

さて、それでは手順を紹介していきます!

文字を書く

今回は「光沢」のある文字にピッタリな「century」というフォントでGOLDと書いてみます。

後で光沢を出しますので、とりあえず暗めのオレンジ色に文字色を変えておきます。

レイヤースタイルから「ベベルとエンボス」を選択


図のように値を変更しておきます。この設定で、立体的な文字になります。

「ベベルとエンボス」の「陰影」box内にある「光沢輪郭」のサムネイルをクリック

「輪郭エディター」が開きます。

「輪郭エディター」の「マッピング」カーブを調整

トーンカーブを操作するような感覚で、マッピングを調整していきます。
実際の文字を確認しながら、調整してください。

キラキラとした光沢のある文字になりました!!
いかがだったでしょうか。簡単ですよね!!

【Photoshop cc】爆速切り抜き方法 [選択とマスク](フワ毛にも対応)

こんにちは。webデザイナーの佐竹です。

今回は、納期の関係で大急ぎで画像を切り抜きたいときに超便利なテクニックをご紹介します。
もう数年前のことですが、画像を切り抜く方法を「パスを使ったマスク」しか知らなかった時代、髪の毛がモサモサ、ふさふさした人をきれいに切り抜くことが出来ず、先輩デザイナーに泣きついたのを思い出します。

今では、トレースも時間をかけず出来るようになりましたが、PSが進化しているので、トレーステクニックはまったく必要なくきれいに選択範囲出来るようになりました。
初めて試した人は感動すること間違いなしの機能ですよ!!

選択範囲のための機能は、「境界線を調整」という機能が以前からありましたが、「cc 2015.5」からさらに使いやすくなって【選択とマスク】ワークスペースとしてまとめられました。

では、早速操作方法をご紹介します!

「選択とマスク」を選択

切り抜きたい画像を選択した状態で、メニューバーの「選択範囲」→「選択とマスク」を選択します。

「クイック選択ツール」で範囲選択

まずは「クイック選択ツール」で範囲選択していきます。
不要な部分が選択されてしまったときは、Windows「Ctrl+Alt」Mac「option+Alt」で削除することが可能です。(選択ポインターが「-」マークになります)

※「属性」パネルの「表示モード」をオーバーレイにすると、選択範囲がわかりやすくなります。

境界線調整ブラシツール

次に「境界線調整ブラシツール」で細かい部分を選択します。
この機能を使うと、髪の毛などのモフモフ部分もきれいにマスク範囲として選択できます。

「属性」パネルで「OK」

最後に、属性パネルの「出力設定」→「出力先」で「レイヤーマスク」を選択して、「OK」をクリックします。

これで、簡単に超高速でモフモフな物体も切り抜けました!
モフモフ、フワフワだけでなく、人間の髪の毛なども、きれいに切り抜けます。

とても便利な機能ですね。ぜひ使ってみてください。

【Gulp】初心者向け!Gulpを使ってみよう! 《Node.jsインストール編》

こんにちは。デザイナーの佐竹です。

これまで何度かSassの環境を整えるための手順をブログでご紹介してきましたが、今回はSassをコンパイルするためのタスクランナーである「Gulp(ガルプ)」の導入方法をご紹介していきます。

Gulpは「Node.js」のプラグインですので、まずはNode.jsの導入方法をご紹介します。

Node.jsは、サーバサイドJavaScriptです。
ノンブロッキングi/oで非同期処理が可能なので、webページの表示とDBへのアクセスなど、同時に処理してくれてページの表示が速くなります。

インストールはとても簡単ですよ~!!

インストーラーのダウンロード

http://nodejs.org/
「V6.11.3 LTS」(2017年9月現在)のボタンをクリックして、ファイルをダウンロードします。

ダウンロードしたファイルをダブルクリックして、インストーラーを起動、インストールします。

インストールの確認

コマンドプロンプトを起動し、以下のコマンドを実行します。

node -v

バージョン情報が表示されれば、無事インストール完了となります。

【Sass】初心者向け!Sassを使ってみよう! 《Compass インストール編》

こんにちは!
前回、「【Sass】初心者向け!Sassを使ってみよう! 《Compass 解説編》」でCompassについて簡単にご紹介しましたが、今回はさっそくインストールしてみたいと思います。

※Compassをインストールするには、SASS同様、Rubyがインストールされている必要があります。

Sassなどのインストールと比べて、Compassのインストールはめちゃめちゃ簡単です。

コマンドプロンプトを起動

「gem install compass」を入力します。

ずらずらと文字が表示されます。

インストール確認

「compass -v」と入力します。

Compassのバージョンが表示されたら、インストール完了!!

いかがだったでしょうか。
これで、Sassを使う準備は万端ですよ~。

【Sass】初心者向け!Sassを使ってみよう! 《Compass 解説編》

こんにちは!
残暑が厳しいですね。洗濯物はよく乾きますが!

さて、今回はSassを始めるにあたって、Compassも一緒に始めてみようかな、という方向けにCompassについて書いていこうと思います。
簡単だから、この際だからCompassも始めてみよう~、という感じです。

まず、Compassとは「Sassをさらに強化したフレームワーク」です。
もっと詳しく言うと、SassおよびCSSの機能を拡張するオープンソースのCSSオーサリングフレームワークです。
便利な機能がたくさんあり、Sassがかなり使いやすくなります。
このCampassの登場によって、Sassがより多くの人に使われるようになったと言われています。

主な機能として・・・

1、汎用classなどを使わないマークアップ
2、再利用可能なコードが沢山用意されている
3、スプライト画像作成などの画像処理機能
4、CSS3のミックスイン
5、Vertical Rhythmを作成する機能
6、機能拡張用プラグイン
7、ベンダープレフィックスを自動追加(SASSのmixin)

などがあります(公式サイトより)

それに、CampassはSassより短いコマンドで実行できます。
Sassの場合、出力先のCSSファイル名も指定する必要がありますが、Compassは最初に設定済みなので不要です。

Compassは「config.rb」に設定を書いておくことが可能で、これが引数の代わりになります。
例)javascripts_dir = “js”
sass_dir = “_scss”

こんな感じです。

config.rb に必要な情報が書かれているので、コマンドが少なくて済むのです。

上記の通り、便利な機能も多く、効率化もできるので、Sassをやるなら、Compassで・・・と考えるのが一般的なようです。

次回は、さっそくCompassのインストールをしていきたいと思います。

【Photoshop cc】画像のゆがみを簡単に修正する方法

こんにちは。
お盆休みも終わってしまいましたね。
はやく涼しくならないかなぁ・・・。

さて、今回はPhotoshopで画像の歪みを修正する方法をご紹介します。
風景を撮影すると、直線の対象物がレンズの影響で歪んでしまうことが有ります。
また、四角いポスターを斜め方向から撮影した場合、台形のような形に写ってしまいますよね。

そんな時、Photoshopではすごく簡単に修正できるのです。
すごく便利な機能です!!

今回は斜め下方向から撮影したポスターの歪みをとってみたいと思います。
では、手順です。

レンズ補正を選択

「フィルター」→「レンズ補正」を選択します。

自動補正タブを選択

「画像を自動的に拡大/縮小」チェックボックスにチェックを入れます。

カスタムタブを選択

今回は台形になってしまった画像の補正なので「変形」のつまみを動かしながら、実際の画像がまっすぐになるように調整します。

「変形」のつまみを動かすと、こんなにまっすぐになりました。
グリッド線にまっすぐ沿っていますね。

【Sass】初心者向け!Sassを使ってみよう! 《SSLエラー編》

さて、今回もSassについて書いていきます♪
Sassをアップデートするときなどに、よく出るSSLエラーの対処方法です。

コマンドプロンプトにSSLエラー表示

コマンドプロンプトでアップデートなどをしようとコマンドを打ち込んだ際に、下記のようなエラーが表示されます。

ERROR: While executing gem … (Gem::RemoteFetcher::FetchError)
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

エラー内容は、「インストーラーに含まれているSSL証明書が古い」ことが原因のようです。

SSLエラーを解消

下記URLから修正版RubyGemsファイルを取得します。
https://rubygems.org/downloads/rubygems-update-2.6.7.gem

Cドライブ直下に置き、コマンド入力します。

1、「gem install –local C:\rubygems-update-2.6.7.gem」
2、「update_rubygems –no-ri –no-rdoc」
3、「gem uninstall rubygems-update -x」

「Removing update_rubygems
Successfully uninstalled rubygems-update-2.6.7」と表示されれば成功です。

【Sass】初心者向け!Sassを使ってみよう! 《Sassアップデート編》

夏真っ盛りですね。もう何年もプールに入っていないのですが、今年は1回くらいプールに行きたいなぁと思っています。

さて、今回もSassについて書いていきます♪
Sassは開発スピードがはやく、頻繁に更新されています。
アップデートで機能追加やバグフィックスを行うので、アップデートはまめに行っていきましょう。(詳細は公式ドキュメントで確認しましょう。)

まずはgemをアップデートする

コマンドプロンプトを起動して、次のコマンドを入力します。
「gem update –system]

これで、gemのローカルパッケージの中に含まれるSassも最新になりました。

Sassのアップデート

Sass単体でアップデートする方法です。
コマンドプロンプトに、「gem update sass」と入力します。
成功すると、ずらーっと英語の文章が表示されます。
Sassの最新バージョンが表示されていたら、アップデート成功です!

アップデートの際に、「SSLエラー」が表示されることがあります。
SSLエラーの対処方法については、次回のブログでご説明します♪

【SASS】初心者向け!SASSを使ってみよう! 《Rubyインストール編》

今回はSASS利用に必要な、「Ruby」をインストールする手順をご紹介します。
ちなみにMacにはデフォルトでRubyがインストールされているそうです。
今回はWindows環境にRubyをインストールしていきます。

Rubyの公式サイトから「RubyInstaller」をダウンロード

「RubyInstaller」(最新安定版)をダウンロードします。OSが64bitの場合は(X64)と書かれているものをダウンロードします。

インストール開始

インストーラーを起動して、「実行」をクリックします。

「インストール先とオプションの設定」

下図の画面が出たら、上の2つにチェックを入れます。

1、Td/Tkサポートをインストールする
2、Rubyの実行ファイルへ環境変数PATHを設定する

インストール完了

Windows【スタート】メニューの「すべてのプログラム」の中に「Ruby・・・(バージョン)」と出ていたらインストール完了です。

コマンドプロンプトで確認


「Ruby -v」と入力して、バージョンがひょうじされていればOKです。

【サーチコンソール】ドメイン・プロトコル変更時の設定方法

こんにちは。

ぬこ飼いデザイナー佐竹です。

前回から引き続き「グーグルアナリティクス」と「サーチコンソール」の設定方法をご紹介します。
前回記事で【Gアナリティクス】ドメイン・プロトコル変更時の設定方法
をご紹介ましたが、引き続いて「サーチコンソール」の設定方法をご紹介します。

サーチコンソールについては、ドメイン・プロトコル変更について詳しい解説も書かれていますので、ぜひ検索してお読みください。

※作業前に、アドレス変更前のURL、変更後のURLを両方登録しておきます。
その後、旧URLのサイトからhtaccessファイルでのリダイレクト設定をしておいてください。

1、旧ドメインのURLをクリックします

右上の歯車アイコンから「アドレス変更」をクリックします。

2、アドレス変更ツール画面

登録済みURL一覧の中から、新しいサイトのURLを選択します。

3、リダイレクトの確認

「2.301リダイレクトが正常に動作している事を確認する」の「確認」ボタンをクリック
(リダイレクト設定がされている場合、確認作業は完了します。)

4、旧・新ドメインの存在を確認

「3.確認方法がまだ残っていることを確認する」の「確認」をクリック

5、Googleに通知

「4.アドレス変更のリクエストを送信する」を「送信」

6、リクエストの表示

サーチコンソール確認画面に戻ると、旧ドメインのサイトの方に「サイトアドレス変更リクエスト」と表示されていれば完了です。

【Gアナリティクス】ドメイン・プロトコル変更時の設定方法

こんにちは。

ぬこ飼いデザイナー佐竹です。

今回から2回にわたって「グーグルアナリティクス」と「サーチコンソール」の設定方法をご紹介します。

・サイトのドメインを取得した・・・
・プロトコルをhttp:からhttps:に変更した・・・

など、一度サイトを公開した後でURLが変更になる場合の、設定変更方法です。

今回は「グーグルアナリティクス」の方の設定方法をご紹介します。
とっても簡単ですよ~♪

設定箇所は「設定画面」に2か所あります。

1.プロパティ設定

①「アナリティクス設定」>「プロパティ」>「プロパティ設定」を開きます。
②「デフォルトのURL」を変更(プロトコルもここで変更可能です。)

2.ビュー設定

①「アナリティクス設定」>「ビュー」>「ビュー設定」を開きます。
②「ウェブサイトのURL」を変更(プロトコルもここで変更可能です。)

これで、URLが変わってもこれまでのデータを引き継げます。

【PhotoshopCC】「ディテールを保持」機能で劣化の少ない画像拡大方法

こんにちは。
ぬこ飼いデザイナーの佐竹です。

さて今回は、きれいに画像を拡大する方法をご紹介します。
今までは画像を拡大すると、ノイズが目立ち、シャープをかけてもギザギザが気になりました。
ccから追加された新しい機能「ディテールを保持」を使うと、画像の劣化が少なくすむので、その後のレタッチの手間を省けます♪

それでは、さっそく手順です。

「画像解像度」を選択

「イメージ」メニューの「画像解像度」を選択します。

解像度を指定

「画像解像度」ダイヤログが表示されるので、解像度を指定。(例では400px×266px)
「再サンプル」にチェックを入れて「ディテールを保持」を選択します。
次に、その下の「ノイズの軽減」の数値をプレビューで確認しながら設定します。

画像の劣化が抑えられました。
Photoshopには他にも「ニアレストネイパー」という拡大方法があります。
こちらも後日ご紹介したいと思います。

【SASS】初心者向け!SASSを使ってみよう! 《便利機能8つ!!》

こんにちは。

ぬこ飼いデザイナー佐竹です。
前回(【SASS】初心者向け!SASSを使ってみよう!《基本情報編》)から、SASSについてご紹介しています。
今回は、導入にあたって、絶対に導入したくなる!SASSの便利な機能についてまとめてみようと思います。
ブログを書きながら私も勉強していきたいと思っています!

記述の簡略化

入れ子(ネスト)が使えるので、長い階層記述を省くことが可能になります。
セレクタを何度も書く必要がなくなり、効率的です。
一度使ったセレクタは@extendで使いまわせるので、非常に合理的です。

変数・関数を使える

変数を定義できます。
初めに各種設定を定義しておけば、変更も再利用も効率よく行えます。
関数については、リファレンスが必要になりますが、様々な処理が行えます。

四則演算が使える

レイアウトの際に、演算処理ができるようになるので、「均等に3分割、4分割」などが可能になります。

スタイルを継承することができる

既存のクラスを引き継いだ状態で、新しくスタイルを書き加えることができます。

コードの再利用

スタイルをまとめて、モジュールやテンプレートのように定義し、読み込んで使うことが可能です。
値を可変にした定型文のような感じで使用する場合@mixinを使用します。値の一部を変更して使いまわすことが可能です。
値が固定の場合は@extendを使用します。

条件分岐などプログラム的な処理が可能

ifやfor文を使えるので、様々な条件分岐での繰り返し処理を行えます。

CSSファイルを圧縮できる

大規模サイトで複数のcssを管理しているような場合も、RubyやKoalaで圧縮することで1つのcssファイルとして書き出すことが可能です。

フレームワークが使える

Compassなど、様々なフレームワークが開発されています。
機能を拡張することが出来、さらに便利になります。

【SASS】初心者向け!SASSを使ってみよう! 《基本情報編》

こんにちは。

ぬこ飼いデザイナー佐竹です。
今回からしばらく、SASSについて書いていきたいと思います。
コーディングの効率化は永遠の課題。しかし、ソースのクオリティが落ちてしまうのは悲しいですよね。

コーディングの効率化と言って今真っ先に頭に浮かぶのがSASSです!
ブログを書きながら勉強していきたいと思っています!

では、さっそく。
まずはSASSの基本情報からおさらいしていきたいと思います。

SASSって何?

Sassとは、「Syntactically Awesome StyleSheet」の略です。
直訳すると構文的にかっちょいいスタイルシート…みたいな感じです。

記法の違い

SASSには「SCSS記法」と「SASS記法」があります。
今一般的にはCSSと互換性のある「SCSS記法」を使うことが一般的です。
SASSの公式サイトでもSCSS記法がサンプルとして使用されています。

インストールについて

SASSを使うためには「Ruby」をインストールする必要があります。
次回は、この「Ruby」のインストール手順をご紹介します!
ちなみに、Macをお使いの方は、すでにインストールされていますのでこの手順は飛ばしてOKです♪

動作環境が整った後はGUIツールである「Koala」をインストールします。
こちらも後程ご紹介しますので、ぜひご覧ください!

【Photoshop】便利すぎる「調整レイヤ―」の機能一覧!!

こんにちは。

ぬこ飼いデザイナー佐竹です。
梅雨ですね~。洗濯物が乾きませんね~。。

さて、前回「調整レイヤ―を使って特定のレイヤーを簡単にモノクロ変換する方法」をご紹介しましたが、この便利すぎる「調整レイヤー」の種類をまとめてみたいと思います。
元の画像をキープした状態で調整できる機能なので、もう別の方法は使えないくらい便利ですよね!

では、調整レイヤーの種類をご紹介します。。

明るさ・コントラスト

画像の明るさとコントラストをそれぞれのスライダーで調整できます。

レベル補正

画像のピクセル分布をヒストグラムで表示し、階調を総合的に調整できます。

トーンカーブ

レベル、明るさ、コントラストなどの調整点を曲線でコントロールし、階調や色域を総合的に調整できます。

露光量

画像の明るさをRGB値のガンマ(光の強さ)で調整できます。

自然な彩度

彩度の増減によるクリッピング(階調が失われる現象)を抑え、自然な彩度に調整できます。

色相・彩度

画像の色相、彩度、明度をスライダーで調整できます。

カラーバランス

RGBカラーの色情報を個別に調整して、色調を総合的に補正できます。

白黒

色の系統別パラメーターで、カラー画像をグレースケールへ変換できます。

【Photoshop】調整レイヤ―を使って特定のレイヤーを簡単にモノクロ変換する方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
梅雨ですね~。ヘアスタイルが決まらないですよね~。

さて、今回は特定のレイヤーだけ簡単にモノクロに変換する方法をご紹介します。
背景をモノクロにして、文字は色を付けて目立たせたい場合などに使えるんです。

しかもリッチなグレースケール画像を作成することが出来る!そして何度も修正が可能で元に戻すことも出来る!とても便利な機能ですよ!!

では、早速手順です。

新規調整レイヤ―を選択する

[レイヤー]→[新規調整レイヤー]→[白黒]を選択します。

「白黒」という調整レイヤーがレイヤーパネルに表示されて、下にあるレイヤーすべてがモノクロに変換されました。
レイヤーパネルを見るとわかりますが、元のレイヤーは変更されておらず、調整レイヤーを削除すれば元に戻ります
調整レイヤーをダブルクリックすると、再調整が可能です。

白黒調整レイヤーより上にレイヤーを作成することで、そのレイヤーの文字や画像に色を付けるこのが可能です。

いかがだったでしょうか?
簡単すぎてびっくりしてしまいますよね。
元の画像をキープした状態で調整できる機能は、とても便利ですよね。
これでモノクロ変換も自由自在ですね!!

【Photoshop cc】ガイドをサクッとグリッドに変える方法

こんにちは。

ぬこ飼いデザイナー佐竹です。
洋服や寝具の整理など、梅雨入りの準備はしましたか~?

さて、先日「Photoshopでガイド線をガッチリ正確に引く方法」をご紹介しましたが、この方法を応用して、グリッド線を簡単に引く方法をご紹介します。

グリッドレイアウトをしたいけれど、簡単に思い通りのグリッドを引きたい!という時にとても便利ですよ~♪

では、早速手順です。

新規ガイドレイアウトを作成

「表示」メニューから「新規ガイドレイアウトを作成」を選択します。

ダイアログボックスに数値を入力

(1) カスタムを選択します。
(2) 列にチェックを入れて幅や間隔を設定します。
(3) 行にチェックをいれて、列と同じ幅・間隔を設定します。
(4) マージンは必要があれば設定してください。


いかがだったでしょうか?
簡単にグリッドの設定が出来ました。
これでかっこいいグリッドレイアウトが作れそうですね!!