Adobe Illustratorによる「リアルイラスト」作成講座／新作・堀北真希さん＿２日目

次のアポまで１時間ほどあるんで、今日は目、鼻、口を描きます。

各部位のみを描いても良いんだけど、今回は鼻と口については、下レイヤー（顔皮膚レイヤー）との繋ぎをスムーズにしたいと思って、ちょっと外側まで描きました。

※後になって外側まで描いた事に後悔しましたが、この時は知る由もなし。

まず、目です。
たぶんイラストの出来栄えの7～8割はここできまります。














特に重要なのは、目の輪郭線と、黒目の比率です。







元の写真をよ～く見て、精度高く描いてください。
まつ毛のボリュームが多い場合は、まつ毛は分離して描いた方が良いかな。





描きあげたあとに、目のハイライトを適当に入れます。
実際の黒目にハイライトがくっきり入ってることはあまりありませんが、ハイライトを大きめに入れた方が綺麗な目になると思います。
この時点では、少しだけ入れておき、仕上げの段階で調整します。

ちなみに、目の色が薄い外国人等は「瞳孔」をくっきり入れた方が綺麗です。


そして鼻。
皮膚レイヤーで処理しても良いんですが、鼻の輪郭線を強調するには別レイヤーで描いた方が描きやすいです。

鼻の穴や、鼻の下の人中は強調しないように、実際よりは控えめの描写がgoodです。

次は口、
今回はちょっと外側まで描いたけど、唇だけ描いた方が良かったと反省。

何故なら、下の皮膚レイヤーとの境界を整える為に、不必要なアンカーポイントをいっぱい作らないといけなくなったから。
でも、今からやり直すのはめんどうなんで、今回はこれで我慢。





女子を描く場合、唇はちょっと小さく、ちょっとふっくら描いた方が可愛い感じになります。
ほんのちょっとだけどね。





ここまで仕上がったら、全体をプレビューして、近くから見たり、遠くから見たりして微調整しましょう。




顔さえできれば、あとは手抜きできます。（笑）

ここまでで約１時間。

続きはまた明日。

Adobe Illustratorによる「リアルイラスト」作成講座／新作・堀北真希さん＿１日目

ハンドル操作や着色の細かな部分の質問が多いので、久しぶりに新作を描こうかなと。

さて、誰にしようか迷いましたが、ネットで人気女優ランキングを見ると、堀北真希さんが描きやすそうだったんで（髪型の描きやすさ基準です、汗）、堀北さんの画像探しから。

ネット上にいろいろあったけど、真正面っていうのもつまらないのでコレにします。




今回の制作は仕事じゃないんで、手の空いたときに気分転換としてちょこちょこ描きます。

まあ、一日２時間で一週間．．．ってとこかな。




先ずは、ザックリ下絵を描きます。

タッチペンとかの方が描きやすいんだろうけど、私の場合はマウスの方が好きなんでマウスで。





赤線が、なんとなくの外郭線。
青線が補足線で、なんとなくの皮膚の流れ。



顔から描写開始！


っと、その前に、質問が多いグラデーションメッシュのハンドルについて。











ようするに、ハンドルでグラデーションの方向や量が決まります。
このアタリを念頭にして制作開始です。


例の如く、四角形で軽くグラデーションメッシュ線を入れてから形状を輪郭に合わせる。





次に、皮膚の流れや、光と影を意識しながらアンカーポイントに着色していきます。















なんといっても似顔絵なんで、顔は丁寧に描きましょう。
画面を大きくしたり小さくしたりしながら
メッシュポイントを増やしつつ
全体のグラデーションバランス等を整えます。





目と鼻口は別レイヤーに描くんで、この輪郭レイヤーではメリハリだけをつけておいてください。
グラデーションのハンドルは上記の感じなんで、ちょっとそのあたりも注意してください。
ある程度メッシュが出来上がったら、元の写真とイラスト全体を見ながら色の微調整をします。


可能な限りメッシュ線が少ない方が、グラデーション自体が綺麗なんですが、リアルに近い描写をするには、たぶんこのくらいは必要だと思います。

ちなみに、いかにもイラストって仕上げにしたい場合は、この半分くらいのメッシュで十分です。


ふ～っ、ここまでで約２時間．．．．．
久しぶりなんで疲れました。

なんといっても根気を楽しめるかどうかが勝負（笑）の作品なんで、今日はここまで。

明日、続きをガンバります。

イラストレーターで描く似顔絵（グラデーションメッシュの使い方）／藤原紀香

イラストレーターで描く似顔絵（グラデーションメッシュの使い方）

オフィシャルサイトの方でとってもアクセスが多いようなんで、このブログでも書いておきます。




イラストレーターって、ネーミングから察するに、adobeがイラストを描く為に始動したアプリなんだろうけど、実際に業務で使うのは、ほとんどレイアウトソフトとしての使い方になっちゃってますよね。
昔は、クオークやページメーカー使いのデザイナーもいたけど、今はいないでしょうね。
てか、ソフト開発も止まってるみたいだし。

まあ、前置きはこのくらいにして、さて本題に入ります。

そんなこんなで、イラストレーターでの似顔絵制作ですが、
ようは、グラデーションメッシュを使いこなせるかどうかです。

まず、完成作品はこんな感じです。




オフィシャルサイトの方では『木村拓也さん』を制作例にしてますが、ここでは『藤原紀香さん』を見本にします。（あまり似てないですが‥汗）

まず、写真か何かを見ながらザックリとした下絵をかきます。





顔から描くんですが、似顔絵の場合は、『目』が命です。
それに、皮膚と同じレイヤーだと描きにくいので、顔の皮膚レイヤーと、目鼻口レイヤーに分けます。

下書きした輪郭に沿って顔を描きます。
ここで注意事項と言うか、必殺技（笑）と言うか、全パーツ共通ですが、輪郭線をトレースしてからグラデーションメッシュをいれると、アンカーポイントが複雑になりすぎて、あらぬ方向にメッシュ線ができちゃいますので、最初に描くのは単純な『円形』か『四角形』です。

多分『四角形』から描き始めた方が、グラデーションメッシュを操作しやすいと思います。

四角を描いて、グリッド的に適当にメッシュポイントを入れておいてから
輪郭に沿ってアンカーポイントのハンドルを整える感じです。












で、皮膚の流れに沿ってブラメーションメッシュでアンカーポイントを調整します。

肌の色って、要するに光の濃淡なんで、ベース色から明るくしたり、暗くしたりが基本です。
所々に紅をさす感じでピンクを少し加えると一層良い感じになります。

イラストなんで、シワ・シミやほくろは無視しましょう（笑）








だいたいこんな感じです。




次に首から下も同様に










次は髪の毛。
リアルに描きたいのなら、一本一本丁寧にって感じですが
さすがにそんなことは出来ないので、大まかにブロックに分けます。








ここまでを全部あわせるとこんな感じです。





最後は、似顔絵で一番重要な「目」「鼻」「口」です。

これが似てるか否かで「似顔絵」のクオリティが決まってしまいます。

なので、ここだけは別レイヤーで真剣に描きます。

まず、下絵を描いて着色。








一層丁寧にグラデーションメッシュで着色







下の皮膚レイヤーとの境目を整えます。










下絵を外して、全体を見るとこんな感じに仕上がります。




最後は、photoshop等で色調整やコントラスト、
お好みで背景等をつければ完成です。



どうですか？
根気さえあれば、そんなに難しくないでしょ。

オフィシャルサイトの方では「木村拓哉」さんを描いていますので、参考までにどうぞ。


また、作業工程をyoutubeにアップしましので
興味ある方はどうぞ。

roundabout／くるくるまわるカルーセルスライダー【jquery】

roundabout くるくるまわるカルーセルスライダー【jquery】


カルーセルスライダーってたくさんありますが
本日は、ターンテーブルのように画像がくるくる回転するjQueryプラグイン「roundabout」の紹介です。





サンプルはここです。



まずは、ここからjsをダウンロード。



Jquery本体は、いつものごとくGoogleのCDN サービスを利用。

ダウンロードしたら「head」部分で読み込み。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.roundabout.min.js" type="text/javascript"></script>

HTML内の表示したい箇所に、
たとえば画像６枚をくるくる回したい場合は

<ul id="sample">
    <li><img src="images/image_round1.jpg" width="500" height="200" alt="テスト表示01" /></li>
    <li><img src="images/image_round2.jpg" width="500" height="200" alt="テスト表示02" /></li>
    <li><img src="images/image_round3.jpg" width="500" height="200" alt="テスト表示03" /></li>
    <li><img src="images/image_round4.jpg" width="500" height="200" alt="テスト表示04" /></li>
    <li><img src="images/image_round5.jpg" width="500" height="200" alt="テスト表示05" /></li>
    <li><img src="images/image_round6.jpg" width="500" height="200" alt="テスト表示06" /></li>
</ul>

と記載する。
クリックで別ページ等にリンクしたい場合は普通に「a href="#"」で囲む。

ただ、これだと自動的に再生されないのでオプションを好みに応じて指定。
これはHead内記載でも良いし、別ファイルにjsを記載してリンクさせてもＯＫ。
スピードや傾斜角の調整でいろいろな形に表示できます。

$(document).ready(function() {
    $('#myRoundabout').roundabout({
        tilt                 : -1, //傾度
        minOpacity           : 0.1, //最小不透明度
        minScale             : 0.1, //最小スケール
        autoplay             : true, //自動再生
        autoplayDuration     : 5000, //自動再生の間隔時間
        autoplayPauseOnHover : true, //ホバー時に自動再生を停止するかどうか
        btnNext: "#next", //次へスライドする要素
        btnPrev: "#prev" 前へスライドする要素
    });
});

あとは、CSSで微調整
たとえば

/* calrse */
#myRoundabout {padding: 0;}
#myRoundabout ul {
list-style: none;
    margin: 0;
}
#myRoundabout li {
    list-style-type: none;
}
.roundabout-holder {/*全体表示幅*/
list-style: none;
width: 51.25em;
height: 13.5em;
margin: auto;
}
.roundabout-moveable-item {/*アイテムの大きさ*/
height: 12.5em;
width: 31.25em;
cursor: pointer;
}
.roundabout-moveable-item img {/*画像の大きさ*/
    height: 12.5em;
    width: 31.25em;
    border: none;
}
.roundabout-in-focus { cursor: auto; };

こんな感じでＯＫ．

ただし、なぜかCSSのサイズ調整はpxでは効かないのでemで。

その他のオプションは下記です。



オプション名／初期値／説明
bearing／0.0／初期の横方向の相対値
tilt／0.0／傾度
minZ／100／最小z-index
maxZ／280／最大z-index
minOpacity／0.4／最小不透明度
maxOpacity／1.0／最大不透明度
minScale／0.4／最小スケール
maxScale／1.0／最大スケール
duration／600／アニメーション時間
btnNext／null／次へスライドする要素
btnNextCallback／function() {} ／次へスライドしたときのコールバック関数
btnPrev／null／前へスライドする要素
btnPrevCallback／function() {}／前へスライドした時のコールバック関数
btnToggleAutoplay／null／自動再生の開始と停止の切り替えをする要素
btnStartAutoplay／null／自動再生を開始するための要素
btnStopAutoplay／null／自動再生を停止するための要素
easing／"swing" ／イージング
clickToFocus／true／要素をクリックするとスライドしてフォーカスをするかどうか
clickToFocusCallback／function() {} ／現在の要素以外の要素をクリックしてアニメーションが終了した後のコールバック関数
focusBearing／0.0／フォーカスしている軸の位置
shape／"lazySusan"／スライドの形状
debug／false／デバッグモードの切り替え
childSelector／"li"／対象要素
startingChild／0／初期にフォーカスする要素のインデックス番号
reflect／false／スライドする方向（true = 時計回り、false = 反時計回り）
autoplay／false／自動再生
autoplayInitialDelay／0／自動再生の開始遅延時間
autoplayDuration／1000／自動再生の間隔時間
autoplayPauseOnHover／false／ホバー時に自動再生を停止するかどうか（離れると自動再生が再度開始する）
enableDrag／false／ドラッグでスライドするかどうか
dropDuration／600／ドロップした時のスライドの速度
dropEasing／"swing"／ドロップした時のイージング
dropAnimateTo／"nearest" ／ドロップした時の吸着する方向
dropCallback／function() {}／ドロップした時のコールバック関数
dragAxis／"x"／ドラッグできる方向
dragFactor／4／ドラッグでの移動速度（値が大きいほど移動する要素が少なくなる）
responsive／false／レスポンシブに対応するかどうか

文字「大・中・小」、フォントサイズの切り替え【jQuery】

ユーザビリティという名の下に、
一時期、ヘッダー右上あたりに「文字・大・中・小」ってやつが増えましたよね。




ユーザビリティでの設置であれば、「小」は、いらないだろって思いますが。

老眼世代向けに「標準」＋「大」あたりで良いかも。
でも、タイトルまわりを画像文字にしているサイトが多いので
その場合は、あまり威力を発揮できないかも（汗）・・・・。

基本的には、ボディ文章は少し大きめの14px位を基準にして、拡大で128%位にもっていくのが良いかな．．．なんて思ってます。
フォントサイズ切り替えのサイト作成であれば、可能な限りタイトル周りもテキストにするのがユーザビリティの本筋だと思います。
（DIVの背景等に制約が多くなっちゃいますけどね。）

そんなこんなで、設置方法ですが
大きく分け２通りあります。

ひとつはCSSで切り替える。
（文字大中小ボタンがcssの切り替えボタン）
もうひとつがjQuery等のjsを使うパターン。
（functionで領域内のテキストサイズを変化させる）

今回は二つとも説明します。


css切り替えの方は、簡単に説明すると
文字大中小の3パターンのcssを書いて、ボタンで切り替える方法。
ただ、この場合は、フォントサイズを可変させたいid、class全部を３通り書くことになるんで
使用するセレクタが多いと大変面倒な作業になります。
シンプル構成サイト向きってところでしょうか。

たとえば


a_sample.cssに

.copy {
  font-size:14px;
  color:red;
}

b_sample.cssに

.copy {
  font-size:18px;
  color:red;
}

c_sample.cssに

.copy {
  font-size:21px;
  color:red;
}

と記載するイメージです。

スタイルシートの切り替えは「styleswitcher.js」等を使います。
ココから「styleswitcher.js」をダウンロード。
ページの下の方にあるDownload styleswitcher.js　というところからダウンロードできます。

head内記述は

<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />　//共通css
<link rel="alternate stylesheet" type="text/css" href="css/a_sample.css" title="small" />
<link rel="alternate stylesheet" type="text/css" href="css/b_sample.css" title="standard" />
<link rel="alternate stylesheet" type="text/css" href="css/c_sample.css" title="large" />

<script type="text/javascript" src="js/styleswitcher.js"></script>

※切り替えるcssのrel属性は”alternate stylesheet”です。

で、htmlのお好きな場所に切り替えボタンを設置。

<ul>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('small'); return false;">小</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('standard'); return false;">中</a></li>
<li><a href="javascript:void(0);" onclick="setActiveStyleSheet('large'); return false;">大</a></li>
</ul>

onclickイベントでcssを切り替えます。
切り替えボタンは共通cssでお好きなデザインを施してください。

以上です。


サンプルはこちら






つぎに、jQueryのライブラリを使って指定範囲のフォントサイズを一気に切り替える方法。


これは、syujiさん作のソース、このサイトに詳しく出ていますが、私もこの方法が良いかなと思います。


まず、jquery.jsとcookieを扱うjquery.cookie.jsを入手
jquery.cookie.jsはここにあります。


jquery.js（本体）はどこにでもころがってますが
いまはGoogleのCDN サービスが便利です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

とか書いとけば勝手にバージョンアップしてくれるしね。

headで読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

その上で、フォントチェンジのjsを作成

(function($){

    $(function(){
        fontsizeChange();
    });

    function fontsizeChange(){

        var changeArea = $("#changeArea");      //フォントサイズ変更エリア
        var btnArea = $("#fontSize");    //フォントサイズ変更ボタンエリア
        var changeBtn = btnArea.find(".changeBtn");   //フォントサイズ変更ボタン
        var fontSize = [86,100,128];                //フォントサイズ（HTMLと同じ並び

順、幾つでもOK、単位は％）
        var ovStr = "_ov";              //ロールオーバー

画像ファイル末尾追加文字列（ロールオーバー画像を使用しない場合は値を空にする）
        var activeClass = "active";               //フォントサイズ変更ボタ

ンのアクティブ時のクラス名
        var defaultSize = 1;                        //初期フォントサイズ設定

（HTMLと同じ並び順で0から数値を設定）
        var cookieExpires = 2;            //クッキー保存期間
        var sizeLen = fontSize.length;
        var useImg = ovStr!="" && changeBtn.is("[src]");

        //現在クッキー確認関数
        function nowCookie(){
            return $.cookie("fontsize");
        }

        //画像切替関数
        function imgChange(elm1,elm2,str1,str2){
            elm1.attr("src",elm2.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-

z]+)$"),"$1"+str2+"$2"));
        }

        //マウスアウト関数
        function mouseOut(){
            for(var i=0; i<sizeLen; i++){
                if(nowCookie()!=fontSize[i]){
                    imgChange(changeBtn.eq(i),changeBtn.eq(i),ovStr,"");
                }
            }
        }

        //フォントサイズ設定関数
        function sizeChange(){
            changeArea.css({fontSize:nowCookie()+"%"});
        }

        //クッキー設定関数
        function cookieSet(index){
            $.cookie("fontsize",fontSize[index],{path:'/',expires:cookieExpires});
        }

        //初期表示
        if(nowCookie()){
            for(var i=0; i<sizeLen; i++){
                if(nowCookie()==fontSize[i]){
                    sizeChange();
                    var elm = changeBtn.eq(i);
                    if(useImg){
                        imgChange(elm,elm,"",ovStr);
                    }
                    elm.addClass(activeClass);
                    break;
                }
            }
        }
        else {
            cookieSet(defaultSize);
            sizeChange();
            var elm = changeBtn.eq(defaultSize);
            if(useImg){
                imgChange(elm,elm,"",ovStr);
                imgChange($("<img>"),elm,"",ovStr);
            }
            elm.addClass(activeClass);
        }

        //ホバーイベント（画像タイプ）
        if(useImg){
            changeBtn.each(function(i){
                var self = $(this);
                self.hover(
                function(){
                    if(nowCookie()!=fontSize[i]){
                        imgChange(self,self,"",ovStr);
                    }
                },
                function(){
                    mouseOut();
                });
            });
        }

        //クリックイベント
        changeBtn.click(function(){
            var index = changeBtn.index(this);
            var self = $(this);
            cookieSet(index);
            sizeChange();
            if(useImg){
                mouseOut();
            }
            if(!self.hasClass(activeClass)){
                changeBtn.not(this).removeClass(activeClass);
                self.addClass(activeClass);
            }
        });

    }

})(jQuery);

好きな名前をつけてheadで読み込みます。

たとえば

<script src="jquery.font.js" type="text/javascript"></script>

で、htmlのお好きな場所に切り替えボタンを設置。

<ul id="fontSize">
 <li class="changeBtn">小</li>
 <li class="changeBtn">中</li>
 <li class="changeBtn">大</li>
</ul>

ボタンを画像にする場合は

<ul id="fontSize">
 <li><img class="changeBtn" src="sample-s.gif" alt="小"></li>
 <li><img class="changeBtn" src="sample-m.gif" alt="中"></li>
 <li><img class="changeBtn" src="sample-l.gif" alt="大"></li>
</ul>

オンマウスで画像を変化させる場合は
ファイル名に「_ov」を追加。
たとえば、ロールオーバー前の画像がsample-s.gifならsample-s_ov.gifというファイル名にする。
jsのオプション指定と連動しているんで、もし何らかの事情で「_ov」の文字列を変更する場合はjs内記述も変更すること。


あとは、可変させたいエリアを

<div id="changeArea">
～
</div>

で囲む。

<ul id="fontSize">
<div id="changeArea">

の各セレクタはさっき作成したjsにあわせてるんで
名前が気にくわなかったら変更可ですが、jsとhtmlで一致させてください。
あと、フォントの拡大縮小割合もjsの９行目を変更してください。
デフォルト設定やクッキーの保存期間もjsの上部で変更です。

なぜ、クッキーを設定するかというと
前回来訪した人が「文字大」でサイトを閲覧した場合、次に来場したときもデフォルトで「大」にするためです。

以上になります。


サンプルはこちら