月別アーカイブ: 2013年8月

カラーパレットカラーモードを即座に変換する方法

カラーパレットのカラーモードは、
カラーパレットの下記赤罫箇所をクリックすると
20130830カラーパレット01

カラーモードが選択できます。

20130830カラーパレット02
今回は、即座に変換する方法ということで、
上記方法とは違った変換の仕方をご紹介します。

それは、
カラーパレットの「スペクトル」箇所をにマウスポインタを置き
20130830カラーパレット03
「Shift」 + 「クリック」を行ってください。

すると、カラーモードが
「CMYKモード」→
「Web セーフ RGBモード」→
「グレースケールモード」→
「RGBモード」→
「HSBモード」→
とループをしながら、変換してくれます。

カラーパレットのオプションを表示させる方法:その2

カラーパレットのオプションが非表示なった場合に(下記のようなパレットの状態のとき)
20130826カラーパレット01
オプションを表示させる方法をご紹介します。

表示方法には2種類あります。
タイトルにもあります通り、今回は「その2」となります。

では、方法「その2」をご紹介します。

下記画像の赤罫箇所をダブルクリックをします。
20130829カラーパレット02
すると、パレットの状態が このようになります。
(CMYKスペクトルが非表示となります。)
20130829カラーパレット03

先ほどと同じ箇所(パレットの「カラー」)を、再度ダブルクリックします。

そうすることで、カラーパレット表示が本来の状態に戻ります。

20130826カラーパレット05

フォトショップCS3(win)のグラデーションの使い方

1.グラデーションツールを選択してください。
グラデ1
2.メニューバーの下のグラデーションのサムネイルをダブルクリックしてください。
グラデ2
3.このようなウィンドウが出たら、端っこにある四角をダブルクリックして色を選択してください。
グラデ3
4.もう一方の端っこの四角も同じようにダブルクリックして、色を選択して、色が決まったら「OK」を押してください。
グラデ4
5.画面上でマウスを押しながら移動させると、グラデーションを作ることが出来ます。

まっすぐ上下にグラデーションをかけたいときは、Shiftを押しながら上下に移動させてください。
斜め45度にグラデーションをかけたいときは、同じようにShiftを押しながら斜めにマウスを移動させると、45度にグラデーションをかけることができます。
グラデ5
グラデ6

スマートフォン向けサイトの電話発信用のリンク

スマートフォンには多くの機種で、電話番号のように見える文字列に対し、自動的にすぐに電話がかけられるようなリンクを付けてくれる機能があります。

しかし、その機能によって、例えば郵便番号などにまで同様のリンクが付けられてしまうことも多々あります。

このようなリンクが自動的につかないようにするには、<head></head>間に以下のように記述します。

<meta name="format-detection" content="telephome=no">

さらに、電話番号に手動でリンクを貼るには、以下のように記述します。

<a href="tel:0000000000">00-0000-0000</a>

カラーパレットのオプションを表示させる方法:その1

カラーパレットのオプションが非表示なった場合に(下記のようなパレットの状態のとき)
オプションを表示させる方法をご紹介します。
20130826カラーパレット01

方法は2種類あります。今回はその方法の1つをご紹介します。
まずは、赤罫箇所をクリックします。
20130826カラーパレット02

続いて、オプション表示をクリックします。
20130826カラーパレット04

そうすることで、カラーパレット表示が本来の状態に戻ります。
20130826カラーパレット05

カラーパレットのオプションを隠し、パレット表示をコンパクトにする方法

カラーパレットの表示領域をコンパックトにしたい時がありますよね。

そういった時に、カラーパレットのオプションを隠し、パレットのコンパクトに表示する方法があります。

それは、下記の赤罫箇所をクリックします。

20130824カラーパレット01

するとカラーパレットに関する選択項目一覧が表示されます。
その中の「オプションを隠す」をクリックで選択します。

20130824カラーパレット03
この一連の動作がカラーパレットのコンパクト表示の実行となります。
20130824カラーパレット05

フォトショップCS3(Win)で写真を歪ませずに拡大・縮小する方法

写真を拡大・縮小するには「編集」の中の「変形」か「自由変形」を使います。

○「変形」を使う場合
「編集」→「変形」→「拡大・縮小」を選択します。
写真の縁にバウンティングボックスが表示されたら、Shiftを押しながらマウスをドラッグして大きさを調節します。(拡大したい場合は、事前に「イメージ」→「カンバスサイズ」でキャンバスの大きさを大きくしておいてください。)これで、写真が歪まずに拡大・縮小することが出来ます。

○「自由変形」を使う場合
1.「編集」→「自由変形」を選択するとバウンティングボックスが表示されます。Shiftを押しながらマウスをドラッグすると、写真が歪まずに大きさを調節出来ます。

この操作は、ショートカットキーを使うとより簡単に出来ます。
Ctrl+Aで全選択→Ctrl+Tで自由変形を選択、バウンティングボックスが表示されます。あとは、Shiftを押しながらマウスをドラッグして大きさを調節してください。

カラーパレットを非表示にする2種類の用法

カラーパレットの非表示の方法は、2つあります。

まず、一つ目は
メニューバーのウィンドウを開き
20130822カラーパレット01

「カラー」箇所をクリックします。
これで、表示されていたカラーパレットは非表示となります。
20130822カラーパレット02

もう一つの方法は、
カラーパレットの赤罫箇所をクリックします。
20130822カラーパレット03
そうすることで、カラーパレットが非表示となります。
(非表示となったカラーパレットの表示方法は
メニューバーのウィンドウの「カラー」箇所をクリックします。)

背景画像のサイズ指定は background-size(CSS3)

PC、タブレット、スマートフォンなど、画面の解像度の異なる機器に適したサイト表示をする、いわゆるレスポンシブWEBデザインでは、そのサイズに合わせて背景画像のサイズを自動的に変更させたい場合があります。

そんなときは、CSS3の background-size が便利。背景画像の表示サイズをcssで指定することができるため、1枚の画像を様々な大きさで表示できるようになります。
background-size: auto; サイズを自動検出
background-size: 50px 50px; 縦横指定したサイズ
background-size: 50% 50%; 表示領域に対して縦横指定した割合
background-size: cover; 表示領域をすべて埋め尽くす大きさ
ackground-size: contain; 縦横比を保持したまま表示領域に背景画像を全て表示

□使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-sizeのサンプル</title>
<style>
p{
 width:400px;
 height:300px;
 background: url(./testimage.jpg) #cccccc;
}
#ex1{
 background-size:contain;
}
#ex2{
 background-size:cover;
}
#ex3{
 background-size:50px auto;
}
#ex4{
 background-size:100% 100%;
}
</style>
</head>
<body>
<p id="ex1">contain</p>
<p id="ex2">cover</p>
<p id="ex3">50px auto</p>
<p id="ex4">100% 100%</p>
</body>
</html>

 

ただし、古いブラウザでは対応していないものがありますので、注意が必要です。

フォトショップCS3(Win)で歪んだ画像を直す方法

フォトショップで縦横比が歪んでしまった画像を直すには、「編集」→「自由変形」を使います。

(例)この画像を縦長に伸ばしたい場合

歪み1

1.フォトショップの「ファイル」→「開く」で画像を開きます。

2.そのままでは画像が背景レイヤーになっており「編集」→「自由変形」が選べないため、普通のレイヤーに変えます。やり方は、画像のレイヤーを右クリックして「背景からレイヤーへ」をクリックします。

3.「イメージ」の「カンバスサイズ」でカンバスのサイズを広げ、画像の周りに余白ができるようにします。

歪み2歪み3

4.「編集」から「自由変形」を選び、画像を上に引っ張ります。歪みが直ったらエンターキーを押して変形を終了します。

歪み4

5.「切り抜きツール」で画像の部分を切り抜きます。

歪み6

6.完成です。

歪み8