Photoshop: あれやこれや備忘録

Photoshop

2011年12月25日 (日)

iOSアイコンのPhotoshopテンプレート

ツイート

以前にアイコンを作成した時に用意したiOS用のアイコンテンプレート。
例によってPhotoshopファイル。

iOSのアイコンサイズは
3GS以前：57pix
4以降：114pix
iPad：72pix
だが、テンプレートは512pixで作成してある。iTunes Storeにも登録出来るサイズ。

[設定]アプリっぽい背景と枠、青・緑・橙のデフォルトアイコンっぽい背景、反射やグラデーション等を格納。
Iosicon01 Iosicon02 Iosicon03 Iosicon04

iOSアイコン用テンプレート

アイコンを作ってTouch Icon CreatorなどでURLスキームを設定すれば、以下のテンプレートで作成した壁紙と併せてオリジナルのホーム画面を作成することが出来る。

Retina Display用テンプレート
 iPad用テンプレート

Adobe Photoshop Elements 10 Editor

続きを読む "iOSアイコンのPhotoshopテンプレート"

2011年12月25日 (日) iPad, iPod touch, iPhone, Photoshop | 固定リンク | コメント (0) | トラックバック (0)
Tweet

2011年12月14日 (水)

iPad用ホーム画面のPhotoshopテンプレート

ツイート

1年ちょっと前にiPod touch/iPhone用の壁紙テンプレートを作成したが、実は同時期にiPad用のテンプレートも作っていた。iPadは回転させることで壁紙が回転する。そして回転させるとアイコンの配置も変わってしまうため、結局使い物にはならないと思ってハードディスクに埋もれさせることにした。

縦用の壁紙を設定したところ

↓

向きを横に変更したところ

今回、年末を迎えてハードディスクの整理をしていたら出てきたのでちょっといじってみることにした。

テンプレートには縦方向用と横方向用の2種類のマスクを格納している。どっちの向きになっても拡大・縮小がされないように1024×1024のサイズでの作成を前提とした。

赤が縦向き用のマスク、青が横向き用のマスクだがアイコンの位置がズレていることが分かる。そのため実際にエンボスやベゼルをかけた壁紙を作成すると上の図のように間の抜けたものになってしまう。

iPod touch/iPhoneの様にきれいに重なるように作成するのは無理なので、逆に考えてアイコンの位置が模様になるように作ってみたのが以下の4つ。

やっぱり多少間抜けな感じがするので、結局のところ縦位置・横位置でメインとなる画像が見切れないように画像の位置を調整するぐらいしか使い道がないかもしれない。

iPad Photoshopテンプレート

Adobe Photoshop Elements 10 Editor

続きを読む "iPad用ホーム画面のPhotoshopテンプレート"

2011年12月14日 (水) iPad, 壁紙, Photoshop | 固定リンク | コメント (0) | トラックバック (0)
Tweet

2011年1月30日 (日)

MacBook Airにシール

MacBookの天板のアップルマークは液晶のバックライトを利用して光るが、それを利用したデカールがある。

こちらで色々なものを800円程度から販売している。

上記のサイトから購入しても良いのだが、他人と同じものは何となく気が進まないのとMBAに対応したサイズのものがあまり無いことから、自分で作ってみることにした。

方法は簡単で市販のインクジェット対応のラベルシールに図案を印刷するだけだ。

手軽に入手出来るラベルシールはA4サイズだがMBAのサイズはA4より横がほんの数mmだけ広く、全面に貼ることが出来ない。
全面に貼れれば保護フィルム代わりにも出来るのだが、仕方がないので印刷したものを切り取ることにした。

選んだシールは表面の質感を損なわないように透明でツヤ消しのものにした。

あらかじめPhotoshopでほぼ同サイズのテンプレートを作り、そこにサイズがほぼ合うように調整したレイヤーを印刷した。
こうすれば出来上がりもイメージ出来る。
※テンプレートは「ほぼ」同サイズだがアップルロゴの形状が微妙に異なるので注意。

インクジェットの仕組み上、白は印刷出来ないので（白いラベルシールを切り取れば出来るのだが、ちょっと面倒なのでパス）黒で印刷した。もちろんカラーも印刷出来るが、デザイン上モノトーンの方が似合うような気がする。

丁寧に切り取るのであればデザインカッターを使えばいいが、ツヤ消しであまり境目が目立たないだろうと思ってハサミでチョキチョキ。なんとなく工作の時間的な雰囲気があり、気づけば「でっきるっかな♪」と口ずさんでいた

シールは何枚も入っているので気に入らなければやり直せばいいし、全面の覆うような図柄でなければ１枚のシールに複数の図柄をずらして印刷すればシールが無駄にならない。

どんな図案がいいか悩む時間も楽しいし、出来上がりもそこそこで休みの日のちょっとした暇つぶしにはちょうどいい。

2011年1月30日 (日) MacBook Air, Mac, Photoshop | 固定リンク | コメント (0) | トラックバック (0)
Tweet

2010年9月25日 (土)

棚レイヤーを追加したPhotoshopテンプレートと壁紙

前回作ったテンプレートに流行り？の棚のレイヤーを追加してみた。
サイズは4G用の640×960。
※iPod touch/iPhoneからスマートフォン表示で閲覧すると、低画質に変換されたもの(サムネイル)しか見られない。サムネイルのリンク先の高解像度画像はPC表示モードで参照。

追加したレイヤーは黒い棚、白い棚、ガラスの棚が2つの4種類。
白い棚とガラスの棚はほとんど同じだが若干買えてある。

黒いレイヤーをそのまま適用するとこうなる。

背景がかなり隠れてしまうので不透明度を適当にいじくってみる。

さらに白い棚を適用。白は不透明度を無くすと棚に見えなくなってしまうので、不透明度を下げている。

白い棚を少し変えたガラス調の棚。だけど思っていたほど白い棚と変わっていないのが残念。

アプリの名前の部分を無くして板ガラスっぽくしてみた棚。

白い棚で難しいのは壁紙に設定するとiOSがグラデーションを適用してしまうため、どうしても4段目だけ色合いが薄く見えてしまう。
そのため4段目の白を少し濃くしている。ただ、あまり濃くしすぎると背景を殺してしまうので難しいところだ。

前回の壁紙に棚を追加するとこんな感じになる。

見てのとおり背景が白だと白い棚やガラス調の棚は背景を汚くするだけなので、そんな場合は白(ガラス調)レイヤーの上に青などのレイヤーを作成し、乗算で不透明度35%程度を設定すると棚らしく見えるようになる。

今回は調整無しで適用しているが図によっては微調整をしたり色を加えたりすると、より見栄えが良くなるだろう。

棚はレイヤーで作成しているので、アルファチャネルとか考えずにElementsバージョンでも簡単に使えると思う。

Retina用 Photoshopテンプレート(棚レイヤー付き) ※ロック画面は変更無し。

Adobe Photoshop Elements 9 日本語版 Windows/Macintosh版2010/10/1発売予定
Adobe Photoshop Elements 8 日本語版 Macintosh版もうすぐ旧バージョン。
Adobe Photoshop Elements 8 日本語版 Windows版同じく、もうすぐ旧バージョン。

Adobe Photoshop CS5 Macintosh版 (32/64bit)
Adobe Photoshop CS5 Windows版 (32/64bit)

2010年9月25日 (土) iPod touch, 壁紙, iPhone, Photoshop | 固定リンク | コメント (0) | トラックバック (0)
Tweet

2010年9月23日 (木)

Retinaのロック画面・ホーム画面のPhotoshopテンプレート

Retinaディスプレイの高さ960、幅640ピクセルに対応したロック画面とホーム画面のPhotoshopテンプレートをネットで探してみたが見つからなかったので、作ってみた。
※iPod touch/iPhoneからスマートフォン表示で閲覧すると、低画質に変換されたもの(サムネイル)しか見られない。サムネイルのリンク先の高解像度画像はPC表示モードで参照。これはココログの公衆回線を意識した仕様？バグ？仕様ならばどこかにその旨の表示があってもいいし、高解像度へのリンクも表示してもらいたい。

ロック画面はアンロックボタンや時計に隠れない部分のチャネルを保存している。
ホーム画面はトップバー、アイコン、アイコンタイトル、ドック部分のチャネルを保存している。

通常、全面が白の壁紙を設定してもグラデーションやドックの陰影が自動的に表示される。