新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
メタルの質感が美しい、ゴールドとシルバーのグラデーション素材
ゴールドとシルバーで全400種類以上が揃っている、メタルのグラデーションが美しいPhotoshop用の素材を紹介します。
iPhone風のグラデーション表現が詰まったPhotoshopグラデーションファイル「iPhone Gradation Set」:phpspot開発日誌
iPhone Gradation Set by ~woopsdez on deviantART iPhone風のグラデーション表現が詰まったPhotoshopグラデーションファイル「iPhone Gradation Set」。 ワンクリックで図形をiPhone内のオブジェクトっぽくできちゃいます。 そもそものiPhoneのUIが素晴らしいわけですが、それをお手軽に再現できちゃうというのは便利です 関連エントリ 立体的に見せたりできるPhotoshop用グラデーションセット集 ストックしておくと楽できそうなPhotoshop用グラデーション392種類 背景やボタンなど様々に使えるPhotoshopグラデーションセット集
「少しの手間で大きく変わる、細部にこだわったWebデザイン」をできるだけCSSでやってみた - 今日もスミマセン。
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス を読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。 デモページ とりあえず完成品が見たい方は、ここ まず基本となるHTMLを用意する とりあえず、角丸四角形でボタンらしきものを作る。 <html> <head> <style type="text/css"> .buttonBase { position: relative; width: 300px; background-color: #3699D0; text-align: center; border-radius: 10px; cursor: pointer; } .caption { color: #02659C; font-family: impact; font-size: 40pt; font-weig
ウェブ業界は人材が余っていて人材が不足している
ある企業サイトの作成に関わっていた。サイトに真剣に向き合いながら、一度決めたことをひっくり返すようなことは言わない、よいクライアントだった。 作成に関わったので贔屓目もあるかも知れないが、よくできたサイトだった。好みの違いはあっても、誰に見せても「合格」をもらえるデザインだったと思う。 作ってから何度か改修があり、若干テイストが変わることもあったが、一貫して企業サイトとして恥ずかしくないデザインだった。改修のたび、担当のディレクター・デザイナーが愛情を持って頑張っているんだな、と思っていた。 そのサイトのトップがまた改修した。 ダサい配色、適当なグラデーション + 角丸 + ドロップシャドウ、カーニングが調整されていない文字……。 素人のようなデザインだった。 これでクライアントのOKが出たことに驚いた。と同時に、それを提出したディレクターが許せなかった。それ以上に、これでデザイナーとして
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
Photoshopの基本機能だけでミニサイズのアイコンを作成するチュートリアル
Photoshopの基本的な機能を使うだけで、ミニサイズのアイコンを作成するチュートリアルを紹介します。 How to Design Mini Icons [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1：新規ドキュメントの作成 Photoshopで新規ドキュメントを作成[Ctrl+N]します。 ここでは、幅：14px、高さ：14px、背景（カンバスカラー）：透明、にします。 Step 2：アウトラインを描く 鉛筆ツール[B]を選択し、ブラシのサイズを1pxにします。描画色を暗いグレーにし、ページアイコンのアウトラインを描きます。 直線は、始点で[Shift]を押しながらクリックし、終点でクリックすると描けます。 描いたピクセルを消す時は、消しゴムツール[E]で1px単位でできます。 Step 3：ベースのグラデーション 自動選択ツール[W]で、グラデーションを適用す
画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner
手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。 Gradient-Scanner [ad#ad-2] Gradient-Scannerの使い方は簡単です。 まず、画像を「Browse」ボタンをクリックしてアップロードします。 ※画像は手元の画像だけでなく、URLでも指定できます。
Tutorial_イラレで光の表現その2 – イラレラボ illustrator-labo
イラストレーターでがんばる光の表現その2です。オブジェクトを柔らかくふんわり光らせます。Photoshopでやれよという突っ込みには耳を塞ぎつつ。 480×360pxの長方形を配置します。0%:#002800 > 50%:#004251 > 100%:#2D0058 の線グラデーションで塗ります。 アピアランスメニュー ＞ 新規塗りを追加、0%:#FFFFFF > 100%:#000000 （白から黒 の円グラデーションで塗ります。中心からやや左下をクリックしてグラデーションの中心位置を移動させ、不透明度40％ / 描画モード：スクリーンに設定します。 480×480pxの円を配置します。0％:#005368 > 100%:#000000 の円グラデーションで塗り、描画モードをスクリーンに設定します。上のあたりに位置をずらして、青い光を入れます。 光のラインを描きます。200×2pxの円を
Tutorial_イラレで光の表現 – イラレラボ illustrator-labo
Illustratorでがんばる光の表現のチュートリアルです。キラキラピカピカ。 Photoshopでやんなさいよと突っ込まれそうですけれども。イラレでやったほうがいい時もあるんです！たぶん。 オブジェクトの描画モードは基本的にPhotoshopのレイヤーモードと同じ効果です。なのでPhotoshopならではのアバウトなエアブラシ以外は実はほとんど変わらない効果が出せます。エアブラシぽいのもグラデーションメッシュ使えばできそうな気もしますが此処は割愛。 シャープな曲線をつかった光のライン等はイラレの方が描きやすいです。Photoshopでももちろんできますが。 光の基本になるのは＃FFFFFF（白）から＃000000（黒）の円グラデーションです。グレースケールではなくRGBの白黒に設定してください。 此処では位置が50％のものと20％のものの二つを使用しています。 必要に応じてスクリーンか
YouTube人気急上昇
【2016年埼玉】あれ？機械の音がなくなったな…→パートの女性がプレス機に頭をつぶされ絶命していた『埼玉県プレス工場挟まれ事故』【ゆっくり解説】
Windows 10 Mobile (Preview) の入れ方 for build 10512 - 高橋 忍のブログ- MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
https://designmodo.com/wp-content/uploads/2012/05/Photoshop.jpg
