タグ

画像とweb制作に関するsomarのブックマーク (4)

  • WordPressのアイキャッチ画像に使えるフリーイラスト素材5選

    今回は、WEBマーケティングにはあんまり関係ないようなネタです。 最近、私は特にアイキャッチ画像には凝るようにしてます。 その理由は「目立つ」から。 Facebookとかはてなブックマークとかで取り上げられる場合もあるので、アイキャッチが目立つとクリックされやすいんじゃないかと勝手に思ってます。 これについては、特に検証したわけじゃないので、自己満足に近いところもあるのですが。ということで、今回は私が実際にアイキャッチで使っているフリーイラスト素材をご紹介します。 Wordpressの場合は、アイキャッチ画像を簡単に設置できますので、もしアイキャッチをもう少し凝りたいとかカッコつけたいとかいう人にはおすすめです。 シルエットデザイン こちらのサイトでは、いろんなデザイナーさんが作ったイラスト素材を無料で提供してくれています。 人物のシルエットイラストやWEBのアイコンで良く使うような記号の

    WordPressのアイキャッチ画像に使えるフリーイラスト素材5選
  • Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

    アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考:Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 (※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか? 情報が見つからなかったので知ってる方は教えてください) また、viewportの数値はサイト側で指定できます。 スマホ

    Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
  • ちょっとぼんやりした画像をくっきりさせるPhotoshopのチュートリアル | コリス

    元画像を一切劣化させることなく、ちょっとぼんやりしたねむい画像をくっきりさせるPhotoshopのチュートリアルを紹介します。 レースの柄をはじめ、よりくっきりしているのが分かると思います。 How to Non-destructively Sharpen Your Image In Photoshop [ad#ad-2] チュートリアルは4ステップで、慣れれば数分でできる思います。 下記は各ポイントを意訳したものです。 Step 1:画像の準備 Step 2:ディテールの抽出 Step 3:ディテールの調整準備 Step 4:ディテールの調整 完成 Step 1:画像の準備 まずは、元となる画像をダウンロードします。 Autumn Stock IV [ad#ad-2] ダウンロードした画像をPhotoshopで開いてください。 画像を加工するときは、元画像はそのまま残し、コピーした画像を

  • JPEG画像をより美しく、より軽量に最適化するテクニック

    JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため

  • 1