カラースキーマの操作についてビデオを用意しました(5分程度)。よかったら、ご覧ください。http://www.youtube.com/watch?v=XMpILVv2cGA&context=C36d1a0aADOEgsToPDskJN3B6mYunDT7usGjxwa7az&w=620&rel=0次に、鳥の形と色を少し調整しましょう。(これはメジロかな?)部品の「枝」の部分は不要なので、図面に貼り付けた鳥と梅の木の枝を選択し、メニューの図形―合成―解除を選択します。すると、点だらけで表示されますが、これは正常なのでご安心を。ボタンでどんどん削除しましょう。ここまでできたのなら、次は好みに合わせて微調整ができます。僕はくちばしを少し大きくして、目の玉をじゃっかん前のほうに寄せることにしました。足を一回り大きくし、目の玉の位置を前方にして、最後にカラースキーマ機能でくちばしと胴体の色をもう少し自然な色にしてみました。自分好みにいろいろと遊んでみてください。鳥と木だけでは雰囲気がつかめないため、花子フォトレタッチで「青空」と「雲」を作ります。<操作方法>図面に鳥と木を大まかなところに配置をし、メニューの「挿入―イメージ―領域を指定して作成」を選び、カーソルのクリック&ドラッグで鳥と木を大きく囲むようにして花子フォトレタッチが立ち上がる。)をクリックして花子フォトレタッチの絵を挿入することもできるが、初期状態ではサイズが小さいため、花子フォトレタッチの「画像」―「画像のサイズ」コマンドでサイズ変更を後からする必要がある。すると花子フォトレタッチで新規画面が開きます。鳥と木のイメージが配置されているはずです。(もとの部品はもともと花子で使った図面に残っていますのでご安心ください。)この先は、花子フォトレタッチで空模様を簡単に描きます。)を選択し、「カラーパレット(基本色)」を出す。2.カラーパレット(基本色)の「追加・変更」ボタンをクリック。「グラデーション作成」のダイアログが出る。3.グラデーション作成ダイアログの「カラーバー」の小さい三角記号(▼)をクリック&ドラッグして既存の色の位置を変更するか、カラーバーの上にクリックをして「追加」パレットから新規に色を作成。グラデーションのパターンが作成できたら、カーソルを画像ウィンドウの上に置き、クリックする。画像が一面グラデーションにかかっていることがわかる。ボタンをクリックして、もう一度グラデーションをかけます。カラーパレットの「設定」ボタンでさらに細かく調整できます。いろいろな方法はあるが、一番手っ取り早いのはブラシのツールです。メニューの「レイヤー」―「新規レイヤー」を選び、雲を自由に描くためのレイヤーを作ります。)を選択し、下図のような設定をしておきます。結果として、こんな風景が描けます。花子フォトレタッチを閉じると、花子に戻り、レイヤーが統合されます。Chapman自分にとって一番大切なことはなんだろう?いろいろな関心どころがある中で、その関連性は?―そう考えたときに、花子の「図解」機能は役に立ちます。「図解」の機能は、花子2005からあり、かなり古いバージョンでも使えます。XのOmniGraffleでも、「アウトライン」を入力して割と似たようなことができるので、是非お試しあれ。)以下、花子の図解機能を「図解」と呼びます。「ライフマップ」とは?自分の人生の中で関心のあること、人、やりたいことなどを図解にしたものを「ライフマップ」と言います。単なる「人生設計」としてとらえる人もいるかもしれないが、むしろ、過去の出来事や縛りを考えずに、「これが大切だな」「こんなことがしたいなあ」「こんなことに興味がある!」などを、見える形にするのがライフマップです。作り方は自分次第です。花子のようなソフトがなくても、鉛筆と紙だけでも十分に作れるでしょう。この記事で花子の「図解」機能を特におすすめしている理由は、関心事の関連性とつながり方をすぐに把握でき、再配置・色づけ・大きさ変更ができるため、紙と鉛筆より自由度があるカモ?ということです。僕が作成したライフマップはこれです。(ちょっとゴチャゴチャしていますが。)あまり堅苦しく考えず、まず頭の中にあるものをどんどん出して、何らかの形に整理して図解にすると、面白い発見があるかもしれません。図解はどうやって作るの?・・・花子の「図解」便利機能を紹介!図解の使い方は簡単です。花子の新規図面を開き、クリップウィンドウ(画面右側)の「図解」タブをクリックして表示します。図解の種類(スタイル)を選び、「アウトライン」の黄色いダイアモンド記号のあとにひたすら文字を入力します。最後に「新規作成」のボタンをクリックしてまずは出来上がり。図解を新規作成してから、図の中のどれかの図形をクリックして、個別に編集することができます(ただしある程度まで)。線種・塗り・文字属性などが変更できます。図解全体をクリックして「カラーセット」を使えば、いろいろなバリエーションが作れます。実際に図解を作成しなくても、図解を選択解除して(図面のどこかにクリックするか、ESCキーを押す)、カラーセットのバリエーションをクリックするだけでプレビューが出ます。なにも選択されていない状態で図解の「スタイル」パレットのバレエ―ションをいじることもできます。「どんなもんが作れるんだろう」と思ったときに、事前に試してみることができ、便利です。自分の図解を作って、個々の図形を自分の好みの線色・塗り色に修正して、カラーセットのパレットの下向きの矢印アイコンをクリックすれば、そのスタイルはまた別の図解を作るときに使えます。花子2012の「クリックスタイル」は適用できない<お知らせ>花子などのドローソフトで作ったライフマップの図解、Exploring花子で共有しませんか。あなたがお作りになったライフマップを当サイトで公開します。(報酬はなにもないのですが、サンプルの記事として紹介させていただきます。著作権はもちろん、投稿者のものであり、あとから削除してほしいといわれれば対応させていただきます。Chapman2件のコメント花子のみならず、ドローソフトには「テキストボックス」(文字枠)を入力する機能が一般的に用意されている。文字枠を使って、文字の入力だけでなく、文字の配置・流れ方と細かい設定が沢山あり、ページ上にどのように文字が表示されるか、組み方は自由自在。実は花子はほかのドローソフトと比べて、文字枠は数種類あり、設定もかなり複雑です。初期状態で初めて花子を開いて文字入力ウィンドウに文字を打ち込んだときに、特になにも意識しないで文字入力はできますが、文字枠の幅や高さを調整したいときに、まず悩む方は多いのではと思います。その1・・・文字枠は自由にリサイズできない!花子の文字入力ウィンドウに文字を入力したときに、自動的に図面に表示される、という賢い仕組みになっている。そこまではよいのですが、文字枠(パワーポイントなどでは「テキストボックス」という)の幅を縮めたり伸ばしたりしたいときはどうすれば・・・?パワーポイントなどだと、文字枠(テキストボックス)の左側または右側のふちをクリック&ドラッグして、文字枠の幅を変えられます。花子は初期設定では、この操作で文字枠の幅調整はなぜかできない。ここでまずムッと来る人が多いと思いますが、文字枠の幅がこのようにして調整できない理由は、花子の文字枠は初期設定では「自由」設定になっており、文字を入力または削除することにより文字枠の大きさが勝手に調整される、という仕様になっているからです。その1」で花子の初期設定と文字枠の「自由」設定について触れましたが、文字がある領域からあふれないようにするには、どうすればよいのでしょうか。S)を選ぶ「文字枠スタイル(変更)」の「補助」というタブをクリックして、「固定」にチェックを入れて、OKをクリック。すると、文字枠の中にクリックして、文字枠の右上と左下に現れてくる白い「□」マークにクリック&ドラッグすれば、文字枠を自由にリサイズできます。Chapman長らくお待たせいたしました。Exploring花子の旧コンテンツ(2007年〜)の画像データは本日にてほとんど復旧できましたのでお知らせします。(それでも抜けているのを見かけたら、お知らせください。元データがもうないかもしれません・・・。ToT)今年は昨年と比べて大分、時間に余裕ができたので、ずっと気になっていたこのサイトのあり方はもう少し何とかしたいと思い、所々「お掃除」をしております。\(^O^)/最近はよく思うのですが、花子は真剣に使う「プロ用のツール」よりも、むしろ「グラフィックスの作成を楽しむためのツール」という位置づけではないか、と。ポスターなどなど、少しでも楽しみながらやるという開発者の方々の思い、ちょっとわかるような気がしてきました。楽しみながらブログもぼちぼち続けていきたいと思います。(とにかく、旧コンテンツはたくさんあるから、どなたかの参考になるものは絶対にあると思います・・・。Chapmanいろいろと漁ってみたところ、Exploring花子の2008年以前の画像データが出てきました。その中で、表作成に関する記事の画像(これまで抜けていたもの)も発掘できたので、早速入れ替えてみました。残念ながら花子2012(今年2月10日リリース)でも、ワードやパワーポイント、一太郎などにあるような「表作成」機能はまだ搭載されないので、当サイトにはまだまだ参考にしていただける記事があると思いますので、まず下記にて紹介します。パート2)どうぞ、ご覧ください。増える絵コンテンツがたくさんあり、絵を描く時間がない時やぴったりの絵が思い浮かばないときには、とても便利です。ところが、せっかくコンテンツのパレットに良さそうな画像があっても、図面にドラッグするとき(あるいはクリックして挿入するとき)に、そのコンテンツの一部だけの線色や塗り色を変更したくても、どうしてもできなくて困ったときはありませんでしょうか。そもそも、花子のコンテンツには「画像」と「イメージ」という二つの種類があり、「イメージ」の場合は、いったん図面に挿入してから、ダブルクリックして花子フォトレタッチで編集する必要がある。行えば、その画像をもっと細かい図形に分解し、それぞれの線色や塗り色を変更することができる。ところが、「画像」だとわかっていても、たまに合成解除ができないコンテンツもある。このバラの花のコンテンツ。簡単にバラせそうな絵ですが、合成解除しようとしても、できない。その理由は、実はこの絵は一つの「複合パス」であり、花子にとってみれば一つの決まったシェープとなっているからです。イラストレーターなどで作成してベクトルデータとして花子に読み込まれたものでしょう。説明はいいのですが、では、どうやって編集できるのでしょうか。その方法は、花子2009以降であれば、割と簡単です。問題となる図形を選択し、コピペで複製しておいてから、「作図」のタブにある「図形加工」の「アウトライン抽出」をクリックして分解できます。(その際、「加工後の図形をグループ化」のチェックを外しておけば、後工程が減ります。)これをクリックしてから、図形は下記のようなアウトラインのみになります。これで、薔薇の花の部分が一つずつ、別々に選択でき、編集できる状態になります。)で元々の塗り色を戻すことはできるし、新しく色をつけ直すこともできます。下記のようにして色を新しく変えることだって簡単です。いろいろな面白い展開はあると思います。)を使ってみるのもいいかもしれません。Chapmanご無沙汰しております。本日、旧コンテンツ(但し2008年4月26日に遡っての分まで)に一部、画像が欠落していた問題を修復しました。)また、それ以前のコンテンツについても、やはり画像が抜けているようですが、当ブログは2回も引越ししており(ジャストブログ→TypePad→現在のExploring花子へ)、元データはそもそもないコンテンツもあります。(こちらの保管が甘かったです・・・。)時間があれば、また探してみます。ユーザ様のコメントはきちんと残してありますし、これからも大事に残していきたいと思います。来年2月に、花子2012がリリースされ、本サイトの古いコンテンツがますます廃れていくかと思いますが、逆に2012バージョンになっても、花子の操作の基本はあまり変わらないところもあり、まだまだ参考にしていただけそうなところが絶対にあります。当サイトの検索機能をどうぞご利用ください。Chapman2件のコメント前回の「第1回」の記事では、グラフィックソフトでウェブ対応の画像を作成するときに一般的に期待するところを説明しましたが、今回は花子にフォーカスを当てることにします。その前に、ピクセルというものについて、復習という意味で少し基礎知識を説明したいと思います。(すでに理解されている方は飛ばしてください・・・。)■ピクセルとは?RGBとは?ウェブ(俗に言う「ホームページ作成」)の世界において標準の表示単位とは、ピクセル(pixel)のことです。「ピクセル」という言葉になじみがない人はそれなりに存在すると思いますが、言い換えれば画面の小さい点の事です。どの画面もそうですが、顕微鏡か虫眼鏡で見てみると、その映像全体は無数の小さな点で構成されていることがわかります。blueで「RGB」と呼ぶ)で構成されていることがこの画像でよくわかります。それぞれ赤・緑・青の光加減によって、何千万のうちのどれか1つだけの色を表示することができます。これはちょっとした目の錯覚でもありますが、通常の人間の視力ではその小さいRGBの点をあわせて1つの色として認識します。この合わさったものがピクセル(またはドット)と言います。上記の説明からいうと、ホームページ用の素材(イラスト、動画など)を作成する時には、センチメートルとかインチではなく、ピクセルで考える必要があります。印刷物を作るときは、cmやmmでいいのですが、紙と画面とは全く違う性質を持っているため、寸法単位も異なります。■「ピクセル」の大きさは、どの画面でも一緒?ここからが重要なポイントですが、画面でいう「ピクセル」は、すべての画面で一定の大きさという訳ではありません。高さ100ピクセル×横幅100ピクセルの画像を画面に表示したところ、画面の解像度(dpiすなわち1インチあたりのドット数)と画面自体の大きさ(一般的なネットブックは8インチ~12インチ、ノート型パソコンは13インチ~17インチ、モニターは18インチ~30インチ)によって、ピクセルの実寸が変わります。(ウィキペディアの記事が参考になります。)ちょっとした実験ですが、左の画像を定規で測ってみるとどういった寸法になるのでしょうか。当方のパソコンの画面(17インチ)では、高さ18.5mm×幅18.5mmです。画面の解像度を低くしてみると、同じ画像が高さ21.5mm×幅21.5mmになり、大きく見えます。20インチのモニターでは、幅が25.5mmです。ここでわかることは、「ピクセル」というものは、画面の仕様と解像度によって違って見えており、物理的にはあまり正確な寸法単位ではないことです。ピクセル(画面仕様)と、mmまたはcm(印刷物仕様)というのは、まったく別物です。印刷物を作るには、ページのサイズ(例:A4,B5など)を意識してページレイアウトを組みます。ウェブページを作るときは画面の大きさ(ユーザによって千差万別)を想定して、それに見合ったサイズで画像を作成するのが一般的です。■ピクセル・cm/mm、両方を扱えるグラフィックソフトとは?第1回の記事でも説明しましたが、今の時代はグラフィックソフトで画像を作成するときに、ウェブ対応が期待されます。画面(パソコン、スマートホーン、iPadなどを含める)で見る場合が多くなってきているのではないかと思います。その中、描画した画像を画面仕様(ピクセル単位)に出力することができるソフトは、ほとんどどのメーカーのものはできます(実力の差はありますが)。ドローソフトの内、花子、マイクロストビジオ、アドビイラストレーター、コーレルドロー、またOpenOfficeのDrawとInkscapeなど、GIF・JPEG・PNGといったウェブ仕様の画像の出力が可能であり、出力寸法をピクセルで指定することもできます。問題は作成するときの寸法単位です。最終的にピクセルで書き出したいのなら、ピクセルの単位で作業したい・・・と思います。簡単に言うと、花子は、残念ながらスケールはピクセル単位で表示できません。そのため、作成途中で画像が実際に画面でどう表示されるのか、正確なピクセル単位で作業することに難があります。花子は主に簡易印刷物に対応したソフトですが、やはりドローの世界で作っておいて、アイコンやボタンなどの絵コンテンツも利用しながらウェブ用の素材を作ることには花子を使えばいろいろなメリットがあります。花子はちょっとした工夫(小技)が必要です。100%のズーム率での作業に徹底すること。花子は、表示を100%ズームにしておくと、図面を画面の解像度で表示されます。そのため、画像は見た目どおり、すでに画面表示仕様、つまりピクセル等倍となります。ひとつの実験ですが、花子の新規図面を作って(Ctrl+N)、上記のテスト画像(100px×100px)を読み込みましょう。その同じ画像を別ウィンドウで、エクスプローラから開きます。花子に挿入した画像と、元のPNGファイルは画面で見るサイズがぴったりと合っていることがわかります。(ただし、100%ズームのときのみ)カスタムのスケールを使用すること。花子の「スケール」(ルーラー)は、単位オプションが限られている。そのため、サイズが正確なピクセル単位の定規を花子の図面に挿入し、それを背景ページに挿入して作業をしておくとよいでしょう。700pxの定規を作ってみました。ダウンロードして使用していただけます。花子に画像を挿入するときに、「イメージ枠のサイズ指定」のダイアログが出ることがあります。「キャンセル」をクリックして貼り付けましょう。あと、この小技を使うときは花子自体のスケールを隠しておくとわかりやすい。–(マイナス)、あるいはスケールの上に右クリックして「スケール」をクリックすれば非表示になります。シンプルな画面で作業したいときは表示メニューの「マージンの表示」のチェックを外せば、こんな画面になります。スクリーンショットをとって花子以外でウェブ素材を個別に書き出すこと。これは少々厳しい条件のように聞こえるが、花子の画像出力機能には次の難があります。白いふち(余白)が一緒に出力されてしまい、図形のもともとのサイズは保持されない。2「Web画像の切り出し」の機能を使って「ドロップシャドウ」などの図形効果が出力できない。透過色が設定できない。JPEGの圧縮設定は4段階(最高・高・中・低)しかない。これらの制限と不具合があっても、またプロ級の精度を求めないのなら、花子の標準搭載の画像出力機能を使ってもよいでしょう。Screen機能(解説)をつかってとることもできますし、市販の「SnagIt」のようなちょっとオシャレなツールでも花子の画面のスクリーンショットをとり、必要に応じて加工し、PNGやJPEGなどの形式で簡単に保存できます。Fireworksでスライスをつくり出力してもよいでしょう。Slicer(USD$14.99、シェアウェア)でも十分に(そして安価に)対応できます。(なお、スライスの作成は本格的にウェブ制作に取り掛かりたい人のためのテーマなので、後日の記事で紹介したいと思います。)何はともかく、花子(+市販ツール)はピクセル単位の画像作成には制限付きでそれなりに対応できることがわかりました。工夫(そして多少の苦労)が必要な部分、うまくやれば1~2万円くらいの範囲内で花子を中心としたWeb制作環境が揃えるのは、お財布にやさしい。Chapman2件のコメントどの道具もそうですが、ソフトはもちろんのこと、結局のところ、何のために使うのか、またその場面に役立てるかどうかで優劣が決まる。花子についていえば、特にウェブ(ホームページ)の部品の作成に強いとか、ホームページの制作に大変役立てるなどジャストシステムは主張していないようです。花子は「総合グラフィックソフト」として販売されており、花子の「技ありテクニック集」を見ても特にウェブが強みだという記述はどこにもありません。ポスター、チラシなどなど)がまだまだ消えない中、確かにウェブの存在が大きくなっている。企業と非営利団体などのウェブサイト、個人のブログ、学校の課題など、2011年にはウェブ配信はますます重要な情報伝達の媒体だ。その中、花子をはじめとするグラフィックソフトのなすべき仕事として、やはりしっかりとしたWebへの対応が必要不可欠な時代となってきました。RGBを意識したワークフローが実現できること。「スライス」、「アートボード」、「ステート」の機能と、スライスごとのファイル名設定機能などに対応できること・・・といったことが挙げられます。「総合グラフィックソフト」の花子として、今の時代に必要なWeb対応は、どこまでできているのでしょうか。これから数回にわけて上記のことを検証したいと思います。「知ったことか、アドビじゃあるまいし、たった1万円のソフトをここまで厳しく見るのは不公平」という批判の声は聞こえるかもしれません。20年以上の歴史も誇る、日本国内で開発された老舗グラフィックソフトであるからこそ、世の中の動きにちゃんと追いついているのか、それとも慢性的に出遅れているのか、ジャストシステムへの改善要望もかねて検証したいと思います。きょうはここまですが、まず上記の概略についてコメントや経験のある方は大歓迎です。