Time flies like an arrow, fruit flies like a banana, slime flies like a boobies.

電車の分解

別にてっちゃんじゃないんだけど、短い電車が走ってるとなんか和むよね?

ブレンド機能を使ってラクする

今回は機械なので、柵とか、柱とか、窓とか色々、繰り返しパーツが多いんだよね。
何かの理由があって「手描き感」とか「ラフ感」を出すのでなければ、素直にブレンド機能を使うと良いと思う。

ブレンド機能てのは、超便利。

パーツを繰り返すだけじゃなく、異なる色同士をブレンドできたりと使ってるうち楽しくなる。
(ROBOの場合、ブレンド機能つかって配色決めたりすることもある。)

うっすらグラデーションをかけて雰囲気を出す。

今までの小物にも言える事なんだけど、ほんのりグラデ(明暗)をつけてあげるだけで立体感が出てくる。(やりすぎ注意)。ヘタなフィルタなんか使わずに「うっすらグラデ」だけ使っておけば、短時間でいい感じのが出来るから!

車と教会

前回に引き続き、今回も小物づくり
街の中央にはやっぱ教会でしょ。

全体のメリハリのために、あえて手を抜く

なんかラクしたいための言い訳にしか聞こえない気が。。。

いや、大事だっつの。
時間は無限にあるわけじゃないんだし、脇役が主張しすぎちゃダメでしょ?なんだって。

このイラストの主役は「うさぎ」で間違いないんだけど、構図が俯瞰なんだよね、建物に比べたらうさぎは豆粒くらいになっちゃう。(一羽だけ吹き出しアップで見せるけども)。

てことで主役は「うさぎの住む街」ってトコに落ち着く。

前回も書いたけど、俯瞰図で左右奥に配置された小物が存在感あると落ち着くんだよね。全部の小物がビッチリ描きこまれてると目のやりどころに困っちゃう。

てことで今回は描き込みたい欲求をセーブして、次回「電車」で発散すべし!

家のパーツ分解

パスって、細かいパーツ作ってるときに脳内麻薬でるよね?
てことで第四回はパスで家づくり

下絵でガイド引いといたのがイキてくる時

ええ話だ。数時間前にした努力が、もう報われるというね。

今回のイラストの場合、全体を引き締める役目になるのが、この家と後々でてくる電車なんだけど。この二つの小物は意識的に手を加えていくことにした。

なのでガイドも重点的にひいてある。(ハズw)

使いまわせるパーツは、使いまわす

これぞIllustratorの醍醐味の一つ。

ひとつパス切っとけば、色変えたりするだけで数種類のパーツに早変わり。複製後にちょいと微調整しときゃ、完全に別パーツだ!プラモ感覚でシャキンシャキン切りまくりー!

ちなみに複製は奥が深い。オブジェクト全体を複製してもいいし、必要な辺(パス)だけ使ってもいい。なによりパス同士のズレも防げたりするしね。コピペで作業効率上げつつ、規則正しいパスオブジェクトを組んでいけるとキレイな家ができあがる。

パーツが増えるとレイヤー順で混乱しがち

増えるワカメのごとく増殖しがちなレイヤー。
面倒でもレイヤーグループ作ったり、名前つけとくなりしとこ
のちに開いた人が迷子になるどころか、てめぇでさえ混乱したりしてダサいことこの上なし。

次回も引き続き小物づくり~

地面とその影

第三回は舞台づくり。
建築と一緒だね、土台づくりから入る。

ひし形のクロージングパスに影

上の画像を見てもらうのが早いんだけど、舞台の底辺になるパスをまず作ったワケね。このパスは最終的にはスッポリ隠れてしまう。用があるのはこのパスにかける影の方。
天空の城みたく浮かして見せたいので、舞台の底辺であるこのパスにドロップシャドウをかけとく。

画像では「不透明度 45% 乗算」ってなってるけど、コレは全体が出来てから試行錯誤した値ね。実際はアピアランスの設定をちょくちょくいじりながら進めてんの。

側面(断面)と地面を合体させれば舞台完成!

側面(断面)と地面

まず側面だけど、簡単に地層をイメージしてみた。地層マニアじゃないから、「これで地層っぽいでしょ」程度で終わり。うっすらグラデがかかってるのは、別レイヤーね。

地面(山)は、当初すんごい質感にチカラ入れるつもりだったんだけど、一面雪景色をイメージしてたから、急遽方向転換。地面パス一枚に対して「光彩(内側) 不透明度75% 乗算 ぼかし1.2mm 境界線」をかけて完成。

ちなみに、側面(断面)のところ、積雪の厚みも表現しちゃってるんだな。
ここをサボるとなーんかね、なーんかアレよねーってなるから。やっとこうね。

次回は小物づくり、一番ワクワクテカテカするとこだね。

下絵

Illustratorがワンクリックでイラスト描いてくれたら楽なんだろうけど、そんな機能ないので素直に下絵から書く事に。ROBOの場合、デジタルイラストは下準備が命。いいすぎたw
根がサボり症なので、後々ラクしたいがための下準備。

下絵は何度もアップグレードしていくのがラク

まずは紙とペン。

ペンといってもフリクションペンを使う。濃い線の方がスキャニングがラクでしょ。
それに、鉛筆感覚で書き直しできるのがイイ!
ただ、調子に乗って消しまくってると紙がヨレるし汚れる。ラフだからいいじゃんって思う人はそれでもいいけど、これをデジタル処理するときに「ゴミトリ」とかすんの面倒でしょ?だからなるだけ一発描きでいく。

でも、一発描きでミスったらどうすんの?と。

ライトボックスが大活躍すんだな。
新品の紙に下絵をトレースしつつ、気に入らないトコロを描き足したり、直したり。

簡単でいいからキッチリとガイド引いとけ。

こんな感じで。

下絵にガイド線

Illustratorはパスからガイドが作れるのが便利だね。
もうガシガシコピーしたり回転させたり、好きな角度でガイドをつけていくといい。

満足するまでトレースして下絵をアップグレードしていったら、次はいよいよIllustratorでトレース作業。後はパスでトレースするだけだ、なんてナメるヤツ。その通りです。
でも、パスなめんなよ。
早く精確に切ってこそだかんな。
目が乾くし、体の変なトコがムズムズしてくる作業は第三回から!

2011年うさぎ年賀状

今回のイラストはIllustratorのみで作成。イラレの特殊機能に依存しないように作ったから、どんなバージョンでも対応可なチュートリアルになると思う。

3Dイラストのアイデアは海外チュートリアルサイトから拝借

どんなジャンルでも一緒だと思うけど、他人の作品から刺激を受ける事は多いでしょ。しかもその作品を模倣したりアレンジしてみたりするとスキルアップを実感しやすい。ってことで今回参考にさせていただいたのは、TUTORIAL: CREATE COOL INFOGRAPHICSという記事。

まずは参考元サイトを見てみると、この後のチュートリアルが分かりやすくなるかも。
あと、こういう良質な海外チュートリアルサイトを紹介してくれているPHPSPOT開発日記さんにも感謝です。

年賀状イラストなのでウサギが主役

ROBOがイラスト描くときは、たいがい妄想しながら描いてる。

というか描きながら妄想してるのかな。今回は、参考元サイトを踏まえて作っていったので「3D」「町」というキーワードが出てきた。んで、年賀状なので「ウサギ」、冬なので「雪」「白」、ウサギが題材なので「ポップ」「かわいい」といったキーワードから妄想を膨らませていく。

キーワードや妄想が膨らんだら、いよいよ制作準備へ!
ちなみに今回のイラストは総制作時間19時間くらい。期間は11月29日~30日。
キーワード決めや妄想タイムも含んでおります。

第一回はこれにて終了、第二回は準備編!

ほぐれスライムタイトルイメージ

Illustrator でパス使いだったらイラスト作んないとウソでしょ。ってことで Illustratorパスイラストの話。簡単なイラストだけど完成するまでの工程だよ。

下絵が肝心って話

その前に「何を描くか?」とか「どんなコンセプトで?」とか色々あるけど、スッとばす。
そのへんは悩むのも楽しいトコロだから、時間のゆるす限り考えたらいい。

で、まずは下絵がコレ。

ほぐれスライム、イラストの下絵

ラフだけど、これを元にIllustratorでトレースするから丁寧に描いといた方がいい。
ポイントはオレンジ色の線。

この段階である程度完成イメージができているので、制作作業を短縮できるようにレイヤーのガイド線をひいた。今回はツヤっとした質感を出したいから「グラデーション」を使うつもりで線を引いてある。

まずはスライムの体を作り上げる

スライムといえば体の丸み。曲線。
立体感を出すためにグラデーションに気を使う。

ほぐれスライム、体部分の画像

立体感を出すのに使ったレイヤーは計4枚。
メッシュ使ったりすると妙にリアルになってしまうので、あえてグラデレイヤー重ね。
アニメっぽさが少し出るようなイメージ。

つぶらな瞳と、ぷくっとしたホッペがかわいい

題材がスライムだけに、今のままだと立体感が物足りない。
目やホッペで少しだけ凸凹感を追加してみるといい感じ。

ほぐれスライム、瞳とホッペ

目に使ったレイヤーは計7枚、ホッペは1枚

丸の集合体だから横着してアピアランス使ってもよかったけど、細かい作業で完成イメージに差がつく事が多いからちゃんとするべし。

体と目とホッペを合体させれば完成

全部重ねてから各レイヤーを微調整していく。

ほぐれスライム、体と目とホッペを合体

全部のレイヤーがグラデーションレイヤーなので、つなぎ目の色を調整していく。
といっても適当でOK。自分の目を信じて感覚で直すのが一番確実で早い。あ、でも時間があればカラー数値を見ておくといいかも。

ちなみに、パスのみ表示するとこんな感じ。

ほぐれスライム、パス表示

タイトルロゴもついでに作る

スライムだけだとさみしいので、タイトルロゴとセットにするために作成。
タイトルロゴもスライムと同じようなグラデーションを使用。

ほぐれスライム、タイトルロゴ

うーん、まあいっかコレで。ってとこで作業終わり。
性格的にいつもこんな感じで作業が終わる。じゃないとずっと満足いかず終わんないから。

満足いくまで作業できるっては贅沢なことだと思う。

スライムの影をぼかす

気分の問題だけど、ロゴの上にスライムを配置すると、境界にあたる影がクッキリして気に入らないw なんか目障りなのでぼかしておいた。

ほぐれスライム、スライムの影をぼかす

うん、まずまずでしょ。
アピアランスでぼかし入れてるから、いつでも元にもどせるしね。

ロゴとスライムを合わせて完成!

背景も同系色なのでロゴが少し埋もれてしまったので、ほんの少しだけロゴのうしろにホワイトのぼかしを入れてみた。超ほんのすこし。

ほぐれスライム、ロゴとスライムの完成図

ちなみに、今回のグラデーションはPhotoshopの青を参考したよ。
あの青、超好き。すこしくすんだ感じとか、浅めのグラデとか。

最後に、横長ロゴもつくってみた。
結構かわいくできたかな~。うむうむ。

ほぐれスライム、横長バナー

これで少し “ 寝かす ” と違った目線でアイデアが出てくるので楽しい。

WordPressにつづいて、BaserCMSのローカル環境づくりメモ。

BaserCMS(ベーサーシーエムエス)って?

BaserCMS(ベーサーシーエムエス)とは、オープンソースフレームワーク「CakePHP」をベースとし、環境準備の素早さに重点を置いた基本制作支援プロジェクトから生まれた CMS(コンテンツマネージメントシステム)です。

BaserCMS:BaserCMSとは?より抜粋

CakePHPについては、今後勉強するってことで・・・
とりあえず、いじれる環境をつくるのが先だぁ~!

MySQLにBaserCMS用データベースを作る

WordPressんときと一緒だけど、手順は以下の通りにやった。

  1. 新規データベース名を「basercms-バージョン名」とする
  2. 「照合順序」プルダウンで「utf8_general_ci」を選択
  3. 「作成」ボタンを押下

注:データベース名にバージョン名をつけたのは、BaserCMSのバージョンアップ検証を行うことを想定したもの。やんないかもしんないけど。

BaserCMSファイルを配置

BaserCMSファイルをダウンロードして、xampp\htdocs\ にコピー後、ブラウザでインストールという手順。今回はDドライブにインストール。

  1. BaserCMSフォルダを配置→ D:\xampp\htdocs\basercms-バージョン名
  2. http://localhost/basercms-バージョン名/ にブラウザからアクセス

BaserCMSのインストール開始!

http://localhost/basercms-バージョン名/ にブラウザからアクセスすると、最初のインストール画面が出てくる・・・はずなんだけど、めっちゃwarningでてるw
しかもCSSも効いてない・・・orz

basercmsのインストール時に出たwarningメッセージ

ということで、この段階で原因が分からずひたすら調べることに。

timezoneをいじる必要があった!

どうやら最初に確認しとけって内容だったらしい。編集手順は以下のとおりに実行した。

  1. D:\xampp\php\php.ini をテキストエディタで開く
  2. ;date.timezone = を、 date.timezone = Asia/Tokyo に修正

basercmsインストールステップ1の正しい画面表示

うむ。これで無事インストール画面のwarningが消えおった。
CSSも効いてるし、いい感じ。

BaserCMSイントール、ステップ2でアホほどつまる。

問題の箇所は以下の部分。

アップロード未確認
有効にするには下記の2箇所のフォルダ内の 「htaccess.txt」 ファイルの名称をそれぞれ 「.htaccess」 へ変更してあらかじめアップロードし、「アップロード確認実行」ボタンをクリックしてください。

  • / フォルダ(BaserCMSの最上位となるフォルダ)
  • /app/webroot フォルダ

いろいろアホな寄り道しすぎたのでその過程は省略。
終わりよければ全てよし。おこなった手順は以下のとおり。

  1. 指定されている2箇所の htaccess.txt をテキストエディタで開く
  2. RewriteBase のコメントアウト(#)を削除
  3. RewriteBase のパスを /basercms-バージョン名/ と記述する
  4. .htaccess で別名保存
  5. htaccess.txt はいらないので削除
  6. 「アップロード確認実行」ボタンを押す

basercmsインストールステップ2 成功画面

無事、緑色のTickがついたら次のステップへGO!

ステップ3は、データベースの設定

BaserCMSは、ファイルベースのデータベースも利用可能ということだが、最初にデータベースの設定をしているのでココはやってちゃんと設定しおく。登録する項目は以下のとおり。

  • データベースタイプ:MySQL
  • データベースホスト名:localhost
  • ログイン情報:(ユーザー名)/(パスワード)
  • データベース情報:(データベース名)/(ポート:3306)

basercms ステップ3の入力画面

入力が終わったら、「接続テスト」ボタンを押す。

basercms ステップ3 接続テストOKのメッセージ

「データベースへの接続に成功しました。」と出たら次のステップへ!

ステップ4 管理ユーザーの登録をする

ここまでくりゃ何も難しいことはないw
管理ユーザーとしてIDとPASSを設定するだけ。好きに決めりゃいい。

basercms インストールステップ4の画面

てことで、「完了」ボタンを押す。

basercms インストール完了画面

おっし!インストール完了!おつかれっ

BaserCMS ローカル環境セットアップ まとめ

無知なせいでアホなところでいっぱいつまずいたけど、基本数分で完了します。いろいろ勉強になりました。

BaserCMSは、まだまだこれからのCMSなので、期待大。他の有名CMSと違ってテンプレートとか何もないけど、それがまた良い。jobsだってきっと言うはず、シンプルが一番って。

開かないイメージ

毎日あたりまえのように立ち上がっていた相棒が、ごくたまにヘソ曲げることがある。PCに強いわけでもないから、あせるあせる。今後のために症状と対処をメモメモ。

マシンスペックは以下のとおり。

  • OS:Windows XP Professional
  • CPU:Pentium4 3.40GHz
  • メモリ:2GB RAM
  • HDD:500GB

症状1: 電源入れても「ようこそ」でフリーズ、Ctrl+Alt+Delete も効かない

いつもの通り電源を入れたら、「ようこそ」から進まない。さわやかな水色に浮かぶやさしげな「ようこそ」。これは、インターホンごしに「ようこそ」言われてんのに、鍵あけてもらえない状態だ。せつなすぎるw しょうがなく Ctrl+Alt+Delete を押すも無反応!

仕方がないので、電源長押しでOFF。
今回はここから長かった。

症状2: その後は「Windows 拡張オプションメニュー」をループ

どのメニューを選択しても、この画面に戻ってくる・・・orz

Windows 拡張オプションメニューイメージ

うーん、セーフモードも開かないとは。
てことで、ようやく Google先生に質問することに。

症状3: セットアップCDから回復コンソールへ挑もうとするも途中で進まず

次の対策は、セットアップCDを入れて再起動。
ブルーバックの画面が自動的に表示されたので、「回復コンソールを使って修復するには、Rキーを押してください」の案内どおりに Rキーを押す。
しかし、黒バックの回復コンソール画面になったものの、そこからまたも進まず。

こいつは、いよいよマズイと思い。近所のPCデポへGO!

症状4: 「HDDをUSB」で別PCにつないでみたけど開かず

こうなったら、HDDの中身をなんとか救出しなければ!
ということで、Groovy の「HDDをUSB」を購入。
コイツでHDDを Dell のノートパソコンにつないで、直接開けてみることに。

“ディレクトリが損傷しているため開く事ができません”・・・っだとぉ!!!

なんてこった、中身の救出もままならんとは!
あきらめる前に、もう一度Google先生に再質問することに。

解決結果: CHCKDSKコマンドであっさり修復

「HDDをUSB」でつなげたノートパソコンで、コマンドプロンプトの CHKDSK を実行!

手順は以下のとおり

  1. コマンドプロンプトを起動
  2. 今回開かないHDDは、Dドライブなので、chkdk d: /f /r と入力

すると、ものすごい勢いでチェック&修復がはじまったー!
つか、めちゃくちゃ長い・・・
半日以上かかってようやく終了。

これでようやく中身のバックアップができ、いよいよPCに戻すことに。
するとあっさり、起動。
なにごとも無かったかのように「ようこそ」も通過w

てことで、無事復帰したけど、ほぼ1日つぶれてしもうた・・・PCよ、いつまでも仲良くしてね。

ローカル環境づくりの続き。
WordPressをインストールをしてみる。

MySQLにWordPress用データベースを作る。

  1. 新規データベース名を「wordpress-バージョン名」とする
  2. 「照合順序」プルダウンで「utf8_general_ci」を選択
  3. MySQL 接続の照合順序プルダウンは「utf8_general_ci」のまま
  4. 作成ボタンを押下

注:データベース名にバージョン名をつけたのは、WordPressのバージョンアップ検証を行うことを想定したもの。

WordPressをインストール

XAMPPのApacheにWordPressファイルを入れる。
WordPressのバージョンが分かるようにフォルダにはバージョン名を付与。

  1. c:\localhost\wordpress-バージョン名 とWordPressフォルダを配置
  2. http://localhost/wordpress-バージョン名/ にブラウザからアクセス

ウィザードに沿ってWordPressの設定を進める。以下はver.2.9.2のウィザード選択肢の進み。

  1. “wp-config.php ファイルを作成する”
  2. データベースに関する注意書き “次に進みましょう!”
  3. 先に作ったデータベース名、ユーザー名、パスワードを指定する。
    • データベース名:wordpress-バージョン名
    • ユーザー名:root
    • パスワード:*********
    • データベースのホスト名:localhost
    • テーブル接頭辞:wp_
  4. “インストールを実行しましょう!”

WordPressの初期設定が終わったところで、続けてウィザードを進める。
ローカル環境用の設定のため、レンタルサーバー上の名前と区別してつける。

  1. ようこそ画面
    • ブログタイトル(ローカル環境用の名前、今回は wp-local と付ける)
    • メールアドレス
    • “このブログをGoogleなどの検索エンジンに表示されるようにする”のTickを外す。
  2. WordPressのユーザー名、パスワードが表示される。メモしてログイン

WrodPressにログイン後、管理しやすいパスワードに変更。

  1. ユーザー > あなたのプロフィール
  2. プロフィール画面最下部にてパスワードを変更

これにて、ローカル環境へのインストールは終了。
今後は、テンプレをいじったり、勉強用としてベタベタさわっていくんだぞい。

参考サイト
hiromasa.docs

漫画でPR!の広告