やっぱりPinterestはデザイナーの引き出しだった

pinterest

こんにちは!YOUKNOWです。

デザイン業界で、いまごたごたがあるようですね。

そのごたごたの中にキラリと光るPinterestというワードがあったので再度ご紹介。

そう、今回のテーマは

なんだやっぱりPinterestは神だったか

Pinterestはデザイナーの引き出し

デザイナーの間では眺めているだけで勉強になると有名で、日本でも一部業界で人気があるサービスだ。
引用元 : netgeek

全くその通りで、眺めているだけで勉強になり(主に身の回りの)デザイナーの中で大流行中だ。

デザインを検索・収集するのにこのPinterest以上のサービスは今のところないと思う。

あえて言おうPinterestはデザイナーのスクラップブックだと

よく学校等でデザインの引き出しを増やすためにスクラップブックを作るべきだ。なんて教育がなされています。

それでいざスクラップブックを作っていくと、「じゃあそれを見せ合ってお互いを採点しよう」みたいな流れに。

この授業、かなり好きで理にもかなっているのですが、手間がかかることやかさばってしまうこと、整理が非常にしにくいことに気づきます。

なによりスクラップブックを作って保存しておくだけじゃ、自分の好みのデザインの引き出ししか増えないのです。

そこでPinterestです。Pinterestならば他の人が作ったスクラップブックを自由に見ることが出来ます。
更にそこにある気に入った作品を自分のスクラップブックに継ぎ足していくことができるんです。

そうしていくと自分のスクラップブックがどんどんと変化していき、結果として引き出しが増えることにつながるのではないのかなーと考えています。

デザインは見たもの全てが勉強になる

なんて言われています。けれども、クオリティが高いものや工夫に満ちたものを見ることがより効果的な勉強法だと感じています。

スクラップブックのように、その人その人の好きというフィルターを通ったものだけを見れるサービスはデザインの勉強やデザインの引き出しを増やす方法として非常に効果的だと思います。

Photoshopの画像アセットで余白そのままで書き出しする方法

photoshop 画像アセット 余白 そのまま やり方

こんにちは!YOUKNOWです。

明日からはお盆なのでお休み中は更新を停止して、実家に帰省します。

そんなことよりも

Photoshopの画像アセットめっちゃ便利

なのですが、痒い所に手が届かないんだよなぁと思っていて、個人ではずっとSlicyを使っていました。

しかしお仕事だとインストールできるアプリケーションに制限があるため、画像アセットを使い始めました。

画像アセットには微妙な所があって、そのうちの一つが大きさ(余白を保ったまま)書き出しして欲しいのに!という時です。

画像アセットは、オブジェクトのサイズを基準にして書き出しを行うため、オブジェクトの大きさで書き出しされてしまい、意図的に余白を含ませたい時などに非常に不便です。

今回はその余白を保ったまま書き出す方法をご紹介します。

※PhotoshopCC2014以上が対象です。

Photoshopの画像アセットで余白そのままで書き出しする方法

とはいってもすっごく簡単ですが、

書き出ししたいレイヤー(グループ)にベクトルマスクを追加するだけです。

少し詳しく説明すると、書き出したいレイヤー(グループ)に画像アセット用の名前をつけて、(例:btn_assets.png)そのレイヤー(グループ)にベクトルマスクを追加します。

photoshop 画像アセット 余白 そのまま やり方

ベクトルマスクの追加方法は、ベクトルマスクを追加したいレイヤー(グループ)を選んで、レイヤーウィンドウの下の方にある■の中に●が書いてあるマークをクリックするだけです。

photoshop 画像アセット 余白 そのまま やり方

こうなればベクトルマスクが追加されています。

後はそのまま画像アセットのフォルダの中に、余白が保持されたまま書き出しされた画像があるはずです。

【改訂版】就活用WEBデザイナー用紙ポートフォリオの作り方

ポートフォリオ デザイン レイアウト

こんにちは!YOUKNOWです。

以前書いた記事が読まれているので、よりわかりやすく書き直したいと思います。

以前の記事は、WEBと紙がごっちゃになっていてわかりづらかったですね….。
なので今回は反省し、紙とWEBを別々に書くことにしました。

今回はWEBデザイナーのポートフォリオ..ののほうについて、レイアウトやデザイン等の事も含めて書きたいと思います。

ポートフォリオとは?

WEBデザイナー ポートフォリオ 作り方

MAC DESIGN ACADEMY様より引用

デザイナーが今まで作ってきた作品等をまとめた作品集をポートフォリオと呼びます。
ポートフォリオは自分ができることや得意な事・実績をアピールすることが出来、採用時の取っ掛かりになる大事なものです。

デザイナー等の就活時に求められることが多く、企業側は大体のスキルをこのポートフォリオで判断します。

WEBデザイナーの紙ポートフォリオの作り方

WEBデザイナーの紙ポートフォリオの作り方の手順です。(人よって手順は違います。以下はあくまで一例です。)
ステップごとに説明していきます!

  1. どのような紙ポートフォリオにしたいのかを決める
  2. 自分が載せることができる作品のリストアップ
  3. クオリティが低い作品や、やり残した作品のブラッシュアップ
  4. レイアウト作成
  5. デザイン
  6. 完成

Step1.どのような紙ポートフォリオにしたいのかを決める

キンコーズ様より引用

キンコーズ様より引用

どのような紙ポートフォリオにしたいのかを、まず作り始める前段階に決めておくと良いと思います。

出来上がりを考えるまだ楽しいと思えるギリギリの時期です。

サイズ

サイズはA4、WEBデザインは縦長が多いので縦のレイアウトをオススメします。

A4サイズをオススメする理由は、他の書類サイズと同じサイズで、相手が保管しやすいかなという考えからです。

サイズが大きいので載せる作品も大きく出来、かつ縦長になりやすいWEBデザインを全て入れやすいA3もありだとは思います。

しかしA4サイズは面接時に持っていくのにもラクなサイズだし、郵送時にもラクかつ安い。履歴書とかのサイズとも一致します。
肝心の内容もA4サイズでもレイアウトをキチンとすればA3サイズに負けない迫力になります。

出来上がりの種類

  • 自分で手製本
  • キンコーズ等の製本サービス
  • クリアファイルでファイリング

出来上がりの種類も様々です。

自分はクリアファイルでファイリングして行きました。
なるべく透明度が高いクリアファイルのほうがキレイに見えるのでオススメです。

自分はセキセイ プレゼンホルダー スーパークリヤーを使わせて頂きました。
透明度も高いし、表紙も無地なのでシンプルで良かったです。

表紙を付けたい同級生たちは無印で購入している人が多かったです。

Step2.自分が載せることができる作品のリストアップ

ポートフォリオ デザイン 作り方

クリ博ナビ様より引用

自分がいったいいくつの作品を載せることができるのかを確認しましょう。
少なかった人も多いのではないでしょうか…!もちろん僕も少なかったです。

だからといって闇雲に作品は多く入れれば入れるほど良いというわけではありません。自分の自信があるものだけ入れたほうがよいと思います。

自信のない作品は面接時につっこまれた時にタジタジになります(笑)
面接時に味方になってくれるような作品を選定しましょう!

作品の内容にもよりますが、大体10作品-20作品の間で良いと思います。
特にWEBサイトだと作業量が多いので、そこまで数は作れないと思います。グラフィックとかバナーとかで作品数を増やしましょう!

作品数が少ないなーと思っても、数は少なくても魅せ方でなんとでもなります!大丈夫です!

ただ最低10作品ほどはあったほうがよいと思います。(WEBサイト以外を含め)

ポートフォリオの参考要素

WEBデザイナー ポートフォリオ 作り方

自己紹介ページ

  • 名前や年齢・出身学校等の情報
  • 自己紹介・自己アピール文
  • スキル(Photoshop/illustrator/HTML等)
  • WEB版ポートフォリオのURL等
  • その他アピールしたいこと等

どこまでやるのか正解か?なんて議論が出るほど多様化しているWEBデザイナー
デザインスキル、adobe製品の使い方、HTML.CSS.JavaScript.jQuery…Git…..Sass..php..wordpress…うっ頭が…

そんなこんなで多様化しすぎてるので、自分ができることを自己紹介ページに添えておくと親切だと思います。

作品ページ

  • 作品名
  • 作品スクリーンショット
  • 担当した箇所
  • 工夫点やコンセプト
  • 補足事項(URLやQRコード等)

Step3.クオリティが低い作品や、やり残した作品のブラッシュアップ

意外と勘違いしてしまいがちなのがここ。
当時の自分からここまで成長したんだ!とあえて当時作ったままで出してみようと考える方多いと思います。(自分もそうでした)

出す直前で、他の人にポートフォリオを見てもらった時に直したほうが良いと言ってくれたので、気づくことが出来ました。

確かに成長具合を見せて、伸びしろを感じさせるというのは割りと理にかなっている気がするのですが、今思うと

そもそもそこまで考慮して見てくれる人は多くないという問題と、
学生時代に作るデザインとお仕事で作るデザインは全然違う為、ポートフォリオでより重要になるのは、この子できるな…!大丈夫そうだな…!という安心の部分が欲しいんだろうなと思うためです。

Step4.レイアウト作成

とりあえず2案サンプルとして作ってみました。(1案は以前の記事と同じ)

A案
ポートフォリオ レイアウト デザイン

B案

ポートフォリオ デザイン レイアウト

ポートフォリオに載せたいと思っていた要素を全て載せつつ、キレイに見やすくなるようにレイアウトします。
今回は参考要素として、作品名、作品スクリーンショット、担当箇所、工夫点やコンセプト、補足事項を入れました(B案)。

Step5.デザイン作成

レイアウトを元にデザインを作っていきます。

A案
portpholio デザイン レイアウト

B案

ポートフォリオ デザイン レイアウト

試しにこんな感じでデザインしてみました。

B案の方は自分が仕事上の案件ごとに作ったものを実際にまとめているカタチです。

WEBデザイナーのポートフォリオデザインのコツ

モックアップの利用
WEBサイトをブラウザ意外で見せるってなかなか難しい気がします。
今回もモックアップを利用して制作しました。モックアップを利用するといっきにそれらしくなります。

フォント

ポートフォリオ デザイン フォント

mplus 2-light mplus-fonts.より引用


フォントでも印象が大きく変化します。

オススメはMacに標準で入っているヒラギノ角ゴです。
フリーフォントでオススメはNotoSunsFontM+Fontです。

ちなみにA案では多くの場所にM+Fontを利用しています。

整列
ポートフォリオ デザイン レイアウト
要素の高さを揃えてみたり、端を揃えることでキレイに魅せることが出来ます。

Step5.完成

完成です。

作品まとめるだけだし、簡単っしょ!と思いがちなポートフォリオですが、なかなか地味で大変な作業です。

早め早めから手を付けておいたほうが…いや…手を付けられないんですよね…。自分もかなりギリギリで作った記憶が…。

以外とポートフォリオの作り方ってなかったのを覚えているので、これから作る人はぜひ参考にしてみてください。

【Photoshop】一括で複数のレイヤーの設定を変えることができるPhotoshopプラグイン【Ditto】

Ditto

以前紹介したPhotoshopプラグインのDittoですが、使ってみた感じが凄く良い感じなので再度ご紹介します。

というよりこれのお陰で修正時にかなり助けられたのでお礼を兼ねて再度…

Ditto

Dittoとは

DittoはPhothoshopの無料プラグイン。

レイヤーにIDを指定し、IDに対して一括で設定を適用するプラグインです。

WEBデザインでコーディングを行っている人にはわかりやすいかもしれません。
CSSのイメージです。

利用できる環境はPhotoshop CC2015からです。

設定できるパラメータ

  • 塗り
  • 文字列
  • 表示・非表示
  • フォントサイズ
  • フォントの種類
  • フォントの色
  • 行の高さ

Dittoのインストール方法

Dittoのインストール方法をご紹介します。
僕がMacを使用しているため、Macのインストール方法になっています。

ただ、Windowsでもほとんど同じ手順でインストールできると思います。

まず、こちらのページの下のほうにあるDownloadボタンをクリックして、Dittoをダウンロードして下さい。

ダウンロードしたzipを解凍すると以下のファイルが出てきます。

  • ASSETSフォルダ
  • installer.jsx
  • README.md

その中のinstaller.jsxとASSETSフォルダを、アプリケーション > Photoshop CC 2015 > Presets > Scriptsの中に入れます。

そしてPhotoshopを起動します。

Photoshop Ditto インストール やり方

Photoshopのメニューからファイル > スクリプト > installerを選択します。

するとダイアログが何度か出ますので、全てOKで進めます。

ダイアログがでなくなったら、Photoshopを再起動します。

再起動し、Photoshopのメニューからウィンドウ > エクステンション > DittoのDittoが表示されていれば成功です。DittoをクリックしてDittoを起動して下さい。

Dittoの使い方

かなり個人的な使い方になってしまいますが、いくつか使用例をご紹介します。

#mainColor #accsentColor 等のIDを指定し、メインカラーやアクセントカラー等の変更が入った時に塗りの色等を一斉に変更できるようにしています。

設定できるパラーメータは数あれど、正直使いこなしているのは塗りのパラメータとフォントサイズと行の高さです。
pc_fontSizeやsp_fontSize等のIDを作成し、pc_fontSizeには14px sp_fontSizeには24pxを設定するなど案件ごとにカスタマイズしています。

表示非表示は、ボタンの要素等のon_offに使えるかなぁといった感じです。

まとめ

無料なので一度試してみると良いと思います。
副産物としてレイヤーをキレイにする癖も身につくかもしれません

WEBデザイナーにとってのWindows10について

こんにちは!YOUKNOWです。

以前から頭を悩ませてきた、クライアントからのWindowsとMacで見え方が違う。Windowsのほうがきたないという問題。

その問題の多くは解像度の違いや色々言われているわけですが、個人的に一番大きいと思っている(というか多分そう)なのはフォントだと考えられています。

Macには標準でヒラギノ角ゴが入っていますが、WindowsはMSPゴシックだったり、メイリオだったりとMacとWindowsで違うんですよね。
文字のアンチエイリアスのかかり方もMacとWindowsでは違う

 Windows から見るMSPゴシック

Windows から見るMSPゴシック : WEBROCKETSマガジン様より引用

昔からインターネットを触っている人は馴染みぶかいこのアンチエイリアスのかかっていない文字

そうしたWindowsとMacの差異を少しでも解消しようと、我々WEBデザイナー・マークアップエンジニア一同は、CSS3のアンチエイリアスなどで影の見えない努力をし頑張ってきた。

その影の努力のやり方は以下のコードを追加し、アンチエイリアスをかけたい部分にクラスを追加すれば良い。これだけでWindowsでもアンチエイリアスのかかった文字が実現できる

しかし大きな問題点はMacとWindowsで同一のフォントがなかったところによる問題が大きい

アンチエイリアスをいくらかけようが、そもそも文字そのものの形自体が違っているのだ。

これでは決定的な問題解決にはなっていない


「MacとWindowsでは搭載されているフォントが違いまして….」
「そこをなんとかするのがお仕事なんじゃないんですかねぇ…?」
「いえ..ですから…」

となってしまう。(もちろん誇張表現)実際はちゃんと説明して納得していただいてます。

しかしこの度Windows10が発表されこの問題についにお別れを告げる日が近づいてきた感が…!

Windows10 / OS X Mavericks で同一フォント「遊ゴシック」が標準搭載に

Windows10 OS X Mavericks 遊ゴシック

実はMacには一足さきのOS OS X Mavericksにて既に遊ゴシックが標準搭載されていました!

そしてこの度Windows10になることにより、Windowsにも遂に遊ゴシックが搭載!!

遊ゴシック

そのため、ようやくWindowsとMacで同一フォントが標準搭載されたことに!!!

今後のWEBデザインの標準は「遊ゴシック」に?

いままでカンプ上でのテキスト部分には、クライアント様の環境によってヒラギノ角ゴかメイリオのどちらかを指定してきましたが、今後は遊ゴシックに統一しても良いかもしれません。

またiPhoneでもiOS6以上であれば遊ゴシックは利用可能!使うしかない…!!

遊ゴシックも踏まえて、CSSのフォント指定を見直しました。

ただしまだWindows10じゃない人もたくさんいるため、自分はCSSでのフォント指定は、

このような形にしてみました。

WEBは表示するデバイスが本当に様々なので、バッチリ合わせるというのは不可能なのですが、なるたけご希望に添えるように頑張って作業しています。

個人的には、表示するデバイスごとに最適な見え方を探る..というのが今後の課題になってきそうです。

youknow.jp 遊ゴシック

なお、このブログも表示するデバイスによって、見え方が違います。よろしければパソコンやお手持ちのタブレットなどでご覧になってみてください。

インデックス?? Photoshopの挙動がおかしいときに見直すべきモード

インデックス Photoshop おかしい

画像を新しく読み込んだときなどに、Photoshopがうまく動かないとき、ありませんか?
具体的にはうまく編集が行えないだとか…。

インデックス Photoshop おかしい

そんなときにレイヤーを見てみると、見慣れないインデックスというレイヤーの名前がついているインデックスモードになっている可能性が高いです。
今回はそんなインデックスモードを解除する方法をご紹介します。

Photoshopのインデックスモードを解除する方法

インデックス Photoshop おかしい

解除のやり方は簡単で、ツールバーからイメージ > モード > RGBカラーに変更するだけ!

変更が成功すると、レイヤー名のインデックスがいつも通りの背景という名前になっているはず!

ACC受賞作品をまとめてみる【2014 インタラクティブ部門】

こんにちは!YOUKNOWです。
広告を作るお仕事なので広告賞などの単語を聞くことが多くなってきました。

今回はその広告賞の一つであるACCの受賞作品をまとめてみます。

ACCのサイトではすぐに作品を見ることができなかったので…。

2014 54th ACC CM FESTIVAL 入賞作品 インタラクティブ部門受賞作品

総務大臣賞/ACCグランプリ

Sound of Honda/Ayrton Senna 1989

Sound of Honda/Ayrton Senna 1989は、1989年のFIA※4フォーミュラ・ワン世界選手権日本グランプリ予選(以下、F1)で、アイルトン・セナが「マクラーレン ホンダ MP4/5」で記録した鈴鹿サーキットの当時世界最速ラップを再現するプロジェクトです。アクセル開度、エンジン回転数、車速の変化といった走行データを解析、マクラーレン ホンダ MP4/5の実車を用いて再現されたラップ1周分のエンジン音をもとに、セナの1周分の走行を光と音で再現したムービーとメイキング映像、3D-View、iPhone※5アプリ「Sound of Honda」の3つのコンテンツを展開しています。Honda

ACCゴールド

該当なし

ACCシルバー

TOKYO CITY SYMPHONY

未来都市。ロックシティ。日本古来の花鳥風月。参加者はPCのキーボードをタッチするだけで、あたかもピアノを弾くように様々な都市のモチーフを演奏することができます。「あなたの手で、東京をもっと面白く。」まるで街全体が歌い出すような、新たな映像体験をお楽しみください。TOKYO CITY SYMPHONY

ロッテ・カフカ・泣きやみ動画

96.2%の赤ちゃんが泣くのをやめるらしい..不思議な動画

Google Maps Pokémon Challenge

Googleのエイプリルフール企画

Google は、技術に深い造詣があり、細やかな感性をもちながらも、大胆にリスクをとれる人を高く評価し、そんな人を日々探しています。長い長い検討の後、Google は「ポケモンマスター」がまさに、私たちが求めるスキルすべてをバランスよく併せ持っていることを発見しました。Google マップをより高い次元に引き上げ、最高の地図体験を提供するためには、ポケモンマスターの協力が必要です。

そこで、Google ではポケモン、任天堂、ゲームフリーク、クリーチャーズ協力のもと、くさむらをかき分け、やせいのポケモンを探し出し、つかまえる 「モバイル版 Google マップ ポケモンチャレンジ」を開催します。来たれ!真のポケモンマスター

Perfume@Cannes Lions

Parfumeの体全体がスクリーンに、プロジェクションマッピングが展開されています。
Parfumeの動きに合わせてどんどんと映像が変わっていきます。

ACCブロンズ

検索は応援になる「Search for 3.11」プロジェクト – Big Data Visualization for Social Good

2015年3月11日、「3.11」というキーワードで検索された方おひとりにつき10円を、Yahoo!検索から被災地の復興にたずさわる団体に寄付する「Search for 3.11 検索は応援になる」プロジェクト。

当日、「3.11」の検索者数は2,918,278人(ユニークブラウザー数)となりました。大勢のみなさまにご参加いただき、心より御礼申し上げます。多くの方々のご参加を受け、総人数×10円に当たる29,182,780円を、Yahoo!検索より寄付いたします。

みなさまのご賛同と被災地への応援、誠にありがとうございました!

Yahoo!検索は、これからもみなさまの想いと一緒に被災地を応援してまいります。3.11、検索は応援になる

BLOODY TUBE

今回の舞台となるのは、女優の壇蜜。ほぼヌードの壇蜜の体にプロジェクションマッピングを用いて、レースコースを投影。
未来感のある映像効果のもと、彼女の体を駆け巡っているような感覚を味わいながら、レースに参加することができます。
BLOODY TUBE

のらもじ in 東北

街のあちこちにひっそりと佇む看板の手書き文字は、データとしてきれいに整えられたフォントにはない魅力を持っています。不思議な愛らしさや人間味を湛えたそれら「のらもじ」の、風雨に晒され経年変化し素材と馴染んだ様子に、デザイン的な魅力や、古道具的、民藝的な魅力を積極的に見出だし、それを愛でる。そして、形状を分析し、フォント化し、データとして提供することでみなさんに使ってもらい、その魅力を知ってもらう。また、その代金を持ち主に還元することで、少しでものらもじが後世に残るように応援できればと考えています。今回の「のらもじ in 東北」では代金を直接持ち主に還元するのではなく、石巻という街に還元します。間接的ではありますが、石巻という街を応援することで広い意味でのらもじを応援することにつながれば、と思っています。ぜひ、石巻ののらもじを使ってみてください。のらもじ in 東北

ACCファイナリスト

スプラッシュ自販機

5月7日(水)から全国で放映開始される新TV-CM「スプラッシュカート登場」篇(15秒)は、「スプライト」を飲んだ時の爽快感をわかりやすく印象づけるため、突然の“大量の水しぶき”=“スプラッシュ”で瞬間的に爽快になる体験を演出しています。movieTimes

あなたの言葉を辞書に載せよう。

あなたの言葉を辞書に載せよう。

言葉や意味の使い方は、時代とともに日々進化し、変化してゆきます。
小学館の国語辞典「大辞泉」は、そのような時とともに変わりゆく言葉、また時が経過しても不変である言葉、そのどちらも日々とらえて更新し続けている、ネット&デジタル時代に対応した、「生きている」国語辞典です。あなたの言葉を辞書に載せよう。2015

TRUE LOVE TESTER

真実の愛を検知するホックを搭載した革新的ブラ。ブラに内蔵されたセンサーが女性の心拍信号を読み取って、Bluetooth経由で専用アプリに飛ばしデータを解析。心拍の変化率と時間からTRUE LOVE RATEを算出する。TRUE LOVE RATEが一定値を超えると、ロックが自動で解除されてホックが外れる仕組み。FASHION PRESS

信濃毎日新聞社 創刊140周年記念『家族のはなし』

信濃毎日新聞社 創刊140周年記念『家族のはなし』

株式会社フロンテッジ

長野県の地方紙・信濃毎日新聞の創刊140周年を記念し、地元・長野県大町市出身のお笑い芸人、鉄拳さんと一緒に新作パラパラ漫画「家族のはなし」を制作しました。
鉄拳さんの作品史上最長となる、合計1918コマにもおよぶ原画を、新聞の印刷機で実際に印刷。カメラのフレームレートと印刷機のスピードを完全に一致させることでつくる、あたらしいアニメーション。
毎日毎日、積み重ねることで、形になってゆく。新聞も、パラパラ漫画も、そして家族も、そこは一緒かもしれません。
心がじんわりと温かくなって、なんだか無性に家族と話したくなる。自然にそんな気持ちになる動画を目指しました。信濃毎日新聞社 創刊140周年記念『家族のはなし』

バナナトロフィー

バナナは差別化が難しく、価格競争に巻き込まれやすい。そこで、東京マラソン2014のスポンサーシップを活用して、「Dole バナナ」の存在をポジティブなニュースとともに広め、バナナ売場でDoleが指名買いされることが目的。そこで、バナナ自体のメディア化にチャレンジ。多くのランナーにとって大きな関心事である「完走タイム」と「SNSの友人からの声援」をバナナの皮に印刷したBanana Trophy in 東京マラソン2014

おわりに

次のACCはこれが受賞されそうな予感!

PLAY THE PING PONG

テレビ東京は、電通との共同プロジェクトとして、東京2020年オリンピック・パラリンピック競技大会に向けて卓球を盛り上げていくために、「THIS IS PINGPONG プロジェクト」を始動した。本プロジェクトは、卓球というスポーツを新しい切り口でみせることで、卓球の魅力を広く伝えていく。電通報

2014のインタラクティブ部門の公式まとめはこちら

【Photoshop】一括で複数のレイヤーの設定を変えることができるPhotoshopプラグイン【Ditto】

Ditto

こんにちは!YOUKNOWです。

便利そうなものを発見しました。

Dittoです。

Dittoとは?

DittoはPhothoshopの無料プラグイン。

レイヤーの後ろにHTMLのような#btnTextのようなIDが指定されています。
例えば#btnTextのIDの設定を変更すると、#btnTextと名前の付いているレイヤー全ての設定が変わるようです。(まだ未検証)

設定できるパラメータ

  • 塗り
  • テキスト
  • 表示・非表示
  • フォントサイズ
  • フォントの種類
  • フォントの色
  • 行の高さ

必要環境

PhotoshopCC2015 Mac / Windows

久しぶりにめっちゃ試してみたい…!と思うPhotoshopプラグインです。
少しの間使ってみて、めっちゃ便利だこれ!!となりましたら、再度記事にてご紹介したいと思います。

ブラウザで表示している画像を中央揃えにするブックマークレット

画像 真ん中 ブックマークレット

こんにちは!YOUKNOWです。

デザインカンプを完成させ、いざ書き出してみてブラウザに画像を表示させた時にこれじゃない…って思うときが多々あります。

なんでや…Photoshopで完璧に調整したのに…

このように(?)Photoshop上で見ている時のデザインとブラウザで見た時のデザインの印象がどうしても違ってるように見える病にかかっている人は多いんじゃないでしょうか。
(長いから病名決めよう)

僕はその病気の重症患者なので、デザインの微調整を行うときはブラウザで確認して、Photoshopに戻ってまた修正みたいな事を繰り返しながらデザインをブラッシュアップさせます。

画像 真ん中 ブックマークレット

しかし!Photoshopから書きだした画像をブラウザにそのまま放り込むと、画像が左端によってしまっていて実際のイメージ感がつかめません。

その問題を解消するために、ブラウザで表示している画像を中央揃えにするブックマークレットを作りました。(長い)

ブラウザの画像を真ん中にするブックマークレット

ブラウザデザイン確認用

この上のリンクをブックマークに登録して下さい。

後は中央寄せにしたい画像をブラウザに読み込ませて、ブックマークレットをクリックすればOKです。

画像 真ん中 ブックマークレット

使用した感じはこのような感じになります。

最後の微調整はブラウザで見ながらやるとより良い調整が出来ますので、ぜひご利用下さい!

KIRINのWEBサイトのデザインがすきだからまとめてみた

KIRIN WEBサイト

こんにちは!YOUKNOWです。

KIRINのWEBサイトが良いという話を以前の記事であげました。
そのおかげで気づいたのは、KIRINのWEBサイト好きかも…ということ!

なので!KIRINのWEBサイトで好きなページ20ページを!まとめて公開しておこうと思います。

KIRIN WEBデザインまとめ

パーフェクトフリー

KIRIN WEBサイトまとめ

一番搾り1ケースを抽選でプレゼント

KIRIN WEBサイトまとめ

キリン フレビア

KIRIN WEBサイトまとめ

KIRIN キリン 氷結®

KIRIN WEBサイトまとめ

グランドキリン

KIRIN WEBサイトまとめ

KIRIN キリン ハードシードル

KIRIN WEBサイトまとめ

KIRIN FIRE(キリン ファイア)

KIRIN WEBサイトまとめ

一番搾り フローズン生 デコビールキャンペーン

KIRIN WEBサイトまとめ

キリン メッツ スペシャルサイト|キリン

KIRIN WEBサイトまとめ

ココナッツウォーター | トロピカーナ|Tropicana

KIRIN WEBサイトまとめ

のどごし生 ワイワイは、うまい!キャンペーン

KIRIN WEBサイトまとめ

キリンフレビア

KIRIN WEBサイトまとめ
キリンフレビア

OMOTESANDO CIDRE by KIRIN HARD CIDRE

KIRIN WEBサイトまとめ

キリンレモン

KIRIN WEBサイトまとめ

果汁とお酒だけ|KIRIN本搾り(TM)マガジン

KIRIN WEBサイトまとめ

脂肪と糖に立ち向かえ!食事と一緒につぶやいてパーフェクトフリーが当たる!

KIRIN WEBサイトまとめ

純水果汁シリーズ

KIRIN WEBサイトまとめ

キリン メッツ

KIRIN WEBサイトまとめ

生茶

KIRIN WEBサイトまとめ

食事の生茶

KIRIN WEBサイト