新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 デモページ：480pxで表示 実装 実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。 実装にはSassを使用します。 ダイヤモンド一つ まずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p
美しいラインを描くPhotoshopのチュートリアルのまとめ
背景やアクセントにぴったりな美しいラインを描くPhotoshopのチュートリアルを紹介します。 壁紙素材：Energy flow background 以下、Photoshopのチュートリアルです。
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
Illustratorの「オブジェクトの再配色」を使ってカラーバリエーションを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はIllustratorの機能を使ってロゴなどのカラーバリエーションを一瞬で作る方法をご紹介します。 季節柄・・・今回は年賀状を想定してこちらの画像を用意しました。 ロゴ制作の時などにもよくありがちなのが、 「もっと違う色味のパターンがみたいんだよね～的なことを言われた場合・・・。」 ベタで単調な配色だといいんですけど、今回のようにグラデーションが使われてたりすると、一個一個設定し直すのは相当手間ですよね？ しかし、Illustratorにはものすごい強力な機能があるんです。 「オブジェクトを再配色」を使ってみよう 色を変えたいオブジェクトをグラデーションも全部含めてまるっと選択します。 「編集」→「カラーを編集」→「オブジェクトを再配色」または、下図のボタンをクリック。 次に編集をクリックします。 「ハーモニーカラーをリンク」にチェックを入れて色相の中の任意の色をクリックしてベースカ
2012年、Photoshopの使い方を実践からしっかり学べるチュートリアルのまとめ
2012年に公開されたものを中心に、素材の入手やレタッチのテクニックなど丁寧に解説されたPhotoshopのチュートリアルを厳選して紹介します。 完成作品を見るだけでも楽しくなりますね。
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
クールな円形メニューをピュアCSS3で実装するチュートリアル:phpspot開発日誌
The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」
Photoshopを使いこなすための印象的なチュートリアルいろいろ
Photoshopを使えばここまでの作品ができる、ということがよくわかるチュートリアル集が「35 New Photoshop Tutorials with Various Techniques」です。アイコンからSFっぽいイラストまで、さまざまなジャンルにおける作品のメイキングが公開されており、技術が学べるだけでなく、こんなラフスケッチからここまでの作品が……！と製作過程を眺めているだけでも楽しめます。 35 New Photoshop Tutorials with Various Techniques | The Design Inspiration ◆Photohop Tutorial Link: A Cute Cartoon Artwork Creation 鉛筆でのスケッチはこんな感じ。 スケッチをスキャンし、Photoshopを使って着色していきます。 完成作品はこちら。 なお、
怒涛のサイトナビゲーション総まとめ！事例、チュートリアル、参考サイト、僕の知る何もかもを紹介！ | バンクーバーのうぇぶ屋
レスポンシブデザイン、パララックススクローリング、そういったレイアウトに関する変化に伴い、サイト内を誘導するナビゲーションの種類も多様化してきていますね。 元々、縦、横、ドロップダウン、固定、メガメニュー等、サイトの構造によって様々なナビゲーションを提案してきたわけですが、最近サイトのレイアウトを考える時、話に上がるナビゲーションの呼び方とか、種類とか、大量多量過ぎてもう分け分けらなくなってきたので、ちょっと僕自身の復習と、参考サイトやらチュートリアルやらないかを全部まとめてしまいたかったので、僕と、僕の周りのデザイナーさん達の役にたてるよう、今回記事にさせてもらうことにしました！ 実際にWEB制作に携わる中で、聞いたことのある物を分類させて頂くので、僕の勝手な分け方になってしまい申し訳ない限りなんですが、何かナビゲーションやレイアウトに悩んだ時にでも参考か何かにしていただければ嬉しい限り
[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル
モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>Hello I'm zoom in modal window</h3> I'm coming using scale transform, using transform: scale() <br> From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come
[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
[CSS]CSS3アニメーションを美しく使ったUIエレメントを作成するチュートリアル
通常時は画像が配置されたパネルで、ホバー時には元画像に重ねて、半透明のアニメーションで情報を見せる「Dribbble」風のエフェクトを実装するスタイルシートを紹介します。 本家よりこっちの方がかっこいいかも。 Using CSS3 Animations to Build a Sleek Box UI [ad#ad-2] デモ 実装 デモ デモではCSS3に対応したブラウザ、Firefox4+, Chrome, Safari, Opera, IE9+でご覧ください。 ホバー時 実装 HTML パネルはdiv要素で実装し、画像やホバー時のコンテンツを内包します。 <div id="container"> <div class="boxxy"> <a href="http://dribbble.com/shots/489532-Banking-App" target="_blank" class
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【web・UIデザイン】ハイセンスでスタイリッシュなCSS3メニュー作成チュートリアル40+ - いぬらぼ
壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 猫384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
新着記事
新着記事
[CSS]CSS3を使うとこんなこともできる！紙を折ったり反らしたするかっこいいエフェクト
表現力は無限大！Photoshopを駆使して作る美しきタイポグラフィチュートリアル色々（壁紙ネタ多目） | バンクーバーのうぇぶ屋
