シネマグラフ・簡単・作り方・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で充分かな。

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

シネマグラフ作例

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

消せないパーティションを消す方法(Windows編)

先日iMacの液晶を壮絶に落としたシステム部の中村です。

液晶を落としたiMacさんは部品取りとして別のiMacさんの修理部品として余生を過ごす運命です。(既に電源ユニットが交換されて高周波音が1台のiMacから消えました)

こんにちは

弊社のシステム部は何から何までやってます!!

 

と そんな中、新しい方が入社されたり、更新の運用方法を変えたりするために、最近iMacのHDDを交換したり、メンテナンスを増えたのですが、

その際OSのクリーンインストールをする(USBからOS X Mavericks)を際にUSBBootさせるために、

USBのパーティションを複数に割ることがあるのですが、その際通常の操作では一つに戻せない場合があります。

そこで、消せないパーティションを消してしまう(Boot領域用に200Mサイズのもの)方法を記載します。

Windows7 コマンドプロンプトで、DIskPart  ( c:\>diskpart ) をいう標準コマンドを使います。

図は 今回の作業を一まとめにした図です。

DiskPart

まず list disk で今認識しているディスクを調べます。(これはWindows のディスク管理でも番号を調べることが可能です)

ここでは、USBが ディスク2と認識されているので、

select disk 2 を入力し選択させます。

次にそのディスクの内部のパーティションをリストアップします。

list partition と入力し消したいパーティションが1と判ったので、

select partition 1 と入力し

強制削除コマンドを打ち込みます。

delete partition override

この overrideが重要です!!これをつけないと消せません!

この方法で、消せないパーティションを強制的に削除できます。

MACの起動USBDISKにしてしまうと、普通に戻すにひとてま必要になりますが、これなら、Windowsで楽に直せるので、覚えておいてもいいかなと・・・

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

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


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


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

「nohana」
http://nohana.jp/

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

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

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

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

 

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

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

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


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

iPhoneが壊れても大丈夫!無料で修理(交換)するための保証

title

 

 

 

 

 

わたしの中ではスマホ=iPhoneです。他のスマホにまったく興味がありません。

こんにちは、事務職からディレクション担当になりました木元です。


年々酒癖がわるくなるわたし。
この間えいやー!と道路にiPhoneを叩きつけてしまい、(スライドロックが解除できないほど)画面がバッキバキになりました。

Bnx9xpIIIAA2JqJ

ああかわいそう。

「iPhoneが壊れる=ウン万円かかる」というイメージだったので、びくびくしながらアップルストアに行きました(要予約)。

(ちなみに軽く調べた結果、私の所持するiPhone 5cは修理サービス料金26,800円、中古で白ロムのiPhone 5cを買おうとすると3万円超。)


が、しかし、0円でタダで無料で新品のiPhoneになりました!

つまり色々と保証してくれるサービスがあるんですね!ということ。(常識?)
以下まとめです。

 

midasi1

 

 

 

そもそも「すべてのiPhoneには、製品購入後1年間のハードウェア製品限定保証と90日間の無償電話サポートがついています。」
のでiPhone 5s、iPhone 5cだと1年間は7,800円(税込)で修理や交換などのサービスが受けられます。
(iPhone 5、iPhone 4Sは4,400円(税込))

1年以内なら特に付加サービスを付けなくても7,800円だせば直してくれる、もしくは新品に交換してくれます。(ただし原形を留めていないと26,800円らしいです。)

 

midasi2

 

 

 

上記の保証が『AppleCare+for iPhone』に加入することで、購入日から2年間に延長できます。

しかし『AppleCare+for iPhone』は月額料4百円前後×最大2年間かかります。最大1万円前後(24回払い)。
携帯電話会社によって微妙に値段が異なります。なぜ?

□ドコモ:月額料金 税抜392円、最大9,408円(24回払い)
□ソフトバンク:月額料金 423円(税込?)、最大10,152円(24回払い)
□au:月額料金 初回:200円(税?)、2~24回目:400円(税?)、最大9,400円(税不明)(24回払い)
□Apple Storeで購入の場合、携帯電話会社に関わらず9,400円の一括払いのみ


新機種が出るたびに変える方など、1年以内に機種変更を考えている人は『AppleCare+for iPhone』に入る必要がそれほどありません。

注意すべきは『AppleCare+for iPhone』に加入してもしなくても、保証が「最大2回まで」というところですが、普通の人は2年で2回もバッキバキにすることはないでしょう。

 

midasi3

 

 

 

上記の保証じゃ「0円でタダで無料で」じゃないじゃないか!と思われた方、その通りです。
私がなぜお金を払わすに済んだか(正確には1回払ったけど戻ってきた)は、携帯電話会社の付加サービスに加入していたからです。

私の携帯キャリアはauなので、契約時に『auスマートパス』に加入していました。
月額情報料:372円 (初回登録日より30日間無料)

『auスマートパス』では、iPhone/iPad故障(自損、水没)時の修理代金をサポートしてくれます。
・iPhone4s/5、iPad 最大4,074円/回(税抜)
・iPhone5s/5c 最大7,222円/回(税抜)
(iPhoneご購入から2年間で2回まで)

参照:http://pass.auone.jp/security

つまり、アップルストアで7,800円を支払ってiPhoneを交換してもらい、その後auに申請すると、キャッシュバックが受けられるのです!素晴らしい。素晴らしいです。(ちゃんとアップルストアでその旨教えてくれます。)

※※※ただし、『AppleCare+』に加入していることが条件のようですので、ご注意を!


□ソフトバンクでは『あんしん保証パック(i)』という月額500円のサービスで同様の補償が受けられます。
参照:http://www.softbank.jp/mobile/iphone/support/warranty/backupservicepack/

□ドコモでも、『ケータイ補償サービス for iPhone』という月額500円or600円のサービスで同様の補償が受けられます。
参照:https://www.nttdocomo.co.jp/iphone/support/delivery/

※各携帯電話会社によって条件がありますので、ご注意を。

 

 

続・アイコンフォント

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

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

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

アイコンフォントを分かりやすく説明しますと、 「機能のいっぱいある、アイコン集のフォントをブラウザ上で動かす」という事です。 これだけだと、まだ分かりにくいので、 まずは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フォントを読み込めますが、クロスブラウザでつかうには、
    様々な種類のアイコンフォント形式を読み込まないといけない。

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

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

Spotlight

 この前、Grant Skinnerさんの話きいてきたので、CreateJSについて書こうと思いましたが、勉強不足で書けませんでした。イワイです。

 

仕切り直して今回は、、、

 全然使いこなせていない Spotlight についてまとめておこうと思います。

起動   control + スペースキー

01

 

 

Continue reading

【Mac】ウインドウの画面分割をきっちりとやってくれる無料アプリ「Shiftit」

 こんにちは、JAチームで主に更新業務を担当している、植村です。今回も前回に引き続き、おすすめフリーソフトの紹介です。  普段PCで作業をする時、気づいたら画面にウインドウをたくさん開いていることはよくあると思います。自分の場合、使わないウインドウはなるべく閉じるようにしていますが、それでも平均5〜6個のウインドウは常に開いているものです。そこで、重要になってくるのが画面分割レイアウトですね。ひとつひとつのウインドウをドラッグして移動させるのってちょっと面倒くさいですよね。そこで、このアプリの登場です↓  

アイコン

   このアプリ、どんなものかといいますと「キーボードの操作のみで、ウインドウをディスプレイの右に寄せたり左に寄せたり中央に配置したりできるアプリ」でございます。 なんだかたいしたことないアプリのように感じますが、使い始めたらもうこのアプリなしでは生きていけません。

 

<インストール&導入>

 

 まずは本家サイトから.zipファイルをDL→解凍します↓

DL画面

 アプリを解凍→インストールできましたら、Mac側でひとつだけ設定をします。「システム環境設定」→「ユニバーサルアクセス」に入り↓

システム環境設定

 

 「補助装置にアクセスできるようにする」にチェックマークを入れます↓

ユニバーサル

これで準備完了です。

 

 正常にインストールできたらデスクトップ上のツールバーに「Shift」の文字がでていると思います↓

画面ツールバー

 

メニューはこんな感じ↓

メニュー

 

<使い方>

 移動させたいウインドウをアクティブにして、自分が動かしたい場所に該当するショートカットキーを押せばOKです

 

(例)2つのウインドウを左右に配置した場合↓

画面全体

 

 もう1ピクセルの無駄もないほどビッチリと画面が左右に分割されています。狭いスペースを寸分の無駄もなく活用する、なんだかとても日本人向きなアプリですね・・。

 

 ということで、ウインドウ画面分割のお役立ちソフト「Shiftit」の紹介でした。

 

 「Shiftit」はMac専用の無料アプリですが、Windowsだと似た様なソフトで「Aero Snap」というものがあるみたいです。(Windows7だと標準でこの機能が搭載しているらしい・・)

 

 ぜひ、お試しください。

 

 

【無料!】ファイル圧縮オンラインサービスのまとめ

こんにちは。デザインおよびコーディング担当の黒木です。

弊社では様々なウェブサイトの運営管理を行っており、「このファイルをホームページにアップしてください」と、お客様から日々、様々なファイルをお送り頂いております。

jpgファイルであったり、Wordファイルであったり、PDFファイルであったり形式は様々ですが、中にはファイルサイズが数十メガバイトにも達するものもあります(PDFファイルの場合がほとんどですが)。

そんな時、如何にファイルサイズを縮小・圧縮などの軽量化を図って、サイトにアップロードするかが、大変悩ましいところです。

今は、スマホなどのモバイルデバイスでサイトを閲覧する方も多いので、やはり重いファイルはサイズを削った上でアップロードし、ウェブサイト全体をできるだけ軽量化したいものですね。

そこで今回は、ファイルサイズを軽量化してくれる便利なオンラインサービスを、ファイルの形式ごとにご紹介したいと思います。

jpgファイルを軽量化!

JPEGmini - Your photos on a diet!

インターフェイスのわかりやすさもさることながら、トップページのデモンストレーションも非常にわかりやすく、面白い仕掛けが施されています。

JPEG Optimizer - Compress and Resize Your Digital Photos

こちらは、どのくらい画質を落とすか、どのくらいリサイズするかを入力する事ができます。

pngファイルを軽量化!!

TinyPNG – Compress PNG images while preserving transparency

ややリアルなパンダのキャラがユニーク。軽量化が完了すると…?

Compress PNG Images Online

こちらも画質の圧縮度合を選択する事ができます。画像に含まれる色数の増減も選択できるのが特徴。使い方がややわかりづらいかもしれません(画像をドラッグ&ドロップしたら、「UPLOAD QUEUE」をクリック→アップした画像のサムネイルをクリック!)。

PDFファイルを軽量化!!!

Compress PDF – Reduce your PDF Online for Free

デザインや軽量化する際のアニメーションが素敵です。使い方もシンプル。

Compress PDF Files Online!

非常に細かく設定を変更できる点がポイント。しかし5MBまでしかアップロードできないようです。

どれも無料かつ簡単に使用できるサービスですので、試してみてはいかがでしょうか。

Photoshopの簡単な数値変更

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

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

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

 

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

140522

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

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

 

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

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

 

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

WordPressでドメイン関連の設定を一気に変えたいときのSQL

システム部の鈴木です。

5月に入ってますます暑くなってきましたね。
こういう時こそ、普段なかなか動かせない身体を動かしたいもの。
ということで家から地元の駅までの短い距離ですが、自転車通勤を再開しました。

距離は短いですが、キツめの坂を上って下って、また上って下って上って・・・
の繰り返しなのでなかなか脚にきます。。

冬は防寒してても自転車は寒いのでバスに乗ってましたが
今の時期は気持が良いので、このままちゃんと続けたいものです。

 

さて、今回はWordPressのサイトを別のサーバに移したい場合の子ネタです。

wp_logo


WordPressを別サーバに移動するとき、新サーバ側にはこれらを移動します。

  1. サイトのhtmlドキュメントや画像、プログラム等一式
  2. DB(MySQL)のデータ

それも行ったうえで、wp-config.php で新サーバのDB設定に書き換えたり
新サーバ側での一時的なテスト用にドメインを設定したりといったことをします。

現在のサーバはひとまずそのままにして、移行して一通りの動作確認をしてから
DNSを切り替えるなりして新サーバ側を公開する、ってパターンが多いと思いますが
新サーバ側でテスト用のドメインを設定していた場合に
WordPress の記事ページへのリンクをたどっても元々のドメインのURLで表示されてしまいます。

これはWordPress側で各ページのパーマリンクがDBに記録されているからなのですが、
動作確認をするにはちょっとこれでは作業がしにくいですね。

 

そこで、MySQLで以下のクエリを実行して、一気にパーマリンクなどの設定を変えてしまいましょう。

[php]
UPDATE wp_options SET option_value = REPLACE(option_value, ‘http://hogehoge.com’, ‘http://new.hogehoge.com’);
UPDATE wp_posts SET guid = REPLACE(guid, ‘http://hogehoge.com’, ‘http://new.hogehoge.com’);
[/php]

 

 

2つのSQLがありますが、どちらも'http://hogehoge.com'から'http://new.hogehoge.com'に変更したい場合の例です。

最初のものはWordPress管理画面から設定できるドメインの設定部分を変えるものです。
記事や固定ページなどのパーマリンクは2つ目のSQLで変更します。

これでドメインが変わってもリンクが切れること無くサイトのチェックが行えます。