スライス機能とは スライス機能とは、1つの画像を複数に分割できる機能です。 スライス機能は切り抜きツールを発展させたもので、並べられた画像などを一度に切り抜くのに便利です。 この機能を使えば、Web ページに表示する画像を複数に分割し、1枚の画像のように表示できます。 今回は以下の画像をもとに、スライス機能を使って画像を書き出す方法を紹介します。 領域を指定する まずは1つのつながった画像の中から、画像として書き出したい領域を指定します。 今回、指定方法として以下の2つを紹介します。 どちらを使っても大丈夫です。 個々に領域を指定する方法 ガイドに合わせて領域を指定する方法 個々に領域を指定する方法 まずは対象の画像を開きます。 次に、Photoshop画面の左側のツールバーにある切り抜きツールのアイコンを長押ししてください。 そうするとサブメニューが表示されるので、この中の「スライスツー
Photoshopで吹き出しイラストを作ります。 吹き出しイラストは吹き出しイラストを作成する方法（イラストレーター）でもご紹介しましたが、イラストレーターで作る事が多いです。 Photoshopにもカスタムシェイプに吹き出しのイラストが搭載されています。ただ今回は、図形ツールを使用してオリジナルの吹き出しイラストを作成したり、カスタムシェイプを変形・組み合わせて作る吹き出しイラストも説明していきたいと思います。 目次 1.カスタムシェイプの吹き出しイラスト 2.図形やカスタムシェイプを組み合わせて作る吹き出しイラスト 3.パスで吹き出しイラストを作る 4.作った吹き出しイラストを部分的に変形する 5.吹き出しイラストの縁取り・塗りつぶし・模様の付け方 Photoshopにはあらかじめ数種類の吹き出しイラストが用意されています。 カスタムシェイプツールを選択し、オプションバーのカスタムシェ
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。 それぞれの作成方法をご紹介します。 クリッピングマスク レイヤーマスク ベクトルマスク（CS6, CC） ベクトルマスク（CS5？以前） クリッピングマスク すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。 一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。 01) 切り抜きたい形のオブジェクトを作成します。 パスの図形でも、フリーハンドの図形でも大丈夫です 02) 切り抜きたいレイヤーを、その上に置きます。 03) レイヤーの間を、「Alt+クリック」します。 アイコンが写真のように変化し、マスクがかかりました。 調整レイヤーも同じようにマスクがけできます。 レイヤーマスク 選択
ルーチンワークのひとつで「幅290ピクセル、高さ140ピクセルにサムネール画像を切り抜く」というものがあるのですが、これまで私は次のように作業していました。 ［選択ツール］を選ぶ オプションバーで［縦横比を固定］を選択し、［幅：29、高さ：14］を入力 切り抜きたいエリアをドラッグして決定 ［イメージ］メニューの［切り抜き］をクリック ［イメージ］メニューの［画像解像度］をクリックして［画像解像度］ダイアログボックスを表示し［幅］に「290」を入力して実行 その後、シャープネス、色調補正を最終調整して書き出します。キーボードショートカットを設定してあったり、アクションを作っているので作業自体は超早いのですが、なんとも面倒です。 先日のバンフーセミナーにて、参加者の方から「それ、切り抜きツールでできますよ！」と教えていただきました（ありがとうございます！）。 ［切り抜きツール］を選ぶ オプシ
Photoshopの「Web用に保存」の設定をなんとなくやっていませんか？ 私もそのうちの一人です。今日からその“なんとなく”とおさらばするために、今回は「カラープロファイルの埋め込み」について調べてみました。 目次 1、チェックなしすると画像の色が変わってしまう 2、カラープロファイルについて 参考資料 カラープロファイルを使用した画像は、「カラープロファイルの埋め込み」にチェックを入れて保存する必要があります。 1、チェックなしすると画像の色が変わってしまう 環境やデバイスによって、画像の色が変わってしまうことがあります。 下図は、実際にGoogle ChormeとSafariで画像を表示して、色を比べてみたものです。カラープロファイルを埋め込まなかった方は、Google Chromeでカラーコードの数値が微妙に変わってしまっています。 2、カラープロファイルについて 2-1、カラープ
2016年6月20日に、AdobeのCreative Cloudがアップデートされました。バージョンは、2015.5と「.5」がついただけですが、前回の2015.1から、4つ飛ばしになり、新機能がかなり搭載されています。 Photoshop CC 2015.5の魅力的な新機能を紹介します。 誰もが恩恵を受けるのは「フォントリストの読み込みが4倍速」になったことでしょうか。これによりロード時間が圧倒的に早くなりました！ 地味ですが、こういうアップデートは非常に嬉しいですね。 Adobe Photoshop ※Adobeの画像の掲載にあたり、Adobeの広報様に許可を頂いています。 Photoshopで「カワイイ」「笑顔」「小顔」が簡単に作れる 「コンじる」が大幅にパワーアップ、新機能も登場 正確な選択範囲とマスクの切り抜き作成が簡単に、しかも速い 字形の機能が強化、フォントのスワッシュも簡単
できるだけ正確な円弧をIllustratorで作成するとき、いつも自分がとっている手法を紹介します（ここで言う「円弧」とは、正円の一部を切り出した一定の曲線のことです）。以前の記事、「Illustratorで接線（正円に接する直線）を作る方法」と同様に基本的な作図の考え方です。実は昨年の10月頃から書こう書こうと思っていたんですが、イシジマミキさん（@woopsdez）が「dot-ai2」のセッションの中で弧を描くというネタを披露されていたため、さすがに直後はマズいかなって思って控えていました。実際には色々な方法があると思いますが、手法の一つとして参考にしてください。ちなみに、「dot-ai2」はまだビデオ参加できるので興味のある方はぜひ。自分も登壇しています。 今からやりたいことフリーハンドでざっくりと描いた円弧を奇麗にトレースする手順でやってみましょう。とにかく円弧の中心点さえ分かれば
ゴールド・シルバー・アルミ・チタンなど、金属の素材の違いによって質感を塗り分ける描き方 -Material Studies
何度もすいません。 ＃２は５pixelになってますね。 ＃２の回答は忘れてください。 ３pixelなら □が最低で２pixelないと駄目ですし □のpixel数で間隔を自由に出来ます。 ５pixel×５pixelのユニットで ■□□■■ □□■■■ □■■■□ ■■■□□ ■■□□■ ４pixelでは ■■□□■■ ■□□■■■ □□■■■■ □■■■■□ ■■■■□□ ■■■□□■ ５pixelでは ■■■□□■■ ■■□□■■■ ■□□■■■■ □□■■■■■ □■■■■■□ ■■■■■□□ ■■■■□□■ 一般の線幅で考えると 線幅pixelプラス２pixel以上のユニットであればいいです。 右下は一つのピクセルだけ塗りつぶして 左上は不足分のピクセル分だけ塗りつぶします。 なんとなくわかりますか？
■使用Photoshopバージョン：Photoshop Elements 4.0 作成：10.22.2006 改訂：MM.DD.YYYY ４×４ピクセルで新規にファイルを作成します。 作業をやりやすくするため、最大の１６００％まで表示を拡大します。 新規レイヤーを作成し、レイヤーパレットで、「背景」の目玉マークをクリックして 背景レイヤーを非表示にします。 鉛筆ツール（）を使用して、画像をクリックし、次のような斜めの線を描きます。 ［編集］メニューの［パターンを定義...］をクリックして、適当な名称をつけます。 ここでは「斜め線」にしました。 適用する写真やイメージを準備します。 新規にレイヤーを追加します。 ［編集］メニューの、「レイヤーの塗りつぶし...」を選択し、使用に「パターン」、 カスタムパターンに先ほど定義した「斜め線」を選んで実行します。 レイヤーパレットで、パターンで塗りつ
Photoshopでスライスし、パーツ画像を作成するコツと方法印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライス（分割）し、HTMLとCSSで組立ててWebサイト上に表示します。「実践で学ぶWebサイト制作ガイド」5回目ではそのスライス作業に注目！私は普段Fireworksを使ってスライスしていますが、ここでは前回と同様Photoshopを使ったスライス方法を紹介します。実践に入る前に、いくつかのポイントもおさえておきましょう。 実践で学ぶ Web サイト制作ガイド：その 5目標：コーディングしやすいパーツ画像を用意できる必要なもの：Adobe Photoshop対象レベル：Photoshop の基本的なツールの使い方がわかる目次誰のため？何のため？Web サイトを作り始める前に。Web サイトの構成図を簡単に作れる便利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く