Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」 | LISKUL
Webサイトの見た目を改善するために、これまでたくさんの「配色デザイン」の本や記事が投稿されてきました。これらの情報を使えばあっという間にサイトの配色を決めることができます。 ただその配色、「自分が好きな色」になっていませんか？ それぞれの商品やサービスの配色には「正解」があります。 今回「サイト」「ロゴ」「コンバージョンボタン」に分けて、それぞれに対して有効な色や法則をまとめてみました。 自分のウェブサイトではどんな色が一番理想的なのか、実例を参考にしながら導き出してみましょう！ また、この記事は無料でPDFとしてダウンロードも可能です。配色デザインを考える際にお手元に置いておくのがおすすめです。 【PDF】【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」>>無料ダウンロード そもそもなぜ「色彩」が大切なのか？ 引用元：Why All Sale Sings Are R
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
SassやLESSを導入するメリット | Good thinking
SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、本記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby（Sass）、JavaScript（LESS）によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less（LESS）という拡張子のファイル上でスタイルを書き、それらをCSSにRuby,JavaScriptでコンパイル（変換）します。 いずれもプログラミング言語の要することで、普段HTML/CSS、JavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
商用無料の写真素材のブックマークに加えておきたい、高解像度でセンスのいい写真画像がダウンロードできるサイト -raumrot
raumrot 最近は海外のハイセンスな写真素材をダウンロードできるサイトが増えてきましたね。こういったサイトはブックマークにいくつ増えても困らないと思うので、前の記事を未読の人は参考にしてみてください。 雰囲気のある写真画像がダウンロードできるストックフォトサイトのまとめ とちょっと逸れたので、「raumrot」のご紹介。 「raumrot」は個人でも商用のプロジェクトでも無料で利用できる写真がダウンロードでき、ジャンルはビジネス・テクノロジーから自然・山・スポーツ・フード・ドリンクなど、さまざまなものが用意されています。 サイズは2048x1536～5760x3840と、高解像度なのも嬉しいポイントです。
Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント
（2014年2月15日追記）よりよい解決方法として「CSSプリプロセッサやポストプロセッサで出力されたCSSの整形」「Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開」を書きましたのでご覧下さい。 Less & Sass Advent calendar 2011の17日目は、@_hideki_aがSassの出力ソースをカスタマイズする方法について書かせていただきます。 3日目の「Sass を今すぐ実務で使おうよ！」ほか様々な記事で紹介されている通り、SassはCSSの設計を強力にサポートしてくれる素晴らしい言語です。しかしながら、学習コストや環境設定など多少のハードルがあり制作チーム全員がすぐに導入するのは難しいという場合や、納品後の運用はクライアントさんが行うためにSassの導入はしてもらえないという場合もあるのではないでしょうか。 そのようなことから、構築時はS
見てないと絶対損する！Google Analytics 必読記事10選。 | SIROKグロースハックブログ
Google Analyticsを本格的に使いこなしたいけど、何を見れば良いかわからない！忙しいスタートアップだと中々調べている時間もありませんよね。 今回は、この記事を見ておけば、必ずGoogle Analyticsを使いこなせる記事をピックアップしましたので、ご覧下さい！ 「Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips！ 意外と知られていないTipsが書かれている有名記事。 Google Analyticsでサイトのことが丸分かりのバブルチャートをフル活用する方法 バブルチャートを使うなら、これを読めば間違い無し。 Google Analytics、77の注意点（追記有） 注意点が網羅されているGoogle Analytcisにおける必読の記事。 加重並べ替えはGoogle Analytics最強の機能強化の1つかも 加重並べ替えに関して書
Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R
Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
Googleの検索のアルゴリズムにおける検索結果の順位に影響を与える200+個の要因、コンプリートリストを紹介します。 量が多く翻訳するのに一週間かかりましたが、興味深いことが多々あり、とても面白かったです。 Google's 200 Ranking Factors: The Complete List 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 毎日のように海外のまとめ記事を無断転載してアクセスを稼いでいるあのブログの注意喚起を海外のブロガーから聞きます。問い合わせや削除依頼しても対応無しっていうから、たちが悪い。 ドメインによる要因 ページレベルによる要因 サイトレベルによる要因 バックリンクによる要因 ユーザーのインタラクションによる要因 アルゴリズムによる要因 ソーシャル シグナル ブランド シグナル サイト内部のスパム
「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
HOME>Web>「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ Compass、Sass（Scss）とは？ Sass（Scss）とは？ Sass（Scss）とは、CSSを記述するために開発されたメタ言語のこと。長くなりがちなコードを短くできたり、関数などを使用してより便利にスタイルシートが書けるという代物です。CSSの管理が非常に楽になります:) Sassには、プログラムのような書き方をする「Sass」と、よりCSSに近い記述が可能な「Scss」とがあるのですが、根本的には変わりありません。（記述方法が違う） ちなみに、私はScssを利用しております。 どんなことができるの ではちょいと実例をば。ScssではCSSを簡単に書くためのルールがたくさん用意されておりますのでさっくりとご紹介。 [css]
プロアマ問わず使える10個の最新無料CSSツール / ウェブデザインライブラリー
投稿日：2014年8月8日 ソフトウェア：- このチュートリアルではプロアマ問わず使える10個の最新無料CSSツールを紹介します。 Step1 ： はじめに Step2 ： CSSの主なメリット Step3 ： 無料のCSSツール10個 Step4 ： 関連記事 CSSはずいぶん前からウェブデザインに必要不可欠な存在になっています。 CSSがここ最近すっかりウェブの標準技術になっているということは、どのウェブデザイナーも認めることでしょう。 ウェブデザイナーでない人なら、CSSとは何か、なぜそんなに利用されているのか、と疑問に思うかもしれません。 ウィキペディアによると、CSSはマークアップ言語（HTMLなど）で書かれた文書の表示を指定するために使うスタイルシート言語です。 このウェブデザインツールにより、時間やお金をかけることなく、サイトへの訪問者の体験を向上させることができるように
Webデザイナーなら知っておきたい、CSSの便利なプロパティ16選 | BULK SERVER blog
CSSにはたくさんのプロパティがあり、すべてを網羅することは大変です。 しかし、中には覚えておけばとても便利なプロパティや記述法があります。 WebデザイナーならばCSSにおける便利テクニックを知っておけばスキル向上に役立つし、デザインの幅が広がるでしょう。 今まで画像を使ったり、無理やり色んなプロパティでスタイルしていたのもコードをすっきりさせることでスマートにすることができます。保守・管理も向上して便利なプロパティを使うメリットは盛りだくさんです。 今回は使用頻度が多い便利なプロパティをまとめたので、デザイナーの方ならばぜひ一読してください。CSS3も含まれています。それではどうぞ。 背景画像 1．背景画像を枠に収める 【background-size】 背景画像を使用することは多いですが、問題はその大きさです。画面の大きさに合わせて画像を作ることが多いですが、最近ではスマートフォンの
ずいぶん速くなった！ページ表示高速化テクニックまとめ - コムテブログ
TL;DR CMS を組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。 2016/07/03：高速化についての新しい方法を追加しました。確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開。 VPS 高速化のために VPS で試して比較的効果があったことを、次回また組み込む時のためにメモ。 １．VPS / SSD に リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、 さくらの VPSSSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。 さくら VPS | Sakura VPS 設定マニュアル さくら VPS の初期設定 | 離
高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 本日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを本能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth
自転車工具の話をしよう : 旧機械
コメント一覧 (18) 1. akexeief kobayashi 2014年03月30日 23:38 ＞六角レンチの事を自転車業界ではアーレンキーと呼びます。 えー、まじっすか！？ 自転車業界以外で言わないの……！？ 世界標準と思ってた！ 2. とおりがかりのさとー＠仕事場 2014年03月31日 16:17 フレームを車用のワックス塗って磨くとカナリイイかんじですよ。 あと、高粘度油はジャージを抹殺する道具だったり。（556が最強ｗ） 写真見た感じではクランクが重そうなので換装するといいかも。 それと、見た感じ強烈な林道はではないようなので、タイヤを細めのスリックに、ペダルはビンディング系にすると自転車ライフがかわりますよ〜 3. オートバイ乗り 2014年03月31日 17:50 米１ ふつうにロッカクとかヘックスとか呼びます アーレンは確かに聞かないなぁ そしてブランドはPBがダン
ポートフォリオサイトの作り方
就活に使うポートフォリオサイトってどんな手順でどんなものを作っていいかよくわからず、制作した当時はとても悩んでいました。 今回は、そんな実体験を元にしたポートフォリオサイトの作り方のポイントをご紹介します。 なぜwebデザイナーの就活にポートフォリオサイトが必要なのか ポートフォリオは自分自身のデザインスキルや技術スキルの作品集。自分がどんな制作者で何が得意なのか、何が出来るのか、制作したサイトを見れば大体分かります。 webデザイナーにとってのポートフォリオは自分のちからを相手に知ってもらう大事な武器ですので、時間がないからといって片手間で作ったりせず、綿密に計画してフルパワーで作り上げる必要があります。 ポートフォリオを作る前の下準備 作品の構成要素 ポートフォリオに制作実績を掲載する時、下記の6つは載せておきましょう。 サイトのタイトル サイトのURL サイトのスクリーンショット 制
Thunderbird ユーザーなら知っておきたい１９の便利な使い方
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Amazonのメガドロップダウンメニューの動作を実現する「jQuery-menu-aim.js」の使い方 ｜ Tips Note by TAM
Amazonのメガドロップダウンメニューはこちらの記事で紹介されている通り、 Javascriptを使用することによってスムーズな操作性を実現しています。 今回はこの記事の最後で紹介されている、 Amazonのメガドロップダウンメニューと同様の動きを実現するプラグイン 「jQuery-menu-aim.js」の使い方を解説いたします。 プラグインは、GitHubからzipファイルをダウンロードします。 zipファイルには、プラグイン本体（jquery.menu-aim.js）の他にサンプルファイル（exampleフォルダ）が同梱されています。 以降ではこのサンプルファイルを元に実装方法を解説いたします。 他のプラグインと同様jQuery本体を読み込んだ後に、先ほどダウンロードしたプラグインのjsファイルを読み込みます。 プラグインを実行するための記述は下記の通りです。 $menu.menu
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
SVGでアウトラインをカスタマイズしてみよう
2014年7月30日 SVG これまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…！？今回はSVGのアウトライン（線）の装飾に注目！オブジェクトを徐々に描いていくラインエフェクトにも挑戦します！SVGの基本的な情報や書き方は過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ SVG線種プロパティの基礎 基本的な書き方ですが、SVGのコード内に直接記述する方法と、CSSで指定する方法があります。例えば stroke プロパティを使う場合： <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000"/> </svg> のように、 stroke="#000" と直接記述しても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blog - LINE ENGINEERING