画像関連の記事一覧



20160312-Photoshopでプレデターを出さずに雑に家を消す-00

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。

togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。


おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。

Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない!という方には塗りつぶしの「コンテンツに応じる」がオススメです。

今回はこの機能を使って、雑な作業の割にサクッと建物を消す方法を紹介します。(Photoshop CC 2015を使用しています)



記事の続きを読む




みなさん、Photoshop CC 2015の新しい画像書き出し(※)を使っていますか?

※:メニューから「ファイル」→「書き出し」→「書き出し形式」


新しい画像書き出しでJPEGはかなり高性能って話を「ファイルサイズは半分に。Photoshop CC 2015のJPEG保存を検証/JPEGmini不要という結果に」の記事で書きましたが、この画像書き出しのウインドウで不満点があります。



●不満点はプレビューが縮小表示されてしまうこと

それは、大きな画像から画像を書き出そうとすると、プレビューが縮小表示されて細部がすぐに見ることができないこと。

実例としては、1600×1020ピクセルの画像を書き出そうとすると、中央のプレビュー表示が以下のように縮小表示されてしまいます。

今回は25%の縮小表示になっています。

PNG-8などで減色している場合やJPEGで品質を下げているときには100%表示(dot by dot)で見ておかないと心配ですよね。

20150819-Photoshop-CC-2015-画像書き出しの倍率変更-04


今回はこれを一発で100%にする方法を紹介します。

記事の続きを読む



20150723-PhotoshopCC2015のJPEG書き出しはJPEGmini不要?-04

みなさん、Photoshop CC 2015を使っていますか?


Photoshop CC 2015って地味にすごいパワーアップがされていたのです。

それがWeb用の画像書き出しです。Photoshop CC 2015のWeb用の画像書き出しはImageReadyからの画像書き出しから一新されています。

Adobeの公式ブログでは以下の様に説明されています。

1999年に販売したPhotoshop 5.5に「Web用に保存」が搭載されましたが、これはImageReady(現在は販売終了)から移植された機能です。高画素の写真をWeb掲載するために最適化したり、アニメーションGIFを作成したり。ただ、新しい機能を開発するにあたって、このコードは古いものとなってしまいました。

そこでアドビは新しくAdobe Generator (生成)、Photoshopから画像を書き出すために、より現代的で効率的な作業を考えた機能を搭載し、さらに約2年の歳月をかけて、「書き出し形式」や「Device Preview」の機能を開発しました。

Photoshop CCの「Web用に保存」機能の話 | Adobe Creative Station(Photoshop CCの「Web用に保存」機能の話 | Adobe Creative Station)


このブログの記事内に気になる表現が。

特に大きなポイントは、JPEG圧縮技術自体も向上し、JPEGの最高画質を選択した時、従来の「Web用に保存」と比較して、最終画像が半分のファイルサイズになる場合もあります。

Photoshop CCの「Web用に保存」機能の話 | Adobe Creative Station(Photoshop CCの「Web用に保存」機能の話 | Adobe Creative Station)


え? ファイルサイズが半分に??

半分って盛り過ぎじゃないですかね…?ということで検証してみました。

記事の続きを読む



20150601-Google-Photosの1600万画素のピクセル数-01

画像出典:アプリのダウンロード(Google フォト)


スマートフォンやデジカメで増え続ける写真をどこに保存するのかは悩ましい問題です。

以前であれば、自分のパソコンや外付けのハードディスクドライブ(HDD)に保存していたのでしょうが、時代が変わってクラウドに保存することが増えてきました。

クラウドに保存されていればどこの端末からも写真を見ることができて便利ですし、自分のパソコンやHDDでは壊れる心配もあります。

そんな中、Googleが新しい写真向けサービスを開始しました。

その名はGoogle Photos。

開発者イベント Google I/O 2015より。Googleは1600万画素までの写真と1080pまでの動画を無料で無制限に保存できる「Google Photos」を発表しました。特徴は枚数無制限の保存、共有、編集機能など。本日より利用可能。
「Google Photos」発表。1600万画素までの写真を無制限に保存。Android / iOS / WEBで本日提供開始 - Engadget Japanese

1600万画素まで無料で無制限に保存できるのは枚数を気にしなくてもいいので心強いですね。

とはいえ、1600万画素といわれても、縦横が何ピクセル(ドット)なのか全然ピンと来ないので、計算してみました。

記事の続きを読む



今回は画像一発ネタです。


サッカー日本代表の長谷部選手の結婚報道が出て、祝福ムード真っ最中の中、本人がブログで結婚報道を否定しながらも交際の否定はしなかったりと、盛り上がっていますね。

サッカー日本代表MF長谷部誠(31)=ドイツ1部フランクフルト=が17日、自身のブログを更新し、モデルでタレントの佐藤ありさ(26)との結婚報道を否定した。

長谷部は「朝から相当な数の祝福メールを頂いていますが、記事に出ているような、将来についての事は何ら決まっている事はありません。お騒がせしてしまい申し訳ありません」などと謝罪しながら説明。一部で報道された今秋の結婚は否定したものの、交際していることについては否定しなかった。

長谷部誠が佐藤ありさとの結婚報道を否定、交際について否定せず - ライブドアニュース

それで、Androidで提供されている「Marvel オールスターバトル」というゲームの話なのですが、この中に出てくるコロッサスというキャラが勝利したときの画像が長谷部選手に似ているな〜と毎回思っています。


コロッサスが勝利したときの画像はこちら。(画像クリックで拡大します)

20150317-マーベルのコロッサスがサッカーの長谷部誠さんに似ている-01

長谷部選手より顔が少しごっつい感じですが、何か似ていませんか?

余談に書いたイベントのため、ミュータント属性のコロッサスで戦うことが多く、この勝利画面を何度も何度も見ていて、思わずブログに書いてしまいました(汗)。


それでは。


記事の続きを読む



20150208-SVG・SVGZ画像がブラウザーで表示されない-06

会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下(≒Windows XPユーザー)はあまり対応しない方向で、リニューアルを行っています(最低限の表示は可能にする程度)。(Internet Explorer 8での閲覧者も10%以下ですし)

会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、2名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応(スマートフォン対応)も可能にしていきたく思っています。

Internet Explorer 9(以下IE9)ユーザーであれば、SVGの画像フォーマットが使用できます。



●目次



●SVG画像利用のメリット

SVG画像のメリットはざっくり言うと以下のものが挙げられます。

  • 拡大してもキレイ
  • 高解像度ディスプレイでもエッジが滑らかな表示が可能

  • SVGの画像は、いわゆるベクトルデータなので、拡大してもキレイ(滑らか)な曲線で描かれます。繊細な表現の画像には嬉しいですね。

    また、拡大してもキレイということは、実質的にピクセル数が多い高解像度ディスプレイのデバイス(Windows・Mac・スマートフォン・タブレットなど)でも、ドットの粗さが目立たずに表示されるので、解像度に応じた複数の画像を用意しなくても良いので便利です。1つのファイルで完結すれば、ファイルの管理も簡単ですから。



    ●使ったことがない人が分かりやすいSVGの使い方

    そんなSVGですが、使い方が難しいのかというと、そうではありません。

    画像ファイル扱いなのでimgタグに使えます。

    つまり、

    <img src="logo.png">

    と書いていたところを、

    <img src="logo.svg">

    とsrcの部分のファイル指定を変更するだけです。簡単ですね。(.svgもしくは.svgzのファイルを指定します)


    ですが、こう指定しただけでは表示されない場合もあるのです。(ようやく本題)

    記事の続きを読む



    ツッコミがあるようにウィンドウ枠に直接ペーストできるのはChromeだけっぽい(IEとSafari、FireFoxでは不可能)けど、先日からツイッターのパソコン版公式ウェブにおいて、ファイルの一覧からの指定だけではなく、ドラック&ドロップでも画像のアップロードが出来るようになっていた。

    パソコンのツイッター公式ウェブで画像のアップロードがドラックで可能になっていた - 【ネタ倉庫】ライトニング・ストレージ

    という不破雷蔵さんのブログ記事を見て、あれ、意外と知られていないのかなと思ったので、Facebookでの小技(Tips)を書いておきます。



    ●スクリーンショットをそのままFacebookメッセージで送信する

    みなさんはFacebookメッセージでクリップボードに入っている画像を、そのままダイレクトに送信できるってことをご存じでしたか?


    使い所は画面の状況などを伝えてもらう際に、クリップボードに画面のスクリーンショットを入れてもらって、そのままメッセージに貼り付けて送ってもらうといったもの。パソコン操作のサポートなどでいいかもしれません。


    簡単に手順を書いておきます。

    Windowsでは「PrintScreenキー」を押せば画面全体のイメージ(スクリーンショット)がクリップボードに入ります。

    次の写真のキーね。ノートパソコンなどだとFnキーを押しながら「PrtScr」みたいな文字が書いてあるキーを押します。

    20141113-Facebook-スクリーンショットをメッセージに貼り付け(ただしChromeのみ)-03

    記事の続きを読む



    20160101-SmartNews-アイコン-02

    みなさん、ニュース閲覧アプリのSmartNews(スマートニュース)を使っていますか? 私は頻繁に使っています!


    さて、TwitterでSmartNewsのアイコンの変遷がおもしろいというものが流れてきました。


    確かにおもしろいので、時系列順に見てみましょう。


    ●SmartNews以前

    まずはSmartNewsになる前(笑)。「NEWSどうぞ」というアプリ名(の予定)だったのですね。

    アイコンデザインを見てみると、カラーで分けられたNEWSのイメージが表現されているのだと思いますが、文字の置き方が適当過ぎる。せめて「どうぞ」はそれぞれのカラーのセンターに来るように置こうよ。「ぞ」だけ左に寄っているように見えてしまいます。

    20141022-SmartNewsアイコンの変化・変遷-01

    画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)



    ●SmartNewsリリース直前

    そんなイケてないアイコンを作り直したのが、dot-ai, Vol.1「超絶アピアランス祭り」で講師だった、あの「鈴木 ともひろ」さんです。

    アイコンデザインはニュースペーパー(新聞)らしいデザインに、仕分けされたカラーの付箋のようなものが付いていて、ニュースをただ流すのではなく、編集している(ピックアップしている)ということが表現されているのだと思います。

    20141022-SmartNewsアイコンの変化・変遷-02

    画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)


    なお、SmartNewsの初期のアイコンの納期はなんと3日!(汗) 超短納期ですね…。(2014/10/22追記)

    その当時、「SmartNews」のアプリ開発は難航していました。アプリの申請をする1ヶ月前に、ようやくユーザーテストに漕ぎつけたのですが、期待した結果に至らず、急遽メインアイコンや名前を変更することになりました。

    時間がない中で思いついたのが、ランサーズに依頼することでした。その時は、依頼期間わずか3日だったのですが、魅力的な提案が次々と集まりました。

    あと1ヶ月しかない!?クラウドソーシングでピンチを脱した「SmartNews」リリース秘話 | Lancersマガジン
    記事の続きを読む



    TwitterのDiscovery(見つける)機能で見かけたツイート。

    広島の平和記念公園の案内板らしいのですが、フォントの選択が間違いすぎている気がします…。どうしてこうなった。

    20140524-広島平和記念公園の案内板フォント-01


    ずいぶんおどおどろしい感じになっていますね…。

    ただ、これは古い印(ハンコ)のフォントか何かだと思うので少し調べてみました。

    記事の続きを読む



    みなさん、はてなブックマーク使っていますか? そしてブログに設置していますか?

    今回ははてなブックマークボタンを設置するにあたって、(本当に)ほんの少し高速化した状態で設置してみましょう。素早く表示されるのは訪問者にとっても悪くないはずです。


    ●はてなブックマークボタンの設置について

    はてなブックマークボタンは、はてなブックマークボタン作成のページでフォームに必要事項を入力すれば、HTMLコードが右側に表示されるので、コピーして使えば簡単に使えます。

    20140511-はてなブックマークボタン表示高速化-03

    画像出典:はてなブックマークボタンの作成・設置について(はてなブックマーク)


    こんなHTMLコードです。

    <a href="http://b.hatena.ne.jp/entry/http://dtp.jdash.info/" class="hatena-bookmark-button" data-hatena-bookmark-title="jdash2000 site" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img  src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" style="border: none;" height="20" width="20"></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


    このHTMLコードを設置すると、HTMLコードに書かれているスクリプトが読み込まれるまで、以下の画像が表示されます。(表示される4倍のサイズにしています)

    20140511-はてなブックマークボタン表示高速化-01


    スクリプトが読み込み終わって実行されると、以下の画像の様に、はてなブックマークでブックマークされている数と共に表示されます。表示される4倍のサイズにしています)

    20140511-はてなブックマークボタン表示高速化-02


    今回、このHTMLコードで読み込まれている画像に注目してみました。

    記事の続きを読む



    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索