タグ

webデザインと加工に関するjed_leeのブックマーク (6)

  • 1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

    2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です!今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト! 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

    1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
    jed_lee
    jed_lee 2017/07/30
    異なるサイズの画像を短辺や長辺にフィットさせてトリミング...の様な時などかなり便利、例によってIE,Edgeは未対応ながら(17年7月現在)、カバー策のプラグインjsも紹介されているので助かる。
  • 細かすぎて伝わらないアンチエイリアスの話

    はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい:photoshopのアンチエイリアスについては、基的には5種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の5種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の4つに関しては シャープ:文字が太い / くっきり 鮮明:文字が細い / くっきり 強く:文字が太い / なめらか 滑らかに:文字が細い / なめ

    細かすぎて伝わらないアンチエイリアスの話
    jed_lee
    jed_lee 2016/12/11
    カヤックブログで見つけたPhotoshopアンチエイリアスの各種類を解説した記事。特に「シャープ」「鮮明」の位置ズレ現象、Smtオブジェクト化での調整テクニックなど知っておいて損は無い知識が掲載。
  • 製品背景を簡単に変更できるバックグラウンド変換ツール「Hue」

    販売する製品をアピールするためには、魅力的なビジュアル作成が必要。製品自体をそのままサイトなどに掲載するのももちろん良いのですが、より良く見えるように加工を施すことで効果がアップすると思います。今回はそんな時に使用したい、製品背景を簡単に変更できるバックグラウンド変換ツール「Hue」を紹介したいと思います。 ロサンゼルスのデザイナー・Vladimir Kudinov氏によって開発された、選択するだけで登録されているバックグラウンドに簡単に差し替えすることが可能となっています。実際に操作している様子を撮影したムービーが公開されていますので、まずは下記より御覧ください。 ムービーは以下より グラデーションカラーをベースとした色展開がされており、右側のプルダウンメニューから好きな背景を選択することで背景を瞬時に変更可能。ニュアンスのある背景をプラスすることにより、製品がより際立って見え、さらにク

    製品背景を簡単に変更できるバックグラウンド変換ツール「Hue」
    jed_lee
    jed_lee 2015/11/15
    プロダクトやアプリなどの印象を肝とする要素の背景作成用に。長く印象重視の背景が手軽に作成できる。
  • カンタンすべすべ肌のレタッチ方法!- 顔の修正TIPS - | ピクスタアンテナ

    こんにちは。PIXTAスタッフのhairiです。 肌のレタッチといいますと、ここそこあそこにいろんなTIPSがありますが、 ワンタッチで全部完璧!というわけには残念ながらいきません。。が、 コツさえ知っていればカンタンに修正できますので、ここはおさえておきましょう。 今回はPhotoshop CS5を使います。 モデルになってくれたのはインターンのOくんです。(もちろんすっぴん) ありがとう! 写真は社内の薄暗い蛍光灯の下で、白っぽい背景でペッとiPhoneで撮影しました。 1. ボツボコを消滅! お肌のボツボコしているところは強めの陰影ができて、後々の調整でも残りがちなので、 まずはもうニキビなんてこの野郎と思いながら消してください。(Oくんごめん。。) Photoshopのスポット修復ブラシツールを使います。 グローバルメニュー下の設定が「コンテンツに応じる」になっているか確認してくだ

    カンタンすべすべ肌のレタッチ方法!- 顔の修正TIPS - | ピクスタアンテナ
    jed_lee
    jed_lee 2014/09/05
    この辺りのまとめ、小手先と言われるかもしれないがやっぱり基本的に役に立つ。
  • FINDJOB!終了のお知らせ | FINDJOB!

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    FINDJOB!終了のお知らせ | FINDJOB!
  • http://www.iaza.com/

    jed_lee
    jed_lee 2011/04/29
    よくあるオンライン画像加工ツールだが、オプションが豊富。http://bit.ly/eUYeLw (百式)にて紹介されている。
  • 1