【目指せ脱・カメラ初心者】一眼練習、始めました。 ~実際に撮影に行ってみました~

 

こんにちは。
本日まで空白ではなく濃密な2ヶ月を過ごしておりました、デザイナのTです。
 

さてそんな濃密な2ヶ月の間、なんと実際に撮影をさせていただく機会がありました。
 

デザインにも携わっている身なので、
頭にはぼんやりと「こんな構図の画がほしいなぁ」とか
「あんな自然感のある画入れたいなぁ」というものがあり、
その素材を自分で撮りに行く、というわけです。
 

「なんとなく欲しい画は把握してるし、なんとかなるでしょう」
なんて甘い考えが吹き飛ぶほどに始終軽いパニック状態だった人生初の撮影。
撮影したデータを見て、「アレ?こんな仕上がり…?」といった具合になってしまいました。
当初頭に思い描いていた「こんな構図」や「あんな自然感」はドコへ…
 

ですがかなり多くの教訓を得ることができ、非常にためにる経験となりました。
そこで今回は、撮影を通して初心者なりに気づいた点をまとめてみました。
 

1. 迷ってる暇はない!慣れないうちはある程度構図を決めて行く

 
img_00
 

基本、スタッフの方々のお忙しい時間を割いて撮影させていただくわけなので、
手際よくパッパと進めないとなりません。
また作業中の様子を撮る時にはベストなタイミングを狙いつつ、
邪魔にならないよう、かつ映してはいけないものはハブきつつ…
といった具合で短時間の中で瞬間的にシャッターを切ることが求められるようでした。
迷ってたらここでのカットがなくなってしまった…なんてことのないように、
ある程度基本の構図は決めておいた方がやりやすいのかなと思いました。
 

2. 意識的に足を動かす!色んな角度からの写真を撮っておく

 
img_01
 

撮影したデータを見返すと同じ構図の写真ばかりになってしまっており、
デザイン時に「これの逆向き欲しかったのに…!」という状況に何度も直面しました。
一度シャッターを切り始めるとずっとその場で固定してしまい、
なかなか足が動かないのです。
とにかく意識して、複数の角度からの写真を用意した方が、
後々デザイン作業の際に重宝するなと感じました。
 

3. 何気ない風景も写真に収めておく

 
img_02
 

いざデザイン作業にとりかかると、挿絵として画像を使用することが多々あります。
そんな時のために、必要な写真以外にもパシャリとしておくと
要所要所で使うことができるので便利だなぁと思いました。
特にイイカンジの物撮り写真は絵になるので、なかなか重宝するのではないでしょうか。
ここのエリアの撮影は終わったからいいかな、なんて気を抜かしていると
思わぬシャッターチャンスを逃してしまうかもしれません…
 

撮影中は取り合えずシャッターを切ることであっぷあっぷだった私は、
「設定わたわたいじってたら何も撮れずに終わる…!」な状態でした。
その点は頭のよいカメラさんがきちんとカバーをしてくれていましたが、
自分でももっとスキルを磨かないといけませんね。
次回はもっと余裕をもって取り組みたいものです。
(ちなみに同行された別の方のお写真は使いやすいものが多数でした。流石です・・)

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~F値いじってみました~

 

こんにちは。

1か月が過ぎ、ようやく仕事にも慣れ始めたあたりのデザイナTです。

 

 

今回は「F値」をいじって撮影してみました。

F値とはまわりの光を取り込む穴の大きさを数値化したもので、「絞り値」とも言われるものです。

 

F値は数値が大きいほど穴が小さくなり、光を取り込む量が少なくなります。

逆に数値が小さいほど光を取り込む量が多くなる、ということですね。

 

ちなみに先ほどの写真はF値4.0で撮影しています。

 

 

対してこちらはF値7.1。

これだけの差でこんなにも明るさが変わるとは!

 

今回は室内、更に白熱灯のもとだったので比較的暗めだったのかもしれません。

肉眼で見た状態よりもやや暗い印象になりますね。

これをより目で見たままの明るさに合わせるにはまだまだ調整が必要ですね・・・

これからどんどん腕を磨いていきたいと思います。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~ごあいさつ~

 

初めましてこんにちは。

メディカルデザイン入社ほやほやの新人デザイナTです。

 

突然ですが、「クオリティの高いWEBサイト」に欠かせないものって何でしょう?

レイアウト、色使い、タイポグラフィなど、様々な要素があると思います。

写真ひとつとっても、良いものであるか微妙であるかによってサイトのクオリティの高い低いを左右すると言っても過言ではありません。

 

弊社ではデザイン制作の際、病院の外観や機器、スタッフさんなどの写真を撮影して使用しています。

私自身、一眼を全く触ったことがないわけではありません。が、

明るくしたいだけなのに設定が見つからない…

そもそもこの数値何…?

とりあえずPhotoshopでどうにかしよう…

といった具合でカメラと意思疎通が図れず、理解度0のまま使用していました。・・

 

「こんな勿体ない使い方じゃステキな写真の一枚も撮れないじゃないの!」

という訳で本日より、一眼レフの使い方を学びつつ様々なノウハウをカメラ初心者の私が綴らせて頂きます。

 

 

本日は試し撮りということで、お隣の席のOさん(とても仕事がお早い)を被写体にさせていただきました。

これからよりアジのある写真を撮れるよう学んで参りますので、以後どうぞよろしくお願いいたします。

 

シネマグラフ・簡単・作り方・Photoshop

平井です。今日はシネマグラフの話。


シネマグラフについては
https://www.tumblr.com/search/%23cinemagraph
http://www.pinterest.com/search/pins/?q=cinemagraph
などを参照のこと。
一部分だけが動く写真、と思っておけばいいです。


近年のGIFアニメ再評価に乗じて、ほそぼそと流行しています。


まぁなんとなく作り方は想像つくんですが
どのくらいの手間でできるのか、
自分でやってみることにします。


まずは、素材を用意します。
とりあえずベランダに出て、外の景色をiPhoneでビデオ撮影すること10秒。

スクリーンショット 2014-07-04 23.50.36

PCで開いてみます。
手ブレがひどい。


動画の手ブレを補正するには…
調べるとAdobe Premiere CCでできるらしい。
さっそくダウンロードします。
これだけのために…と思わなくもないですがAdobe CC(月額5,000円)の恩恵ということで。

effect

「ワープスタビライザー」というビデオエフェクトで簡単にできましたが
撮るときに三脚使うなど、カメラを固定したほうがいいですね。

 


Photoshopで動画を開きます。
開けるの?と思うかもしれないけど普通に開けます。


「タイムライン」というパネルに読み込まれます。(「レイヤー1」)
使いたい範囲を「ワークエリア開始・終了」スライダーを動かして選択します。
最初と最後がループで繋がるようにします。


「時間インジケーター」をぐりぐりと動かしてみて、
基本になるフレームを選びます。
「結合部分をコピー」とかで新規レイヤー(「レイヤー2」)にペースト。
いったん非表示にしておきましょう。


もうひとつ新しいレイヤー(「レイヤー3」)を作って、
レイヤー1を見ながら、動かしたい要素が動くエリアだけをブラシツールとかで塗り塗り。
スクリーンショット 2014-07-04 23.44.11
なるべく狭いほうがかっこいいけど、あんまり気にせず適当に。


できたら、レイヤー3を選択範囲にして、レイヤー2をマスク。
選んだ範囲だけ、下にあるビデオレイヤー(「レイヤー1」)が見えるようにします。


おわり。
「WEB用に保存」で、GIF形式を選んで、ループオプションを「無限」にして保存。
ブラウザで確認しましょう。


ファイルサイズは軽いほうが観てもらいやすいので、

書き出しサイズは小さめにして、フレームレートも15fpsで充分かな。

チープなほうが味のある映像になるよ。とかなんとか。

シネマグラフ作例

確かにできたんですけど、どうもいまひとつ面白くないですね。
なぜでしょう。次回はその理由を書きます。たぶん。

毎月一冊無料のフォトブック作成アプリ

今年新卒入社しましたディレクション担当佐藤です。やっと仕事にも慣れてきました。
今回初めてこのブログを更新します。


昨年従兄弟夫婦の間に赤ちゃんが誕生しました!たまに会っていますが可愛くて仕方ないです。しかも成長も早いので会うたびに成長してて驚きが隠せません。
そんな従兄弟夫婦から毎月、成長経過を記したフォトブックが送られてくるようになりました。
このフォトブック、クオリティも高くどうやら個人で作っているわけではなさそう。


というわけで、気になって調べてみました。

「nohana」
http://nohana.jp/

なるほど、フォトブック作成サービスは数あれど
「nohana」では毎月1冊目が無料(+送料)で作成できるんですね!
1冊無料という運営会社さんはなかなかないので
まずは手軽に気軽に作ってみよう!という方にはもってこいではないでしょうか。

何故こんなに破格の運営をしているのかというと
フォトブック事業に参入しようとしているわけではなく、別の切り口で利益を出そうとしているからだそうですよ。

フォトブックの作り方はとても簡単。
アプリのダウンロード後、会員登録をして写真をアップロードするだけ。

(編集画面は以下参照。白い部分に写真が入ります。出来上がりイメージがわかりやすいです)
image

 

これなら三日坊主でも作れちゃいますね!

皆さんはスマホなどで撮った写真はどうされていますか?
私は待ち受け画面にするくらいで、データの山と化しています。

写真は整理して一冊にまとめた方が、見返す時もわかりやすいですよね。
昔は現像した写真を一枚一枚重たいアルバムに貼っていくという面倒な作業でしたが
今では写真をアップロードするだけという簡単作業になったと思うと、何だか感慨深いです(遠い目)


私も近いうちに利用してみようと思います。
皆さんも梅雨で外出も億劫なこの時期に、写真の整理をしてみるのは如何でしょうか?

続・アイコンフォント

すっかり梅雨入りしましたね。
昼休みにグァバジュースを買って、トロピカル気分で働いております、國宗です。

さて、以前岩井さんがアイコンフォントについて記事を書いていましたが、 今回はわかりやすく、もう少し深く掘り下げたアイコンフォントのお話をしたいと思います。

そもそもアイコンフォントって何なの?

アイコンフォントを分かりやすく説明しますと、 「機能のいっぱいある、アイコン集のフォントをブラウザ上で動かす」という事です。 これだけだと、まだ分かりにくいので、 まずはOpentypeというフォントの形式を説明します。

Opentypeとは……

Opentypeには、リガチャー(合字)、スウォッシュ(単語の頭や末にアクセントをつける)、分数など様々な機能があり、 これを使うと、ただキーボードで入力した文字がプロフェッショナルの組版に変わるのです。 リガチャーを例に上げますと、
例えば「Office」という文字を入力します。(illustrator CC、Adobe Garamond Premium proを使用)
欧文合字機能をONにすると……

Officeの「ffi」の部分が、1文字になりました。 これは、フォントの作り手側が意図的に「f」と「f」と「i」が入力された場合に1文字の「ffi」に変換しているのです。 fiやflの黒く中途半端な部分をなくし、本文を読みやすくさせるためです。

さて、これからアイコンフォントの話に移ります。今までの「ffi」を応用したのがアイコンフォントです。僕のよく使っている「Symbolset」のサイトです。

アニメーションの文字の部分をクリックするとテキスト入力に切り替わります。 この状態で「love」とキーボードで入力して下さい。

すると、「l」、「o」、「v」とここまでは、普通のテキストなのですが、
最後の「e」を入力すると「♥」になりました。

https://symbolset.com

これがアイコンフォントの使い方です。

まとめ

【メリット】

  • 画像の代わりにテキストを入力しているので、SEO的に良い。
  • ビットマップの画像データではないので、拡大縮小しても汚くならない。Retinaもバッチリ。
  • CSSでの色の変更や装飾も自由自在。

【デメリット】

  • IEでもWebフォントを読み込めますが、クロスブラウザでつかうには、
    様々な種類のアイコンフォント形式を読み込まないといけない。

また、僕は正しい使い方ではないのですが、アイコンフォントを通常のフォントとしてインストールし、 カンプデザインにも使ったりしています。
こうする事で、いちいちアイコン集を探す手間が省けるので、 重宝しています。 ただし、この場合は画像ファイルになってしまうので注意が必要ですね。

機会があれば是非お試しください。

Photoshopの簡単な数値変更

はじめまして、近頃WindowsからMacに移行してきてようやく慣れてきた渋谷です。

Coda2を使うためにMacに移ってきたのですが、Photoshop CCのいくつかのバグがMacでは発生しなかったのでほくほくしながら作業しております。

Photoshopは結構長い間使っているのですが、ほかのデザイナーと話をすると私の全く知らない機能を使っていることも多く、いまだに新鮮な発見があります。

 

ということで、今回はあまり使われてなさそうなPhotoshopの小技をば。
数値変更のドロップダウンの隣のアイコンで数値が変更できるというものです。

140522

このアイコンをドラッグで左右に動かそうとすると右の数値が上下するんです!
アイコンだけではなく、数値を入れるドロップダウンボックスの隣の文字(レイヤーの「不透明度」の文字など)にもほぼ実装されているようで、ちょうどいい大きさや不透明度を探るときには重宝しますね。

連続的に数値を変える方法はほかにもありますが、クリックする回数が少なくて済むので便利です。

 

ただ、同じようなインターフェイスを持っているイラストレーターには実装されていないようで、たまに動かそうとして動かないとイラっときます。

イラストレーターだけに。

 

…おあとがよろしいようで。

webフォントとアイコンフォントを使ってみました。

更新などを担当しています、岩井です。

 話題(ちょっとおそい?webフォント・アイコンフォントを使ってみました!

検索してみるとwebフォントもアイコンフォントも無料で提供されているサイトがいくつかありました。 今回はこちらを使ってみようと思います。

 

webフォント http://mplus.font-face.jp/

アイコンフォント http://fontello.com/

 

Continue reading