タグ

web-designとtipsに関するFalkyのブックマーク (6)

  • 進化したPhotoshopでWEBデザイン効率アップの10の奥義! - STAND-4U

    現役プロが比較 「WEBデザインスクール12校」おすすめランキングWEBデザインスクール選びで絶対失敗したくない!プロの目線でおすすめを教えて! WEBデザイナーがデザインする際に使うツールはPhotoshopがベスト? 最近ではSketchやIllustratorでWEBデザインをされる方も増えているが(Fireworksの人口は減る一方)、Photoshopでデザインされている方がまだ大半を占めている。 以前Webクリエイターボックスさんが実施したアンケートでもこのような結果だった。 やっぱりまだまだPhotoshop強し!みなさん、ご協力ありがとうございました!ぐっない? pic.twitter.com/ajGy0wb46g — Webクリエイター ボックス (@webcreatorbox) 2016年2月19日 さらにPhotoshopは古くなっているわけではなく、Photos

    進化したPhotoshopでWEBデザイン効率アップの10の奥義! - STAND-4U
  • するするさせたい:サイボウズ採用情報のアニメーション(その1) - fragmentary

    サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報(新卒・キャリア) といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div

    するするさせたい:サイボウズ採用情報のアニメーション(その1) - fragmentary
    Falky
    Falky 2016/05/13
    h押すだけでvisibility: hiddenしてくれるなんて知らなかった…。
  • 【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド

    コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」(複雑な背景バージョン) オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー(Command/Ctrl+J)したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は

    【簡単】2023年Photoshop切り抜きおすすめテクニック15選 完全ガイド
    Falky
    Falky 2016/04/19
    なんでこのエントリだけデザイン違うんだ???
  • まだ中央寄せで消耗してるの? - @yoshiko_pg

    Falky
    Falky 2015/12/16
    マトリクス有用
  • アイコンの実装方法

    ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー

    アイコンの実装方法
    Falky
    Falky 2014/06/28
    ラベルテキストがあればaltは空白『である必要があります』…そうか?例示だとa要素の中だからギリギリわからなくもなさそうだけど…alt省くならラベルテキストは個別マークアップすべきじゃないかなあ
  • サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

    京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

    サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
    Falky
    Falky 2014/04/11
    親要素をdisplay:tableにすると解決する、と。うーん。他の要素に影響を及ぼす解決法はエレガントじゃないなあ…
  • 1