Private content!This content has been marked as private by the uploader.
Private Presentation
Private content!This content has been marked as private by the uploader.
大きな背景画像を使った魅力的なWebサイトを作ろう
2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって
手軽にサンプル！ スマホやMacBookに指定した画像をはめこめるサイト「Frame」 | ライフハッカー・ジャパン
「Frame」はスマホやMacBookに指定した画像をはめこめるサイトです。自分が運営しているWebサービスやブログのスクリーンショットをスマートフォンやタブレット、MacBookなどにはめこんだ画像を作ることができます。 以下に使ってみた様子を載せておきます。まずFrameへアクセスしましょう。はめこみたい画像を用意してアップロードしましょう。 このようにスマホやタブレットなどの製品に、先ほどアップロードした画像がはめこまれた状態の画像を作成することができました。作成した画像はダウンロードすることができます。ぜひ製品にはめこんだ状態の画像を作りたいときにご活用ください。 Frame （カメきち）
「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
【スウォッチ】 綺麗だなと思った写真からカラーパレット化してストックしておく
エイプリル・フールですね。でもこの記事はネタじゃないので普通に読んでいただければと思います（笑）あ、そういえば今日はヒゲを剃りましたよ。ちょっと剃り残しちゃったけど、すぐ戻ります。 さて、Dribbbleとかってそれぞれの作品にカラーパレットが登録されていますよね。 それから検索できたり、便利。 Dribbbleのカラーパレット。.acoファイル(Color Swatches)もダウンロード出来る なんかキレイなカラーパレットって、見てると嬉しくなりませんか？ なりませんかそうですか 好きな写真からカラーパレットを作る 普段、綺麗だなーと思った写真から、メインの色を抽出してカラーパレットとして並べておくんです。 並んだカラーパレットには名前なんてつけてあげちゃって。 根暗でしょう？ でもけっこうデザインする時に役に立つんです。 色の組み合わせ、感情というかストーリーが出
Photoshop・これからのグレースケール画像のつくりかた
グレースケール変換の方法は多々ありますが、どうも「モード」→「グレー」がDisられる傾向があるようなのでそれは違うよ！というところから少し。 モード→グレーは結構優秀 （実際にはモードから変換するのではなくて、「編集」→「プロファイル変換」を勧めます。これだけは設定しておきたいPhotoshopショートカットキーの小ネタ） これを変換してみましょう。 (以下マウスオーバーでこの画像に変わります） モード変換グレー 他と比べると濃いのですが、色の濃度変換は最も感覚的に近いかと。PCの方はカーソル乗せたり外したりしてみてください。 参考：osakana.factory – グレースケールのひみつの３番目 どちらにしても、オフセット印刷向けに変換するのであればこの後の調整は「必須」です。これはどの方法でも同じです。 LabモードLチャンネル Lab変換後Lチャンネルのみ表示させ、そのままモード変
無料で利用できるGoogleやMicrosoftの高品質なストックフォト
無料で利用できるGoogleやMicrosoftの高品質なストックフォト ストックフォトは主にプロの写真家によって撮影された写真で、素人のそれとはやはり質が違うため有料のものがほとんどでそれだけの価値のある写真です。 その性質上、商用利用の業務色が強く比較的一般ユーザーには馴染みが薄いということがあるものの、一般ユーザーが自分のブログや創作活動にも上質な写真素材を利用したいという需要は少なくないと思います。 GoogleやMicrosoftでは自社サービスの付加価値を高める一環として、このようなストックフォトの無料提供を行なっており、一般ユーザーにとっては非常にお得な情報なので紹介してみたいと思います。 まずはGoogleからですが、こちらはGoogleドライブに統合されているGoogle Docsから利用できるようになっています。 Google Docsでドキュメントを作成し画像挿入から
Web屋さんやブロガーさん御用達な画像素材サービスまとめ34サイト（2012年冬版）｜男子ハック
@JUNP_Nです。毎年恒例になりつつある画像素材サービスのまとめ記事です。昨年は7つのサービスしか紹介しませんでしたが、今年は大幅に増えて34サイトです。
全素材ロイヤリティフリーのプロカメラマンが撮影した国内の写真素材が満載！ -パプリカ イメージズ
個人でも商用でも無料で利用でき、加工も自由、クレジット表記も必要無しの写真・イラスト素材がダウンロードできるサイトを紹介します。 パプリカ イメージズ ※2015/4/15: サイトは閉鎖してしまったようです。 中の人に伺ったところ、素材はプロカメラマンが撮影したもので、素材数は現在200点！ ストックは膨大にあるそうなので、「ありそうでなかった、こんな素材が欲しかった」と思う写真を毎日10～20点ずつアップしていく予定だそうです。 無料で利用できる素材は、サイズSの640×480pxのものだけですが、登録も必要無しでさくっと利用できるので重宝するのではないでしょうか。 利用に関しては、下記ページをご覧ください。 ご利用ガイド 素材は現在、6つのカテゴリになっています。
Google Holiday Logo
This page has moved to the Google Doodles page.
うまいなあ、とそのクリエイティブさに感心してしまうロゴのまとめ
ネガティブスペースを活用したり、二つのオブジェクトを合体させたり、そのクリエイティブさに感心してしまうロゴデザインをBored Pandaから紹介します。
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
画像に使用されているフォントの名前が分かるオンラインサービス -What Font is
調べたいフォントがある画像をアップロードします。ファイルはローカルでもオンライン上でも対応しています。 上記は、手元にあるローカルファイルを「Browse」ボタンで参照し、「Continue」ボタンをクリックします。 Step 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
web計。
見栄えが良くなるPhotoshop簡単テク
http://fukuyama.co/imagealpha
イラストがすべて無料 「イラストAC」 トップページ
新着記事
