三階ラボ

Archive for the photoshop Tag

Home Next

downloads iPhone 4 Illustration ver.01

Tags:
, , ,

iPhone 4 Illustration

こんにちは。開発者さんラブな宮澤です。Twitterやってます。よろしくです。
すっかり忘れていたのですが、毎度おなじみの iPhone 4 の Illustratorデータを作成しました。
ウェブ用/印刷用Illustratorファイル、ウェブ用/印刷用Photoshopファイル、PNGファイルを用意しましたので、用途に合わせて使い分けてください。

iPhone 4 Illustration ファイル構成

  • ファイル名に「print」と書かれているファイルは印刷用ファイルです。iPhone 4本体が実寸で描かれています。
  • ファイル名に「web」と書かれているファイルはウェブ用ファイルです。iPhone 4のスクリーンサイズに合わせて描かれています。メリっとした表示になるように、ピクセル単位で調整してあります。

iPhone 4 本体部分のアウトラインデータはとても少なくしてあります。

iPhone 4 Illustrator Outline

今回は、「いかにオブジェクトを減らしてアピアランスで絵を描くか!」という、どうでも良さげなところをこだわってみました。。。

iPhone 4 Illustration ver.01


downloads iPod touch illustration

Tags:
,

このエントリーはfoobar ontheheadから読み込んだものです。レイアウトや表示に乱れがあるかもしれませんが、ご了承ください。

iPod touchをゴニョゴニョして楽しんでいるのですが、スクリーンショットも撮れるようになって俄然モチベーションが上がってきました!!(何の?)。

スクリーンショットの画面だけをそのまま掲載するよりも、iPod touchの中に表示されてる感じがあった方がいいですよね。いろいろ検索してもそういう画像が見つからなかったので、ちょっと描いてみました。これはロック解除のスクリーンショットの裏に描いたiPod touchのイラストを配置した画像です。

iPod touch illustration

やっぱり原寸のピクセルで表示すると素敵ですね〜。ちょっと大きいですけど。

一人で使ってても仕方がないので、Photoshopファイル(レイヤー付き)、ドロップシャドー無しの透過PNG、ドロップシャドー有りの透過PNGをそれぞれ用意しました。ダウンロードして試してみてください。もしあなたのブログで使用した際はコメントで教えてくれるとうれしいです。

iPod touch illustration
ipod_touch_illust.zip (325KB)

追記

Photoshopの画像解像度で画像の再サンプルのチェックを外し、解像度を「160pixel/inch」にすると、実物と同じ大きさで印刷できますよ。


tips 画像を水平にする

Tags:

このエントリーはfoobar ontheheadから読み込んだものです。レイアウトや表示に乱れがあるかもしれませんが、ご了承ください。

サンプル画像

傾いてしまっている写真を水平にしたいとき、Photoshopのものさしツールを使うと簡単に修正することができます。

まず、基準となりそうな水平な部分を探し、「ものさしツール」でドラッグします。

ものさしツールでドラッグ

その状態で、「イメージ」→「カンバスの回転」→「角度入力…」を選択すると、水平にするための角度が自動的に入力されています。

自動で数値が入力

んで、OK。

完成図


tips スクロールホイールを使ったスクロール

Tags:
, , , ,

このエントリーはfoobar ontheheadから読み込んだものです。レイアウトや表示に乱れがあるかもしれませんが、ご了承ください。

スクロールホイール

スクロールホイールを使って、PhotoshopとIllustratorのカンバス/ドキュメントをスクロールさせる方法です。
チルト機能が搭載されたマウスであれば、左右にスクロールさせることができますが、チルト機能が無い!という方には重宝する機能です。

  • 左にスクロール
    Command + Scroll Up
  • 右にスクロール
    Command + Scroll Down

こんだけです….
左手の親指が常にCommandキーの上に置いてあるような方でしたら、すぐに慣れると思います。
ボクはチルト機能つきマウスを使っていますが、横スクロールの場合は上記の機能を使い、左右チルトには別のショートカットを割り当ててあります。

ついでにShiftキーを使うと、ページ(または表示)単位で一気にスクロールさせることもできます。

  • ページ/表示単位で上にスクロール
    Shift + Scroll Up
  • ページ/表示単位で下にスクロール
    Shift + Scroll Down
  • ページ/表示単位で左にスクロール
    Command + Shift + Scroll Up
  • ページ/表示単位で右にスクロール
    Command + Shift + Scroll Down

ちなみに、Photoshopの環境設定で「スクロールホイールでズーム」にチェックを入れている場合、この機能は使えません。あたりまえか。

追記:

またまた書き忘れました….

Optionキーを使うと、ズームイン/ズームアウトさせることもできます。

  • ズームイン
    Option + Scroll Up
  • ズームアウト
    Option + Scroll Down

ただし、Photoshopでこれを使うと、拡大/縮小比率が微妙な数値(161.6%とか)になってしまうので、ちと不便です。

最後に、今回は手持ちのCS2とCS3で動作確認しましたが、これら以前のバージョンでは違うショートカットかもしれないでお気を付けてください。
もし他のバージョンをお持ちで検証していただけるステキな方がいましたら、結果をこの投稿にまとめてアップしますので、教えていただけるとうれしいです。


tips ガイドを引く

Tags:
, ,

このエントリーはfoobar ontheheadから読み込んだものです。レイアウトや表示に乱れがあるかもしれませんが、ご了承ください。

ガイドを引く

PhotoshopとIllustratorでガイドを引くときのちょっとした便利な方法です。
基本的な使い方は誰でも知ってると思うので省略します。

普通、垂直方向のガイドラインを引くときは左側の定規から、水平方向の場合は上側の定規からガイドを引っ張ってきます。
この使い方でも別に問題は無いのですが、サイズの大きい書類の右(または下)あたりにガイドを引くとき、いちいち左(または上)の定規からドラッグするのが億劫になるときがります。

こんなときは、Optionキーが活躍します。

  • カンバス/ドキュメントの上側にある定規から垂直方向のガイドラインを引く
    上側の定規から
    Option + Drag
  • カンバス/ドキュメントの左部にある定規から水平方向のガイドラインを引く
    左側の定規から
    Option + Drag

地味な機能ですが、結構重宝するんですよね。
ちなみに、Optionキーを離せば、元方向のガイドに戻ります。

ついでですが、
Shiftキーを使うと、一定間隔でスナップしてくれます。

Photoshopのカンバスの表示比率が

  • 25%, 33.3% の場合、20px毎にスナップ
  • 50%, 66.7% の場合、10px毎にスナップ
  • 100%, 200% の場合、5px毎にスナップ
  • 300%, 400% の場合、3px毎にスナップ
  • 500% 以上の場合、1px毎にスナップ

Illustratorのドキュメントの表示比率が

  • 25%, 33.3% の場合、36px毎にスナップ
  • 50%, 66.7% の場合、12px毎にスナップ
  • 100%, 150%, 200%, 300% の場合、6px毎にスナップ
  • 400%, 600% の場合、2px毎にスナップ
  • 800% 以上の場合、1px毎にスナップ

といった具合です。

ウェブの作業をしているとピクセル単位で編集しなければならないので、この機能もかなり活躍します。

同じCS3でも、FlashやFireworksではこの(OptionやShiftを併用する)ガイド機能は使えないようです。旧Macromedia製品のガイドの扱いがどうも好きになれないので、はやいところ統一して欲しいもんです。


Top Next