【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
CMYKラヴな方へのRGB補正のすすめ（追記あり） – やもめも
このエントリーは最新版があります。こちらもどうぞ 『まだCMYKで消耗してるの？〜大幅な色補正をCMYKで行ってはいけない理由〜 – やもめも』 いいわけ 印刷関係の方とお話していると、「とりあえずCMYKでないと感覚が掴めないよー」という方が多いかな、という印象を持ちました。WEBの人や合成大好きな方には今更なのでしょうが、ここではRGBでの補正を簡単に説明しようと思います。異論反論たくさん出ると思いますが、これをきっかけにRGBで触って慣れてもらえれば、というエントリですのでお手柔らかに。入ったJPEGをまずCMYK分解してから補正するぜ！な方向けのエントリです。 なぜRGBか フィルタが全部使えるぜ！とかいろいろ利点はありますが、印刷業に限って言うと きちゃない写真をいじくるのが楽になる！ とりあえずものは試し、同じ写真（暗いやつ）のCMYKとRGB版を用意して、トーンカーブで明るさ
アドビ、次期「Photoshop」は「Windows XP」をサポートせず
Microsoftが「Windows XP」をリリースしたのは2001年だが、Adobe Systemsは米国時間9月14日、「Adobe Photoshop」の現行バージョン「Adobe Photoshop Creative Suite 6（CS6）」がこのOSをサポートする最後のバージョンになることを明らかにした。 Adobeで製品マネージャーを務めるTom Hogarty氏はブログ投稿で次のように述べている。「Photoshop CS6（13.0）がPhotoshopとしてはWindows XPをサポートする最後のメジャーバージョンになることを、Photoshopチームから前もってお知らせしておきたい」 Hogarty氏はその理由として、性能にこだわった現代のソフトウェアには、最新のハードウェアグラフィックスインターフェース、特にグラフィックス処理ユニット（GPU）の能力を引き出す手
HTMLをレイヤー別けしたPSDに変換するキャプチャーソフト Page Layers が神 | fladdict
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ！ これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
画面から色情報を抽出し、Photoshopと連携するMac用アプリ『Frank DeLoupe』 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
Easy Ways to Reduce Noise in Your Images
2013年3月25日 Photoshop 暗い場所や室内で取った写真はノイズが入りやすいですよね。画像を補正する際、意外とやっかいだったりします。Photoshopには「ノイズを軽減」機能もありますが、なんだかあまり変化がなかったり…。そんなノイズを簡単に軽減する方法をいくつか紹介します。ビフォー・アフターの差にびっくりしちゃうと思いますよ！ ↑私が10年以上利用している会計ソフト！ Neat Image Neat Imageは画像のノイズ除去を自動で行なってくれるソフトです。Windows、Mac、Linuxで利用でき、Photoshop用のプラグインも使うことができます。無料版と有料版があり、無料版では大きなサイズと商用利用は不可です。今回は無料版を試してみました！
Photoshopで理論的に配色はできないものか検証してみた
最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot
CS6対応、Photoshopのレイヤー周りの機能をもっと便利にする12のツール-Trevor Morris Scripts for CS6
Trevor Morris Scripts for CS6は以前紹介したツールのCS6対応版で、6/26にリリースしました。 以前の記事は「Photoshop CS5をもっと便利にする12のツール」です。 ツール全12種 [ad#ad-2] 以下、左上から順に。 Horizontal Spacing 選択したレイヤーを水平方向に均等の間隔に分配します。 Vertical Spacing 選択したレイヤーを垂直方向に均等の間隔に分配します。 Center layer 選択したレイヤーを水平・垂直の真ん中に配置します。 Rename Layers アクティブなレイヤー全てをリネームします。 Sort Layers アクティブなレイヤー全てをアルファベット順にソートします。 Find Layer レイヤーの名前を検索します。 Hide All Layers 全てのレイヤーを非表示にします。 Sh
Photoshop & Illustrator CS6 の進化したところと不具合まとめ
5月27日に、渋谷 LightningSpot にて Webデザイナーのための Adobe CS6 検証会 をひらきました。 日曜の開催にも関わらずたくさんの方にお越しいただき、CS6 について熱い議論が交わされました。 ご参加いただいた皆様、ありがとうございました。 CS6 検証会では、Photoshop、Illustrator、Fireworks はもちろん、Dreamweaver、最後は VPS など CS6 と関係ないところまで話が飛んだのですが、この記事では Photoshop CS6 と、Illustrator CS6 の進化したところと不具合などについてまとめたいと思います。 Photoshop CS6 の進化したところや活用法 Web制作に関係ある機能の多くは Webデザイナー視点から見たPhotoshop CS6の進化したところ という記事に既に書いていますのでそこは省き
Photoshopのドロップシャドウの使い方をマスターするチュートリアル
ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。 このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。 How to Use Drop Shadows in Photoshop [ad#ad-2] 下記は各ポイントを意訳したものです。 ドロップシャドウとは レイヤースタイルのドロップシャドウ 描画モード 不透明度 角度 距離 スプレッド サイズ 輪郭 ノイズ ノックアウト 設定の保存と初期化 ドロップシャドウのサンプルファイル ドロップシャドウとは ドロップシャドウの主な用途は、2Dのイメージで3Dの奥行きをシミュレートすることです。これはオブジェクトが3Dの空間で背景の上に浮いていることを表すために、オブジェクトの後ろにオフセットのシャドウをつけます。 下記の例はドロップシャドウを変えることで、光源の大
Illustratorでリンク画像を埋め込まないとドロップシャドウがガタガタになる
概要 このページではIllustratorで、クリッピングパス（切り抜きパス）を使用しているPhotoshop EPS画像・Photoshop形式画像（PSD）をリンクした状態にしてあると、効果（アピアランス）のドロップシャドウの形がいびつになる問題について掲載しています。 実例 Illustrator CS 5.1で以下の様なデータを作成しました。 なお、環境はWindows Vistaで、Photoshop EPSにはTIFF（8ビット）でプレビューを付けました。 一番右の画像以外全てリンク配置です。 上の方のドロップシャドウは以下の様な設定になっています。わかりやすくするために「Y軸オフセット」を大きめに設定しています。またドロップシャドウの形をわかりやすくするためにぼかしは「0mm」に設定しています。 下の方のドロップシャドウは以下の様な設定になっています。少しだけぼかしを適用して
EPSのプレビューが見えてないとどんなトラブルがおこるか - ちくちく日記
PhotoshopCS5でEPS保存のプレビューにバグがある件で、先日のブログではAdobeさんが、自分とこのバグを堂々と他社のせいにしているのがあまりに面白すぎて、その話だけで終わってしまったのですが。 この件、実は印刷関係者、特に入稿受け側にとっては、かなり面倒な事故の可能性を秘めている。 同じ立場の皆様が事故にあわないように、EPSのプレビューが見えないとどんな事故になるのか実例をあげて紹介してみよう！ ■Illustratorの環境設定によっては抜けていることに気がつかない まず、このプレビューの抜けについて。PhotoshopCS5を使っていても、環境によっては作業者が抜けに気がつかない場合がある。 と、いうのも、実はIllustratorでは、配置画像の表示で何を使用して表示するかを設定する事ができる。 Illustrator環境設定の「ファイル管理・クリップボード」の項目「リ
『Photoshop CS6 betaの動画編集2』
●フレームアニメーション ↑IllustratorとPhotoshop CS6betaで作ったGIFアニメ。楕円ツールのみ使用^^ Photoshop CS6（beta版）でパネル名は「アニメーション」から「タイムライン」になってしまいましたが、フレームアニメーションも健在です。 フレームアニメーションは単純に、1フレームごとに画像が差し替わるパラパラまんがのようなアニメーション方式です。 レイヤーをフレーム化すれば簡単に作成できるので、Illustratorのレイヤーをアニメートすることも可能です。ブレンドしたものをレイヤー分配すれば超手軽にアニメが作れます。 ちょっとだけ作例を。 ↑元を描きます。ブレンドを使うのでオブジェクト数（アンカー数）と上下関係は同じにしておくこと。わかりやすくずらしていますが、実際には同座標に置きます。 ↑ブレンドで中割りを自動生成。 ↑ブレンドとグループを解
『Photoshop CS6 betaの動画編集』
InDeiginはちょっとお休み。 タダでPhotoshop CS6もらったので、ちょっとお遊びをしてみました。 beta版はExtendなので、「.mov」などの動画ファイルを開けるんです。 で、どんなもんかというと、機能的にはAfterEffectsの一部分のウルトラスーパーリミテッドエディションで、タイムラインで動画が作れます（1コマ1レイヤーとしたアニメも可能です。こっちはFireworksライクな感じでしょうか）。 動画機能はCS3のExtendからついていましたが、今回のバージョンアップでやっと画像（スマートフィルタをかけたものに対してのみ）の拡大縮小回転がアニメートできるようになったので、よくあるようなバナーなら手軽に作れます。 また、音声も入りますのでお手軽動画編集としてもなかなかよい。 使い慣れ、見慣れたPhotoshopのGUIで作業ができますし。^^ 最近はデジカメで
IllustratorやPhotoshopのグラデーションにトーンジャンプ - 初心者のためのデザイン雑学
初心者のためのデザイン雑学 以前、デザインスクールで教えていた時の内容の中から、デザイン初心者の方に特に伝えたい基本中の基本情報を再編集しています。 llustratorで作成したグラデーションやPhotoshopで作成したグラデーションも、モニタで見ている時にはきれいなのですが出力すると、縞模様（トーンジャンプ）が起きる場合があります。 Illustrator8.0以前でのグラデーションでは印刷をした場合、必ずと言ってよいほどこの現象が起きました。 当時、プロはグラデーションをIllustratorではつくらないと言われたこともあります。 しかし、当時はPhotoshopで作成したグラデーションもこのトーンジャンプが起きる場合もありました。 コンピュータでつくるからトーンジャンプは仕方が無いと馬鹿なことを言う人もいました。 Illustrator9.0からグラデーションのトーンジャンプは
Facebookページの制作に役立つ、タイムラインとニュースフィードの新レイアウトに対応したPSD素材
Facebookのタイムラインとニュースフィードをピクセル単位で忠実に再現したテンプレートのPSD素材を紹介します。 PSDは制作に利用できるようすべて編集可能な状態です。
WEB制作｜デザイン会社｜超簡単! 髪の毛の画像を1分で切り抜く方法まとめ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。 切り抜き・マスク作業で、もうイライラしない！ 誰でも、切り抜き30秒・調整30秒で完成できる方法。 WEBサイトやLPのキービジュアルでは画像を使うことが多い。 しかし、お客様から素晴らしい画像の支給があるとは限らない。 「これ、マスクしないといけないじゃないか！」 昔からマスク専用のアプリケーションがあるほど、 マスク作業・切り抜き作業というのは 利益にならないのに、手を抜けない根気が必要な作業。 しかし、今なら誰でも簡単に、1分あればできる。 今更だが、やっとAdobeのCS5シリーズをまともに使い始めたので ここで、Photoshop CS5を使った、超簡単マスク術を紹介したい。 お題の写真 こちらが今回のお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
dezignus.com
新着記事
