[Photoshop]マスクの方法まとめ
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。 それぞれの作成方法をご紹介します。 クリッピングマスク レイヤーマスク ベクトルマスク（CS6, CC） ベクトルマスク（CS5？以前） クリッピングマスク すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。 一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。 01) 切り抜きたい形のオブジェクトを作成します。 パスの図形でも、フリーハンドの図形でも大丈夫です 02) 切り抜きたいレイヤーを、その上に置きます。 03) レイヤーの間を、「Alt+クリック」します。 アイコンが写真のように変化し、マスクがかかりました。 調整レイヤーも同じようにマスクがけできます。 レイヤーマスク 選択
![[Photoshop]マスクの方法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb45a436e313479c083a441149c4b60b22112d10/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F05_s1.png)
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
Webアプリケーションの構成に関する予備知識 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 自分の担当したWebアプリケーションを引き継ぐ際に、予備知識として説明したことのまとめ 注意事項 もともと明確に定義されていない概念や、簡単に説明するため正確さを犠牲にした部分が多い 間違っていることを前提に、疑いながら読むのがベター アプリケーションの層構造 アプリケーションを構成するオブジェクトには非常の多くの種類がある アプリケーションの（より良い）構成をオブジェクト単位で考えるのは難しいので、もっと粒度の大きい単位で考えたい アプリケーションをいくつかの層（オブジェクトの所属するグループ）に分割し、層単位でアプリケーションの構成
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
食品系サイトの運営者は必見！シズル感たっぷりのWebサイトまとめ | ピクスタアンテナ
こんにちは。PIXTAスタッフのmariです。 思わず「これ食べたいっ！」と声にだしてしまうほど、 おいしそうな料理写真を掲載している飲食店や食品サービスのWebサイトは、 見ているだけでも、とっても幸せな気持ちになりますよね。 まだ味わったことのない料理や行ったことのないお店に、人はどうしたら興味をもつのか。 多くの人は、体験者のレビューと、やはりなんと言ってもWebサイトに掲載されている 料理写真がおいしそうに見えるかどうかで良し悪しを決めています。 思わず「これ食べたいっ！」と見る人に言わせてしまう、 そんなシズル感たっぷりのおいしそうな料理写真をWebサイトに掲載することは、 いまや食品や外食事業を扱うサービスにとっては必須の集客方法です。 そこで本日は、食品系サービスの運営者は必見！シズル感たっぷりのWebサイトをご紹介します。 空腹時の閲覧には、どうぞご注意ください。 ☆シズル
Webマーケティングに役立つ無料分析ツール厳選５つ | LISKUL
Webマーケティングでは様々なデータや情報を取得できる事が大きな特徴です。 専用のツールを使うことで競合の状況から市場のトレンドまで「こんな事までわかるのか！」とビックリするような情報やデータを把握することができます。 しかし、市場や競合状況の把握につながる情報やデータを得る方法を知らない人が意外に多いというのが実感です。 そこで、本日は私自身も使っていて便利だと実感している市場・競合調査に役立つ情報源の中から、Web上ですぐに使える無料のツールを厳選してご紹介します。 これらのツールを使うことで、今まで知り得なかった貴重なデータを得ることが出来ます。 競合の状況や市場のトレンドを捉えて戦略や施策を見直すことでこれまでよりも大きな結果を得られるようになります。 1.競合サイトのトラフィック数・流入経路を把握「SimilarWeb」 SimilarWebサイト http://www.simi
模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの藤田です。 「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。 日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね（どの業種にも言えることだとは思いますが）。 そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。 そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース（模写）」の方法をご紹介いたします。 なぜトレースがデザインの上達につながるのか？ なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。 「デザインは細部に宿る」と言われますが、その細部に気付く 「デザインの引き出しが増える」 「自分の悪い所が解る」←これが一番重要！ などなど、良いことがたくさんあります。 まずはカッ
ECサイトのコンバージョン率を３倍にする２１の簡単な方法
１．決済ステップをビジュアル化して遷移率をアップECサイトの一般的な法則としてカートから決済完了までのページ遷移数は少なければ少ないほどコンバージョン率が高い。極端に言えば、一つのページで商品の確認から決済までいければベストだが、多くの場合それは難しい。 従って、上の画像のように決済完了までのプロセスをビジュアル化しよう。これがなければお客様は「購入に時間がかかる」と感じて離脱してしまう。もちろん、簡単に購入できるように決済プロセスを出来る限り簡単にしておくことが重要だ。 ２．購入ボタンを２カ所に設置して誘導率向上『ランディングページのコンバージョン率を５倍にする２１の簡単な方法』でご紹介している通り、CTAボタンの「場所」「大きさ」「色」はコンバージョン率に大きな影響を与える。ショッピングカートでは、ファーストビューとページ下の２カ所に購入ボタンを配置することでユーザビリティが上がり決済
無料ホームページテンプレート Template Party
2024/11/22Template モバイルファースト(スマホ幅)のLP向け 無料ホームページテンプレート tp_sh1公開。カフェ・居酒屋・レストラン・ピザ専門店・クラフトビール専門店・ケーキ屋さん・コーヒー専門店・ハンバーガーショップ・マカロン専門店・ベーカリーショップを想定しましたが他のサイトにも転用できます。 2024/11/15不具合 Firefoxでハンバーガーアイコンをクリックしてもメニューが開かない不具合。 2024/11/14お知らせ slickを使ったスライドショーがチラつく件の対応版を公開 ※slick未使用。 （上記ページ内の「slide4-parts」と「slide5-parts」が該当。） 2024/11/13Template ランディングページ（LP）向け 無料ホームページテンプレート tp_lp1公開。 2024/07/31Template ポップでかわい
背景に動画を使ったWebサイトの作り方
背景に動画を使ったWebサイトの作り方2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 KINS WITH 動物病院の Web サイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 Aquallの Web サイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意するまずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて 4 通り。 自分で撮影するプロに撮影依頼する有料の動画素材を使う無料の動画素材を使う1
商用利用無料、64種類のさまざまな紙が揃ったプロ仕様の高品質なテクスチャ素材
個人でも商用でも無料で利用できる、ざらっとした紙、つるっとした紙、もわっとした紙など、さまざまな紙が揃ったテクスチャ素材を紹介します。 紙系のテクスチャ好きの人には、嬉しい素材ですね。 Free Paper Texture Pack ダウンロードできる素材のフォーマットは.jpgで、サイズは2,100x1,500pxの高解像度のテクスチャ素材です。 紙は全部で64種類！ その中からいくつかジャンルごとに紹介します。
『UI設計〜ディレクションの質を高める7つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識
作成：2014/02/3 更新：2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案（トップページ） フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webourgeon.com/
WordPressできちんとしたかわいいサイトを作りたい人にオススメの本
パソコンとiPhoneで写真やURLを瞬時に送受信できる「Pushbullet」が便利すぎる(´▽｀) - isuta（イスタ） -私の“好き”にウソをつかない。-
日本在线加勒比一本道,日本高清免费一本视频,日本一本道a不卡免费,免费无码不卡
レスポンシブWebデザインの基礎
ソニック速報
