さいそう

とりあえずサイト作りました

2007/12/14 金曜日 - 03:17:32 by saiso

さいそうです。
再来週に行われる忘年会イベントのサイトを作りました。

J-POP night
photoshopはトップページの画像に少し使いました。
100日近いにも関わらずphotoshopのいいところを全然発揮していない感じですが、色目だけクリスマスぽくしてみました。
久々にスピード重視でガシガシ作ってみたのですが、
案の定、IEだとずれるサイトができてしまいました。
でもまあ、おそらくこのサイトを見てくれるお友達は
ほとんどがFirefoxだと思うのでそんなの関係ねー!です。
残り5日でもう一個作りたいと思います!
あ゛ー!
でも5日後には僕更新できない!
というか今回で最後の更新ではないか!
悲しい!
悲しすぎる!
でもphotoshopに出会うことができたし、
最近Rubyもはじめることができた!
これを通して仲良くなったと思っている人が2人くらい増えたし
いいことばかりでした!
来年は、本当のプログラミングを学んでいきたいと思います!
さようなら!

ブラシでゴシゴシしてみた

2007/12/07 金曜日 - 06:21:52 by saiso

おはようございます。
さいそうです。
今日はRubyの本を二冊買いました。
次はphpをやろうと思っていたのですが
Rubyのほうがなんとなくかっこいいぜ!と先輩に言われたので
Rubyにしてみました。
ひどい話です。
今回は巷で評判のブラシというものをインストールして遊んでみました。
たしかにすごくおもしろい!
しかし、僕にはセンスというものがあまりないため
うまく使いこなせないようでございます。
がんばって磨かないとなあ。
というわけで久しぶりにhtmlとかcssでもいじってやろうなど思いつつ
イジイジして適当に作った作品発表をしたいと思います。
#このサイトにはなんの意味もありません

http://saiso.jp/ore.html
やっぱり手を動かすのはいいですね!
適当なブラシでゴシゴシして、
180度回転させ天井から吊るしてみました。
真ん中にいるのは、ジャンプしている僕自身なのですが
その昔、爽健美子さんがPhotoshopを駆使して作ってくれたものです。
さすがです。
最近はどこでなにをやっているのでしょうか。
それと、今更ながら repeat-x のうまい使い道を知りました。
これで今後はパッと見イケてるブログなどを作ることができそうです。
これまでPhotoshopをがんばってきたのですが、
そろそろサイト作ります。
といっても作りたいサイトがないので、
既存のmy siteをリニューアルします。
でも残り12日しかありません。
ぎゃー!
というわけでまた来週。

常に更新、常に前進

2007/11/30 金曜日 - 05:57:05 by saiso

ごめんなさい。
おひさしぶりです。
FFTA2にはまりすぎて
pshotoshopのみならず、
他のこともないがしろにしておりました。
いいものを出そう!と思ってはいたのですが、
手が止まってしまっていたので、
とりあえず更新するのだ!をコンセプトとして、
先週末に作った作品を出します。

年内リニューアル予定のミルキャンというサイトのロゴです。
本当は左横にロゴマークとか入れたかったのですが、
ベジェうんたらとか不慣れなのでできませんでした。
悔しい。
これまではFireworksで作っていたものをphotoshopで作ることができました。
ちょびっと感動しました。
今週末にまた作ったweb素材を載せてみたいと思います!
ではでは。

こんな僕でもphotoshopでライトセイバーが作れた

2007/11/16 金曜日 - 04:22:27 by saiso

さいそうです。
前回さぼりました。
てへ(^▽^)
けんすう先生がかなりご立腹されていた模様なので、
今日はいつもより三時間早くアップしてみたいと思います。
今日はライトセイバー作りました。
春先ごろからずっとマスターレプリカ製のライトセイバーが欲しかったのですが、
永遠に学生をやりつづけている僕としてはお金がなさすぎて買えませんでした。
そんな中、僕から僕に朗報が入ったのです、さっき。
スターウォーズ ライトセイバーを描く方法
おおおおお!
こんなにすばらしいtipsなのに(しかもphotoshop系ではかなりわかりやすい方!)、
はてぶが僕だけ!
どんだけ!
というわけで、これなら余裕で作れるぜ思いながら作ってみました。
苦戦しました。
細かい作り方は上記の記事に任せるとして、
僕が苦戦したところだけお伝えしたいと思います。
その前に今回加工した写真の元です。

まずはstep2から。
四角形ツールを使って、イメージのどこかに長方形を作成します。
四角形ツールとは長方形選択ツールです。
意外とネーミングの違いだけでも初心者は心が折れるので、一応。
私は、30×1000としました。
いまだに
photoshopでピクセル幅とかどこで見たらいいのかわかりません。
Fireworksならすぐに見れるのに!
誰か教えてください!
という感じだったのでアバウトに長さを決めました。
step3から。
ここで、ライトセーバーの先端を少し丸めて、持ち手の角度に合わせて回転させます。
選択 > 変形へと移動してください。
選択変形じゃなくて、
編集変形でした!
これはバージョンの違いなのかな。
・step3にある最後の画像
選択範囲を移動したのはわかるのだけれど、
僕のCSだと選択範囲を指定したら
背景まで一緒に移動しちゃいました!
これが一番困った。
これが正しい方法なのかわからないけれど、
僕は選択範囲を右クリックして
“選択範囲をコピーしたレイヤー”
というのを選び、
選択範囲だけ逃がしてあげました。
そうすると背景がついてこず、
選択範囲だけきれいに移動できるという。
むずかしかった、、、
step6から。
前のレイヤーから選択範囲を表示します(Ctrl+Click)。
そういえばこれも迷った。
ググッたらでてきたので見事解決したのですが、
ここでいう前のレイヤーから選択範囲を表示とは、
右下のほうにあるレイヤーが同時に見れる箇所で、
前に選択範囲を指定したりして使ったレイヤーを選び、
選ぶ際のクリック時に
ctrl+クリックをするという意味だったのだ。
僕はてっきり前のレイヤーをとりあえず表示させ、
選択範囲を戻って出させて画像の上でクリックしてました。
一見あほっぽいのですが、
意外とひっかかりそう。
photoshop使いな人たちには常識かもしれないけれど。
step7から。
(オプション)このレイヤーを何回か複製していけば、さらに光彩が顕著になります。このようなイメージが作れましたか?
省略びつくり!
いきなり完成へ!
と思ったのですが、
この過程は試行錯誤しながら自分でやるのが
楽しいかもしれないと思いました。
しかし、数字を変えて二回いじっているレイヤーの工程を何回かやるのか、
最後のレイヤーの工程を複数やるのかは謎です。
とりあえず以下が完成作品です。

#握っているのはリモコンです
俺のライトセイバー、太!
短!
でも、固!
バリバリ日本人!
ヨーダ君のほうが、スタイリッシュだし、ジェダイぽいし、
なんか見ててむかつきます。
ああ、僕はやっぱりダークサイドなのね。
というわけで、
思いのほか楽しかったのでまた作ります。
さようなら!

エビのロゴを作ろうとしました

2007/11/02 金曜日 - 06:46:39 by saiso

さいそうです。
FFTA2をやっていたら危うくやり忘れるところでした。
またもや6時台。
あともう50日を切っているというのにいいのかこのままで。
いやしかし、この木曜日という日のためになにかを用意しようという心意気が大切だって最初に誰かが言ってたもん。
いいわけはこの辺にして、今日はロゴを作ってみたんです。
いまさらながら、WEB2.0ぽいロゴ制作とかしてみました。
なんかもう、恥ずかしいですね。WEB2.0とか。
というわけでとりあえず公開です。

参考:
http://www.fxdesigning.com/web2txt.php
なんだかフォントは「Arial Rounded MT Bold」というのがWEB2.0っぽいと書いてあったので、
急いで探しにいきました。
これいいなあと思った画像からフォント検索ができちゃう以下のサイトが便利です。
WhatTheFont?!
さくっと10分くらいでできちゃいました。
こだわってみたポイントは、色です。
茹でたてのエビを表現したかったのですが、色でてるかなあ。
次はh2の小見出しみたいな素材でも作ろうと思います。

photoshopで空の写真から電線を消すための18のプロセス

2007/10/26 金曜日 - 05:34:17 by saiso

さいそうです。
無駄にはてブ対策っぽいタイトルにしてみたのですが、
慣れていなくてなんか恥ずかしいです。
自分だけでこっそりはてブしておきます。
プロセスが18ってのが中途半端すぎて悲しいです。
精進します。
ところで先週顔合わせをした際に、
「次からはWEBデザイン系でせめます!」
と宣言していた気がするのですが、photoshopを使ったWEB絡みの成果をどうみせようかと悩んでおりました。
悩みすぎてジタバタしていたため、今回はWEB制作とはあまり関係ない、
いつも通りな感じで発表したいと思います。
★電線を消してみよう!
【加工前】

とてもきれいな空の写真なのに電柱と電線がすごく邪魔。
というわけで取り除いてしまいます。
1:ツールボックスから、絆創膏みたいなマークの「スポット修復ブラシツール」を選びます
2:上にあるオプションバーでブラシサイズを40以上くらいにして使いやすくしておきます
3:マウスポインタで右上のできるだけ広い箇所を選び、altを押しながらクリックします
(cs2以上ならalt押さなくてもいいかもしれないし押すかもしれない)
4:飛行機にポイントをあわせてクリックします
5:飛行機が消えちゃいました
6:次に、電線を消すために、左側の雲から上をなげなわ選択ツールとかで空に掛かる電線を選択します
(一度で選択できなくてもshiftを押しながらやれば何回も追加選択できます)
7:選択範囲内に色をしっかり馴染ませるために「選択範囲→境界をぼかす」を選んでぼかします
(だいたい半径5pxくらいが丁度いい感じです)
8:ツールボックスからスポイトの形をした「スポイトツール」を選び、空の上のほうからスポイトしちゃいます
(これが描画色になります)
9:次にaltを押しながら空の下のほうからスポイトしちゃいます
(altを押しながらスポイトすると背景色選択になります)
10:次に見るからにグラデーションという感じの「グラデーションツール」を選びオプションバーでグラデーションの種類を「描画色から背景色へ」にします
11:「6」で範囲指定しておいた選択範囲内で上から下に向けてドラッグし、濃い空色から淡い空色へとグラデーションをかけます
12:よりリアルにするために「フィルタ→ノイズ→ノイズを加える」を選び0.5%くらいのノイズを加えます
(これによりべた塗りではなく、ほんの少し粗い空を演出します)
【空は完成!】

14:ctrl+Dを押して選択範囲を解除します
15:ツールボックスから見るからにスタンプの形をした「コピースタンプツール」を選び、上にあるオプションバーで直径を100px、硬さ10%にしておきます
(硬さが強いとシャープに切り貼りができ、逆に硬さが弱いと淡く透けた感じに切り貼りするぽいです)
16:「コピースタンプツール」で雲の画像をコピーします
(コピーするときはaltを押しながら!コピーといってもその箇所だけではなく全体的な画像を一部分移動するという感じなので、できるだけ電柱から離れたところの雲をコピーします)
17:電線の上をドラッグして塗り塗りします
18:「16」と「17」の行動を何度か実行し、違和感がなく自分が納得するまで雲を作り上げます
【完成!】

フォトショすげえ。
こええ。
あるはずのものがないことになっちゃってる。
次回からは、ワイヤーとか適当に作ってスライスして、
スライスを用いたWEBサイト作りをしてみます。
それかナビ部分の素材を作ります。
ズコー!

脱・エビ

2007/10/19 金曜日 - 05:55:51 by saiso

さいそうです。
なにやろうなにやろうと思っていたら、また明け方を迎えてしまいました。
この流れを断ち切らなくては。
これまで原田さんからいただいたエビを調理してきたのですが、
それも今回で終わりにしようかなと思います。
しかし僕もエビが好きなので、どうにかしてエビとは関わっていく所存です。
というわけで、今回はアンディウォーホルぽいphotoshopテクをやってみました。
自分の写真を使ったのですが、光加減が悪くあまりよいできではないです。
そもそも色をつける箇所が少ないと楽しくありません。
参考:アンディ・ウォーホルのマリリン風に写真を加工する方法
【作品:僕とエビ】(※けんすうさんの写真から拝借しましたすんません!)

そろそろ自分のブログで進捗を報告しつつ、WEBデザインにむけて励みたいと思います!
がんばるぞ!

Photoshopで写真をポップアート風にするのだ!

2007/10/12 金曜日 - 06:30:10 by saiso

木曜日担当のさいそうです。
いやあ、またしても朝になってしまった。
前もってできないということはわかっているので、朝になってしまってもしっかりと担当日にはやろうと思えることが、
この100日プログラミングのいいところなのかもしれないですね。
前回告知したとおり、今回はアンディー・ウォーホル風の画像を作るぜ!と意気込んでいたのですが、
ネタフルさんのこのエントリの画像を見ていたら、ポップアート風の画像のほうが楽しそうだなあと思ってしまったため、今回はポップアート風画像を作ることにしました。
GIGAZINEさんにも同じようなエントリがあったのですが、どちらもリンク先だけ明示してあり、方法がわからず…。
リンク先を見ても英語ばっかりで読む気が出ず…。
というわけで、どういうわけかわからないですけども、なんとなくやりたかったので、ネタフルさんが教えておいてくれた英語なサイトのチュートリアルをがんばって実践してみました。
参照元はこちら
http://www.melissaclifton.com/tutorial-popart.html
【画像-加工前-】

【画像-加工後-】

無駄にカラーバリエーション豊富です。
できたとき嬉しすぎていっぱい複製しちゃいました。
なかなか微妙なクオリティだけど勘弁してください。
これはつらかった。
結局3時間くらいかかっちゃいました。
英語を読み解く+photoshop技術が難解ということもあり時間かかりまくりです。
今回僕がやったプロセスを和訳してキャプチャとってお伝えできればいいなあなんてやりながら思っていたので、
復習も兼ねて改めて自身のブログでつらつらと書いてみたいと思います。
いやあ、今回の課題はphotoshop的なスキルがレベル高杉で全然できなかったけど、
試行錯誤しまくったので超勉強になりまくりんぐでした!

photoshopを使って写真をステンシルっぽく加工してみる

2007/10/05 金曜日 - 03:48:01 by saiso

こんにちは。木曜日担当のさいそうです。
これまでで一通りツールを実践してみたので、
ここらでtips系にでも挑戦してみたいと思います。
今回は以下のテクニックを参考にさせていただきました。
Stencil Art…Creating Stencils
ステンシルでトントンやったときみたいな雰囲気がでるぜ!というテクニックらしいです。
【加工前画像】

【加工後画像】

なんかステンシルでトントンなオサレ画像ではなく、
邪悪なエービネーターぽい感じになってしまいました。
やりたいことはできた気がするので成功とさせていただきます。
今回のテクニックを通して感じたことは以下の通りです。
・レイヤーを中心とした基本的な作業の複合技によって応用が生み出されるのだ!
・トーンカーブなどの感覚は多くのtipsを通して掴んでいかなければならないのだ!
・photoshopはFireworksとは違い細かな数値設定により繊細でイカした加工がなされるのだ!
来週はアンディウォーホールっぽい画像を生み出したいと思います。

もうレイヤーなんてこわくない

2007/09/28 金曜日 - 07:21:37 by saiso

木曜日です。さいそうです。
自分が起きてる時間までが俺曜日だぜ!と以前けんすうさんあたりが言っていたような記憶がなくもないので、無事木曜日にアップできたということにしてください。ありがとうございます。
いやしかし、こうしてギリギリでもアップしなければと思い、夜な夜なPhotoshopと格闘するというこの現状がまさに100日プログラミングの醍醐味であり僕自身がスキルアップするために必要な状況なのであります。
さて、今回学んだことは以下の通りです。
・レイヤーの基本
・文字入力の基本
・ペンツールとかシェイプツールを使うとその形(パス?)に沿って文字が入力できるよ
・ラスタライズとは…文字データとして認識してある文字を画像に変換することだよ。これによってより効果的な演出が可能になるらしいよ
・横書きマスクツールは文字の形で選択範囲を作ることができる便利機能だよ
さくさくっと、
今回頑張った結果は以下の通りです。
【凝縮画像1】

★ポイント
・海老が背景レイヤーと雲レイヤーの間に入っている!
・dropdbさんオススメのぼかしを使ってエビとその周辺に違和感を無くすように努めた!
・選択ツールに慣れてきた!
・これまでで一番エビをきれいに抜くことができた!
基本はある程度マスターした気になっているので、もう一冊くらい参考書を買って基本の穴を埋めていこうと思います。
次回からこれまではてなでブックマークぽいことをしてきたPhotoshopのTips系なんかも実践していこうと目下検討中です。
おやすみなさい。