『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの?」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー(iframe)の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
こういう事も出来るんだなー、と ちょっと驚いたのでシェア。WPの テーマなんですが、既存の管理画面 を使用せず、新たに別の超シンプル な管理画面を用意し、管理できる ように設計されています。 WordPressの管理画面を既存のものとは別に用意し、そこで記事を更新できるように設計されたテーマです。確かに管理画面に拘るなら作り変えるより最初から作った方が楽かもしれない。 テーマの見た目は大きな特徴はありませんが、管理画面をオリジナルのもので管理できるようにしてあり、その管理画面も超シンプル。 通常、WordPressの管理画面は http://example.com/wp-admin/ ですが、svbtleではwp-adminフォルダと同じ階層にwp-svbtleというフォルダを置き、そこで記事を管理できるようにしてあります。 なので、管理画面のURLは http://example.com
10 Best Photoshop Shortcuts [ad#ad-2] 下記は各ポイントを意訳したものです。 サイズ変更のハンドルをすぐに見つける 作業レイヤーはそのままで、全レイヤーをフラットに レイヤーを塗りつぶす 瞬時にカラーを選択する 選択範囲の移動 ブラシサイズの簡単な調整方法 不透明度をマウス操作で調整 ダイアログを開いている時に拡大縮小 隠されてるツールの選択 カーソルを一時的に精細に サイズ変更のハンドルをすぐに見つける Photoshopに画像をペーストした際、その画像のサイズが現在の画像より大きいとサイズ変更のハンドルを見つけるのは大変です。 自由変形 Ctrl + T 画像のサイズを変更するハンドルを見つけるには「Ctrl+T」、その後に「Crtl+0」を押します。 これでその画像のサイズ変更のハンドルをウインドウの中に表示することができます。 作業レイヤーはその
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2(2011.11.01現在)です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
これからIllustratorを学ぶ人、まだ経験が浅い人向けのエントリーである。ショートカットはとにかく学習の初期の段階で、無理をして習慣にしておくと、作業時間を短縮できて、後々楽になる。最初はゆっくりでもよいので試してほしい。 またショートカットに加えて、『Illustrator ベジェ曲線トレーニングブック』を参考に、ペンツール(ベジェ曲線)の訓練をしつこくやっておきたい。 Macの方は、Ctrlをcommand、Altをoption、Shiftをshift、Tabをtab、Enterをreturnに置き換えて読んでほしい。 Shift + Tab ツール以外のパネルをすべて非表示にできる。一時的に、作業エリアを広くしたいときに使う。 スペース + ドラッグ 手のひらツールのショートカットキー。360度方向にスクロールができる。 スペース + Ctrl + 拡大したいエリアをドラッグ
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
なんとなく情報が少ない気がするので試しに 書いてみます。WordPressで運営している サイトでYoutubeをよく貼るようなことが多い ならちょっとお得、というか管理が楽になる かも知れないTipsをいくつかご紹介。自分 でも動画を使うサイトには取り入れたいカス タマイズです。 Youtubeをよくはってるサイトやブログを良く見かけますので少しでも効率が良くなればなぁと思ってTipsをいくつか書いてみました。コードばかりで何があるか分かりくいですが内容は以下になります。 ショートコードで動画を貼る カスタムフィールドで管理する z-indexが自動で効くようにしてあげる レスポンシブWebデザインに対応させる Youtubeのサムネイルを取得する 管理画面で固定の動画を管理する ショートコードで動画一覧をドバッと出せるプラグイン・TubePress ショートコードで動画を貼る ショート
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
バーはブラウザの幅いっぱい(左右・左のみ・右のみ)に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く