Entries

線をきれいに描く(画像多用)

自分は今フォトショでイラストを描いていますが、
あまり大した機能は使っていないので、いろいろなソフトでも
同じ事出来そうだと思ったので、線をちょっときれいに見せる方法を描きます。
かなり既出な方法なので今更ですが、役に立てたら嬉しいです。

普通のイラストの時。
まずは線画を描きます。先日来たばかりの新入りチワワ。

線をかきます

この時、線画のレイヤーをコピーして非表示にしておきます。

色をぬります


色を塗ります。

線のコピーレイヤーをガウスでぼかします


さっき非表示にしておいた、線画コピーのレイヤーをガウスでぼかします。
ぼかし加減はお好みですが、あまりぼかしすぎるとぼかし効果がわからなくなります。
ほどほどにぼかします。

線がなめらかになります


できあがり。目につやなどいれてチワワぶっています。生意気ですね。
線のコピーのレイヤーをぼかしたので
ふんわりとした雰囲気になり、また線のボコボコなどもきれいに見えます。




また、この方法ですと、とても小さいイラストを描く時は少し大変です。
今のイラストでも自分は拡大して作業していますが、これよりさらに小さいと
ブラシだと難しいと思います。

そういう時、パスを使うときれいにかけると思います。
先日ブログ記事にした、ビヨンビヨンする←こいつも、パスで描きました。


まず、線画をかきます。(大きさは大体60px*60pxだけど拡大しています)
(自分はパス慣れしていないので、簡単なのしかかけないorz)
線をパスでなぞります

線画が思ったより太っていたので、パスで適当に痩せさせました。

こうやって

パス選択して(小さい四角が回りに出る)右クリック、出たメニューから
「サブパスの塗りつぶし」を選択し、色を塗りつぶします。
今回は塗りつぶしたけど、線もかけます。
それを各所繰り返します。
塗る時は、新しいレイヤーを増やすといいです。

ちっちゃくてもきれい

ちっさい猫のできあがり。
ブラシでかくより、線がなめらかです。




暑いわあ・・・
カキ氷食べたいなあ。
夏だけカキ氷屋さんになる店が地元にあるのですが遠い・・・
生果汁がかかって、生果肉がゴロゴロ入ってて、
上に練乳味のソフトがドカーンと乗ってるんです。
食べたいなあ。


webデザインの黄金率

黄金(バブリー)


今、先日話したサイトつくりを進めています。
今何パターンか作ってるところで、上のは作りかけの画像です。
先方さんが「いいよ」といってくれたので晒してみます。

<--========▼▼▼言い訳ここから▼▼▼========-->

メインカラーはピンク、というご希望だったのですが、
あまりにピンクピンクしいのでだんだん恥ずかしくなってきました。
色、ちょっと変えようかな。

<--========▲▲▲言い訳ここまで▲▲▲========-->




以前からすごく黄金率に興味がありました。
自分が持っている本にも、素材の写真の撮り方のコツ、と言う項目で
黄金率の事が書かれてあります。

写真をどの様に加工するか、ボックスの中にどの様に被写体を持ってくるか、
そういう内容でした。

そんで、いつも自分はデザインをしている時、とても心もとない気分です。
ボックスやメニューの配置は、あまり奇抜ってわけじゃないから、
普通といえば普通のデザインなのですが、なんかとても落ち着かない気持ちです。

で、これはきっと黄金率が関係してくるんだろうな、と前から思っていたので
今日やっと調べてみました。

そしたらいきなり見つけた・・・webデザインの黄金率!
検索でかなり上位に出てこられたので、もう知っている方も多いだろうし
自分が紹介するまでもないと思うのですがものすごく「わー!」と思ったので
紹介させて頂きたいと思います。


電脳狂想曲

こちら様のコンテンツの一番下、「小技」がそれです。
サイト幅に合わせて、黄金率を計算してくれます。
で、その大きさで実際マス目が表示される。すごいよー
こんなの作っちゃうなんて!素晴らしすぎる!

そのマス目を自分が今作ってる途中のサイトへ重ねてみました。
それが上の画像です。なんかいろいろずれてない?
おはずかしい

てか、この場合、自分1024*768でやってしまったけど、サイト幅そのものに
合わせるほうがいいのかな?

このマス目にあわせて配置をちょっとずらしたら、どうなるんだろう!
(まだやってない人)
ちょっとたのしみです!


グリッドを感じさせるデザインには、きっとぴったりなんだと思うけども、
ちょっとはみ出したり、ものすごく自由な配置のサイトにも、きっとこれは
法則として有効な気がします。

自分にゃそこまでの応用力はまだなさそう。







ブクマボタンつけたよ!

ねてる


猫って気づけば寝てる
でもたったままはさすがに寝ないか・・・


KumaCrowさんの、ブログが作りたい!ブックマークボタンの設置の記事で、とても便利なブクマボタンのお話をされてみたので、さっそく設置してみました。
ぷふー
KumaCrowさんの解説わかりやすくてスイスイでした!

ソーシャルブックマークは今まで利用してなかったのですが、
これを機にはてなにも登録してみました。
まだ全然使えてないのですが、有効に使えたらいいなあ!

はてなのユーザー名、「猫」って入れたいと思ってしばらく「neko〜」みたいな名前を入力して
頑張りましたが、入れる名前入れる名前、全部登録されていたので、(猫大人気すぎる)
登録するまで時間かかった・・・数字入れればいいのかもしれないけどそれもせずに。
アホだな
結局猫は諦めてブログ名と同じにしました。

あと、下にブクマボタンを設置したけど、どうもうまく出来なくて、拍手ボタンも
右表示から左表示にずらす羽目に。
うう

楽しい使い方が出来たらいいなと今から楽しみです!



追記

なんかページが重い・・・
ブクマボタンから下がなかなか表示されないけど
時間によって変わるのかな・・・

写真イラストの表示をきめたよ

げんきー?って来る子


うちの近所のボス猫は、ちゃんとパトロールをしています。
近所の人に話をきくと、猫を飼っている家庭の庭には必ず立ち寄るらしい。
家から出ない猫もいるのに、なんで漏れなく猫の家を知っているのか不思議です。


サイト作りは未だデザインのところから進みませんが、
あとちょっとでとりあえず材料は揃うかなあ・・・というところまで来ました。

コンテンツの主になるものが、写真やイラストになると思うので
どうやって展示していこうかなあと考えていました。
写真とかはサイズが大きいから、そのままの大きさで表示させるのはちょっと、と思うし、
イラストなんかは気まぐれで描くから、大きさもばらばら。
並べたらさぞかしバランスが悪かろうなあと思います。

かといってサムネイルにして全部新しいウィンドウで開くのも、あまり好みじゃない。
同ウィンドウで開いても、絵や写真を見終わった時に、ついウィンドウを閉じてしまう
事が自分に多いので、なんかそれも落ち着かない。

どうしようかと思っていた時、こちらを発見。
今あちこちでみかけますね。
これを使おうと思っています。今から楽しみです。

LightboxJS

つーかジャバスクリプトとか書けちゃう人ってすごいと思う。
超かっこいい


fc2ブログランキング  人気ブログランキング  レタッチ・加工

↑たまに貼ってみる・・・

フォントの使いどころ?

くさいよ


クランベリーだからベリー系で良いにおいするものだと思ってたけど
醤油に溶かしたプラスチックまぜた様なにおいがしてきて驚きました。


自分が作るサイトはどことなく素人くささが漂ってて、これは一体なぜだと思ったので
自分なりにかっこいいな!と思うサイトさんと自分の比べてみた。

まだまだ理由はありそうなんですが、一番目につくのはフォントかと思った。

自分は画像置き換えリンクが好きでしょっちゅう使うのですが
このテクニックも今じゃ使われなくなってきてると本かなんかで読みました。
それでも、その画像が一個一個洗練されてればいいんじゃね、と思うのですが
(あっ、デザイン面よりもSEO面で使われなくなってきてるのか?)
自分の場合は、その画像リンクに使用するフォントの選択が宜しくないらしい。

「このフォントかわいい!」って使うのはいいのですが、
そのフォントがメニューになって、ズラーッと並んだ時の事を自分は考えていたか?

考えてなどいない!(ダメすぎる・・・)

デザインフォントと呼ばれてる、かっこいい、またはかわいいフォントは、
ここぞと言う場所にのみ使うべきだったと反省しましたorz
ロゴとかにさ。あと見出しとか。ほんと反省しました。

(゚∀゚)イイ!思うサイトさんは、確かにかっこいいとか洗練されてるとかいろいろ思うところは
ありますが、要は「とても見やすい」って事なんだろうなー。
リンクも画像リンク使わないのにテキストリンクでも十分かっこいいし。


今回の事調べてて見つけたサイト様

Webデザインで最も愛されているフォント16選

チェケダウやな・・・
見やすいフォントばっかりです。


写真加工奮闘

なんかちがうよね?

   元写真
↑元写真。
クリックで拡大です。後からつけたしてみました。
(ちなみに結婚式の写真じゃないです。うちの和室)


結婚式の写真の加工は、いちまるごさんひろっとさんから頂いたアドバイスで、
がんばってます。
やっぱり普段からやってる人は違うよ!!かっこよすぎるよ、お二方!
ありがとうございます!
ほんと、お二方いなければ自分は「雰囲気で察してください」って、
ガウスかけまくり状態で仕上げるところだった。(まさに外道)

で、自分でもいろいろなサイトさん巡って調べて試してみたんですけど
これもいいな!という方法を発見したので、ご紹介します。

ウェブデザインライブラリー様、こちらフォトショいじり始めの頃からずっと通い詰めてるところなのですが、こちらさまの、ぼかし(ガウス)を利用して夢心地な効果を表現する

結婚式だと特に照明とか複雑だったり、あと式中の写真はちょっとふわんと光らせてみたいとか、
そんな風に思ったので、これを試してみたのです。
そしたら、記載されてる効果以上の収穫がありました!

ちょっとだけ暗めの写真を、明るくすると劣化が気になっていたのですがこちらのテクニックだと
あまり劣化が目立たないみたいです。

写真によって、ガウスの量とかレイヤーの不透明度を調節したりします。
上の写真の違い、なんとなくわかるかなあ・・・。布の暗い色部分がわかりやすいかも。
オーバーレイがいいみたい???

とにかく、先述のお二方とこのテクニックのおかげでなんとかなりそうです!
よかったよう
ありがとうございます!


焼印大根

だいこん


おでん大根なんだけど、大根よりこんにゃくとか、たまごとかのが好き
はんぺんとか、つみれとかな。

夜の夜中に大根に焼印入れて遊んでるんじゃないんですっ
結婚式の写真加工したり、フェルトで小物作ったりしてイエー!って遊び惚けてたら、
サイト作らなくちゃいけない事に気がついた。ここ最近はしゃぎ過ぎた。
で、その作るサイトで焼印使おうかなと思って練習してみたのでした。

焼印はフォトショで作りました。うーん?微妙すぎるこの出来具合。
焼印「ぽさ」はでているのか?というか大根となじんでないな・・・。

作ってて思ったんだけど、あまり焼印が入った大根って見たことなくて
大根に入る焼印がこういう色なのかちょっとわからない。
もっと薄いのか、濃いのか?

普段から、この物のこの部分はどうなっているのかなと観察しとくと、
こうやっていざ作る時に、よりリアルに作れるんだろうな。
これからは以前より物をジロジロ見る事にします。

あと、全然大根と関係ないんですけど、リアルと言えば、

photoshopit

こちら様のこのページの一番右上の赤いアイコン、すごいなーといつも思う。
これ何もないところから作り出したんですよね、たぶん。
球の光の当たり方とか影とかいろいろリアルすぎて素敵。




大根おいしそうだなあ
おなかすいてきたー

うーん
でもやっぱり、はんぺんと卵とこんにゃくが食べたい




fc2ブログランキング  人気ブログランキング  レタッチ・加工


フォントー!

マフラー

足袋とか手袋を履いているみたいな模様の猫っていますよね



新しいサイトを今、デザインとかいろいろ考え中です。
で、何かクルンとしててどことなくレトロな感じのフォントを探しまわっていたのですが、
イメージにぴったりなフォントを配布されてるサイト様を発見しました。

タイプラボ

すごいかわいいんです。えれがんとが!!!
会員登録が必要なのですが、自分は登録してお試しをダウンロードしてみました。
本当にかわいいです。

あられ←このフォントもかわいい!!

いろいろなところで見かけるフォントが結構ありました。
見てると皆欲しくなってしまうよ…


web2.0カラー

おもち


おもちは納豆もちが好きです。
皆さんはどんなおもちの食べ方が好きですか?



今年初のサイトが先程完成しました。
去年の最後のは3〜4日かかってたけど、今回は2日で完成できました!

今回サイトを作る時、どんなのにしようかなとネットをうろうろしていたのですが、あちこちで目にする「web2.0」という言葉。
これは何だろうと以前から思っていたのですが、なんか「今っぽい」感じのwebデザインの事を言うのだろうか?

いつも参考にさせて頂いてるcssサイト様とか、フォトショのtipsを公開されてるサイト様とかに行くと、漠然と「自分が作るサイトと何かが違う」と思ってました。
もしかしてあれがweb2.0というものなのだろうか???

・なんかツルンとしてる(アイコンとか)
・サイトデザイン自体はシンプル
・でもかっこいい
・色がカワユス

こんな印象ですが・・・

さらにうろうろしていたら、web2.0デザインに多く使われる色の見本を配布しているサイト様を発見しました。
フォトショに入れて使えますので便利です。


Miles'Blog様(海外)


今回、こちらのカラー見本を使用してサイトを作ってみたのですが・・・

「なんか超それっぽい」ブツが出来ました!嬉しかった!!

やっぱ色なのかなあ?
アイコンがツルンツルンしてたり、サイトロゴが反射してたり、そういうのも肝みたいですよね。
ツルンとしたアイコン作ったけど、どうも自分が作るとツルンとしない・・・

web2.0、ものすごい前から言われてる様なので、乗り遅れた感が満載ですが、これからサイト作るのがもっと楽しくなりそうです。



下の続きに上のサイト様からのカラー見本のダウンロード→フォトショに入れる手順を書いておきます。

追記を表示

計画的に

年賀状はまだ微妙に終わりません。
元旦は無理かもしれん。作る年賀状の種類が多すぎる・・・
こうなる事はわかっていた。半年くらい前から準備するべきだったのかもしれない。

寝不足だし目は疲れるし、辛いんですがいい事もありました!

年賀状を作っていて、たまたま、「お、これはかわいい」と使ったブラシがあります。
前もご紹介させて頂いていた、Free Photoshop Brushes at Brusheezy!様の中から、
Retr0 Brushesです。

超レトロ・・・かわいいじゃないか・・・

で、ダウンロードして使ってみたら思っていた以上にかわいくて、
「よしこれでやる」
と思って作っていました。

文字とかもいれて、完成?と思ったのですが何か違和感が。
何だろう、というか疲れてるしもう寝ちまおうと思ったのですが、その違和感の原因に気がついてしまった。

フォントです。
このブラシはどことなくレトロでアメコミっぽいし、自分が持ってるフォントだとちょっと微妙に、でも確実に雰囲気があわないのです。
じゃあアメコミフォントはないか!と探したら、ありました!
というかそれ以上の収穫だった。感激してしまった。

Download Free Fonts @ 1001 Fonts .com


Blambot Comic Fonts and Lettering


どちらも海外サイト様なので、アルファベットのみですがそれにしてもすごい数・・・。
全部ほしいと思ってしまう。

自分は上のサイト様からAnime Ace と、Badaboom BB をお借りしました。

ちょっとの違いなのですが、やっぱりそれっぽいフォントにした方が統一感というのでしょうか。
明らかに違ってきますよね。

寝不足だけどかっこいいフォントいっぱい見れたー。











IE8・・

雪堀


たまにわんこ。雪を掘って遊んでいるところ。
わんこって雪の中に鼻突っ込みますよね。

今日、ネットしててふとニュースをみたら
「IE8」って文字が目に飛び込んできて焼きイモ吹いた。


〜ここからITmedia Newsさんから引用〜

IEの次バージョン、名称は「IE 8」
ゲイツ会長がイベントで次期版IEを「IE 8」と呼び、IE開発チームもこれを認めた。
2007年12月06日 14時25分 更新
 Internet Explorer(IE)の次のバージョンの名称は「IE 8」になることが分かった。

 MicrosoftのIEチームは12月5日のブログで、ビル・ゲイツ会長がMix'n Mashイベントで次期版IEをIE 8と呼んだことに言及し、IE 7の次はIE 8になると認めた。

 同チームは、選に漏れたほかの名称候補として(どこまで本気かは不明だが)「IE 7+1」「IE VIII」「IE 1000(2進数)」「IE Eight!」「iIE」「IE for Web 2.0 (Service Pack 2)」「IE Desktop Online Web Browser Live Professional Ultimate Edition for the Internet」「Ie2.079」などを挙げている。

 IE 8の機能やリリース予定などの詳細については、近いうちにIEチームのブログなどで明らかにするとしている。

〜引用おわり〜

自分はつい先月にIE7入れたばっかりです。
と言っても、自分のパソ(winXP)だとすぐエラーになるから普段は他のブラウザつかってサイトの動作チェックぐらいにしか使ってないけど・・・


どんな風になるんだろうー

よりcssを正しく解釈してくれる様になるんだろうか?
でもそうなったとしてもIE7すらまともに動かせない自分のパソ。
IE8はどうなんだろ?



ところで、新IEの名前候補にあがっていた

「IE Desktop Online Web Browser Live Professional Ultimate Edition for the Internet」。

長いって・・・。



fc2ブログランキング  人気ブログランキング  レタッチ・加工

追記

おなかすいてクラクラする
年末って食べる機会が多くて太ってしまう
だからあまり食べない様にしてるんですけど、おなかすいた
砂糖でもなめてみるか・・・

キラキラロゴ!

キラキラ!


作っちゃった作っちゃった
前から、キラキラロゴを作って見たいと思っていたのですが、偶然みつけたサイト様でそれが可能となった。
うれしいー!作ってる時すごく楽しかったです!クリスマスっぽいー
こんなロゴついたサイト作って見たいかも。

DesignWalker

フォトショのTIPSとかとにかく見てて飽きない!!!
こんなことまで出来るのかとかなり楽しかったです。
キラキラロゴの他にやってみたいのがいっぱいあった・・・
これから通い詰めようとおもいます!


キラキラ〜なロゴが作りたい Photoshopチュートリアルまとめ
↑の記事で、キラキラロゴに必要なキラキラのブラシとか、チュートリアルのあるサイト様がずらーっとあった・・・
ブラシのキラキラも他の事にも使えそうですね。

さっそくやってみる!と紹介されていたサイト様に飛んでみたら、英語だった・・・
でも、画像付きだし手順はおぼろげですが理解できました。
ちなみに自分の英語力は中学生並ですがそれでも出来たので皆様も是非。

フォトショのtipsの他、webデザインやcssの話題があって、なんか非常にときめいた。
はやく全部読みたいなあ

破れた紙を作る方法もあった。これも今かなりやってみたいのです。
サイトの背景とかに使ってみたいです。

紹介されてるサイト様に飛んだ時、反射的に海外!?英語!?と腰抜かして一回ウィンドウ閉じちゃったけど、これはやらないともったいない・・・
だってきれいだし


で、全部そのチュートリアルの通りにやったかというとそうでもない、と思う。多分。
まず英語の訳し方が未熟だし、チュートリアルのエッセンスみたいなのをちょこちょこと拾って、あとは自分の知ってるやり方でやってみたという感じです。





fc2ブログランキング  人気ブログランキング  レタッチ・加工


自分が持ってるweb関係の本

渡花


花も暖かい場所へと渡り歩くなんて知らなんだ。

今日は、自分が持ってるweb関係の本をご紹介させていただきます。
あんま持ってないけど・・・
普通にアマゾンとかにリンクを貼ろうかと思っていたら、web上に自分の本棚を作れるサービスを発見したのでさっそく作って見ました。
これから本が増えたらここに置いていこうと思います!

自分が参考にしてる本とか

↑これも、リンク先もアフィリとかじゃないのでお気軽に見に来てくださいね。



持ってるやつについてちょっと書こうと思います。

フォトバイブル
ものすごい素材の数です。素材がなくて探し回ったり自分で作るのも大変なのですが、この中から最適な素材を選び出すのもまたちょっとした苦労ですが楽しいので全然良し。
画像サイズが680*480なので背景にでっかく使いたい人はちょっと困っちゃうかもしれないですね。
これは、お世話になっている方から頂きました。感謝・・・


センスを光らせるwebデザインワーク
見てるだけで楽しいです。ボックスのレイアウトはパターンがあると思いますが、そのパターン一つでもいろいろなデザインが出来るんだと感動しました。
仕上げのポイントが書いてあるのですが、微妙な違いだけどやるのとやらないのじゃ差がつきそうなポイントがたくさんです。
これは一番最近買った本。この本のP104の、png画像の小窓から覗く下の背景が、スクロールすると動くってのをすごくやってみたい。


webデザインサンプルブック
これも暇あれば開いてる本です。
上のよりサンプルの数が多いかなと思います。
見てると「こんなの今度作ってみたい」と思ってしまう。関係ないけど、作ってみたいデザインに対して、どうやったら実現できるかって考えるの楽しいです。
CD付き。すぐ使えるアイコンとかの素材などが入ってます。


Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
分厚い。何回か仰向けで読んでて顔に落とした。あと、徹夜続いた時足に落とした。
内容は字が多いしカラーも少なめですが、一個一個のプロパティに対して、値、規定値、適用対象、継承するしない、未対応ブラウザとかが書いてあります。
辞書みたいにして使ってます。あると何か安心する。


速習Webテクニック スタイルシート 上級レイアウト
cssやろうと思って初めて買った本。なのに上級を選んだ浅はかさ・・・
その時の自分は甘かった。この本を買って身の程を知った。
最近はちょっと理解できる様になりました。
CD付き。練習用サンプルサイトから、超素敵デザインサイトのサンプルが入っていて、ここはこんな風になってるんだ、というのが見れて楽しかったです。


Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
本のタイトルに、「Webプロフェッショナルのための」と入っているので、
「プロフェッショナルじゃない自分が買って怒られないだろうか」と言う気持ちで買いました。
でも本屋さんから「プロフェッショナルの証拠を見せなさい」とか言われなかった。
特にこの本で重宝してるのは、ブラウザごとの表示の違いの事例とかをすごく細かく解説してるとこです。トラブル系が充実してると思います。




買わなきゃ良かった・・・と思う本は今のところありません。
全て結構均等に開いてます。


web本棚おもしろいなー
ブログからリンク貼っておこう。
今度はネットで買ってみようかな・・・




参加させていただ゙いてます。
よろしければお願いします!

fc2ブログランキング  人気ブログランキング  レタッチ・加工



本って悩みます

空走


長い事行方不明になっていたデジカメの充電器が発見されました。
これでやっと、また写真がとれます。あーよかった。
今日の写真は、前のやつだけど、空に浮遊してたやつらを撮りました。





追記を表示

サイトの配色どうしてます?

みずたまりの不思議


サイトを作る時、こんな風にしたい、前から試したかったあれをやってみよう、っていろいろ考えるのって楽しいですよね。
自分もそれ考えるのが大好きで、A4の紙いっぱいに書き込んだりしてます。

でも、こんな風にしたいってのが決まって、いよいよさあ作ろうとなった時、自分はいつも手が止まってしまいます。


追記を表示

Appendix

 

Author:ひろこ
css修行中
イラスト描いたり写真加工したり
猫とわんこに絡んだり、
そんなゆるい人です
どなた様もどうぞ宜しく。

 

ブログ内検索

 

ブログ内の画像や文章の無断転載は、管理人がはずかちいのでどうかご遠慮下さい。