Slicing Images for Your Website with Photoshop
2014年8月17日 Photoshop, Webサイト制作 印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その5 目標：コーディングしやすいパーツ画像を用意できる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 目次 誰のため？何のため？Webサイトを作り始める前に
ブルーが美しいWEBサイトレイアウト作成Photoshopチュートリアル３０:phpspot開発日誌
30 Only Blue - Web Layout Photoshop Tutorials | Web Design Soul ブルーが美しいWEBサイトレイアウト作成Photoshopチュートリアル３０。 次のような美しいブルーなレイアウト作成のチュートリアルが公開されています。 ブルーの与える安心感が信頼性を高めてくれそうです。 ブルーと言っても色々な作り方があるものですね。 関連エントリ 用途別に色々と使えるWEBレイアウトのPhotoshopテンプレート集 少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル クールなWEBホスティングサイトのレイアウトを作成するPhotoshopチュートリアル 緑のすっきり綺麗なWEBレイアウト作成Photoshopチュートリアル
継ぎ目のない背景画像を作成するPhotoshopのチュートリアル | コリス
Photoshop初心者でも簡単に作成できる、ウェブページの背景に利用する継ぎ目のないシームレスな画像を作成するチュートリアルをDesign Shackから紹介します。 Create Seamless Web Background Textures in Minutes 写真の「ぼけ」のようなエフェクトをオリジナルで描き、その画像を元に継ぎ目のないシームレスな画像にします。 下記は、各ポイントを意訳したものです。 Step 1: 新規作成 Photoshopを起動して[ファイル]-[新規]を選択し、ファイルを新規作成します。 設定は、幅：800px、高さ：800px、解像度：72pixel/inch、カラーモード：RGBカラーにします。 新規作成の設定画面 次に、カンバスを「#80ac4b」で塗ります。 [Ctrl]+[A]でカンバスのすべてを選択し、カラーピッカーに「#80ac4b」を指
120+ PSD to HTML チュートリアル【記事紹介】
あとで絶対お世話になりそう過ぎる記事だったので、なんも紹介する気が無いと言うか、ほんと単に私の超ブクマ記事。 PSDデザイン→Html、CSSにする様が120掲載されている。（本当は77しかないけど） 以下からどうぞ 120+ PSD to HTML Conversion Tutorials | Marked Lines 上記に全てあります。 中はまとめ記事をまとめている感じです。 20+ Best Tutorials to Convert Psd to Html/CSS | Dzine Blog 25 Ultimate Useful PSD to HTML Tutorials | Tutorial Lounge 15+ Website Design Converting PSD to HTML/CSS Tutorials | Tutorial Lounge 38 Great Tutori
photoshopの魅力的なカスタムシェイプ60から本当に使えそうなものをチョイス
60もあれば、いいのはまぁ、それなりに有るだろうなとは思うのですが、見ても何も感じないものもありました。 感性の違いかもしれませんが、その中で『これは使えそうだ』と思えるものが７つ有りましたのでご紹介。 本当に使えそうなカスタムシェイプ とりあえず以下のエントリから。 60+ Attractive Photoshop Custom Shapes いろいろ眺めていて、これだと思えるものをチョイス。 案外少なかった。 カスタムシェイプ事態つかわないからそう感じるんだろうか・・・。 最終的にイラレでって人はあれだけど、photoshopラブリーな人にお勧め。 噴出しシェイプ デフォルトのカスタムシェイプに満足できない＋イラストレータまで使うのが面倒な人向けのシェイプ追加。 比較的様々なシュチュエーションで使えるため人気のアイテム。 イラストレータなどで自作して引き伸ばしたりっていうのが面倒な人に
商用利用可！毎日PSDファイルを提供してくれるpsdパーツ配布サイト「365psd」
TOP > Design , Photoshop > 商用利用可！毎日PSDファイルを提供してくれるpsdパーツ配布サイト「365psd」 photoshopを利用して制作をしている方にはかなり嬉しいpsdファイル。作り方にもよりますが、合成前のpsdファイルがあれば、一部分を流用したり、カスタムして広範囲で利用できます。今日紹介するのはそんなpsdファイルを毎日提供してくれる「365psd」というサイトです。 毎日、一つづつ更新されていて、多くの賛同するデザイナーによって運営されているみたいで、それだけに多種多様なpsdファイルが公開されています。公開されているファイルの中からいくつか紹介したいと思います。 詳しくは以下 ■15 ‹ 365psd セールやキャッチに使えるバッジのpsdファイル ■16 ‹ 365psd 作りこまれた幻想的なグラフィック素材。 ■13 ‹ 365p
デザイン色々なフリーのボタンPSD集:phpspot開発日誌
Ultimate Collection of Free Buttons in PSD Format | Naldz Graphics デザイン色々なフリーのボタンPSDがまとまったエントリのご紹介です。 ボタンといっても色々なデザインの仕方がありますが、サンプル例として色々と見ることが出来るので参考にできそうです。PSDファイルをそのまま変えちゃってもよいかもしれません。 ボタンも奥が深いですね。 関連エントリ CSSで出来たシンプルに使える丸っこいデザインのボタンサンプル集 超クール！iPhoneデザイン風ボタンが色々つまったPhotoShopテンプレート CSSでボタンを綺麗にスタイルするサンプル集
ロゴを（切り抜かずに）透過する - DTP Transit
支給されたロゴがビットマップのみで、かつ背景が透過されていないといったケースがあります。 トレースしようにも解像度が低くてムリ、こんなときに使えるテクニックをご紹介します。 この記事の元ネタは、CreativeTechs Tips » Isolate a Logo on a Transparent Background.です。 斜体の「背景」レイヤーになっている場合には、レイヤー名をダブルクリックして「レイヤー0」に変更します。 ロゴの透過を確認するための新規レイヤー（レイヤー1）を作成し、適当なカラーで塗りつぶします。「レイヤー1」は「レイヤー0」の下に移動します。 「レイヤー0」のサムネールをダブルクリックして、［レイヤースタイル］ダイアログボックスを表示します。［ブレンド条件］の「このレイヤー」にある白いスライダーを左方向にドラッグします。 「レイヤー0」の白地が透けますが、フリンジ
Web Designer Wall - Design Trends and Tutorials
This is an example of a detailed registration form with validation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The body of the form is given a background color as RGB(252, 228, 236). The form consists of input text fields, radio buttons, drop-down lists, and a submit button. The banner section of the form is given a background color as RGB(233, 30, 99). The JavaScript methods
ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集
繊細なテクスチャ、透明感のあるパネル、充実したフッタ、光源を模したグラデーション、1ピクラインにこだわったディテールなど最近のウェブデザインのトレンドを取り入れた、ウェブサイトのレイアウトを作成するPhotoshopのチュートリアルを紹介します。
ブロガー&デザイナーのための、ソーシャルメディアアイコン集 – creamu
TwitterやFlickrなど、ソーシャルメディアのアイコンを探している。 そんなときにおすすめなのが、『Mega Collection of The Best Free Social Media Icons for Bloggers and Designers』。ブロガー&デザイナーのための、ソーシャルメディアアイコン集です。 ブログ等に便利なアイコンがすごくたくさん紹介されていますね。 Vector Social Media Icons ベクターのアイコン集。制限なく使えますが、リンクバックは必要 Handy Icons 手書き風のアイコン集 Cute Tweeters Icon Set 有名サイトでも使われている、Twitterアイコン集 Web 2 Badges 商用無料でとてもかわいい円形のアイコン集 Function Free Social Media Icon Bonus
WEBデザインでつかえる光のエフェクトインスピレーション集「40+ Absolutely Stunning Use of Light Effects in Webdesign」
WEBデザインでつかえる光のエフェクトインスピレーション集「40+ Absolutely Stunning Use of Light Effects in Webdesign」 未来的な表現の一つとてして、最近のWEBデザインでもよく見る、光を取り入れたWEBデザイン。今日紹介するのはWEBデザインでつかえる光のエフェクトインスピレーション集「40+ Absolutely Stunning Use of Light Effects in Webdesign」です。 いくつか紹介さされていますが、今回はそのなかからいくつか気になったモノを紹介したいと思います。 詳しくは以下 ■Studio 7 Designs オーロラの光の感じをデザインに取り入れたデザイン。 ■Frisk design : Web Design & Consultancy in London 水面の光の反射を上手く表現した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
新着記事
Photoshop Vip » 保存版！クリックしたくなる「ボタン」デザインのPhotoshop用無料PSDファイル42個まとめ
Five Technologies That Will Keep Shaping the Web in 2010
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ロゴ作成で困ったときにアイデアをくれるウェブギャラリーサイト15個まとめ
新着記事
