ラベル 画像 の投稿を表示しています。 すべての投稿を表示
ホームページ素材の簡単な作り方
今回はホームページ作成初心者さんの壁と言える「素材の作り方」について説明したいと思います。
まず入門書などで習う事は用意されている素材を使って学習を進めたり、画像などを使わないシンプルなデザインでホームページを作り、学習を進める形が多いと思います。
この場合、初心者さんは画像の作成方法など詳しくない為綺麗なホームページを作る事が出来ませんので今回は無料で、ある程度の画像が作れる様にお教え致します。
早い話、画像編集ソフトをとかで作成すればいいのですが、そんな突き放した事はしたくないので私の作成方法を例にしましょう。決して私の作成方法は正しいとは言えませんが、私の中では今から説明する方法が一番作りやすいと思います。
上記のURLからダウンロード後インストールして下さい。
インストール方法は割愛させて頂きます。
の様にして下さい。
これは幅70px高さ90pxと言う意味です。
画像の基礎を説明すると、
幅が[x]で高さが[y]です。[0,0]は[x,y]共に[0px]の位置の事です。
PCに関してはこれが位置のルールとなります。
ではこの「紙?」に実際に基礎となる部分を書いていきましょう。
私は上の画像の様に図を書きました。「画像はクリックしたら拡大します。」
赤い枠で囲まれている物だけ使いました。
線の太さは1px(一番細い)物にして線を描いて下さい。
ではそっくりそのまま同じ物を作りたいのであれば先ほど教えた[x,y]の数値でお教えします。
[34,2]->[10,45]->[34,88]->[58,45]->[34,2]
これで、ひし形が出来たと思います。
次に、
[27,30]の位置から各角の[34,2][10,45][34,88][58,45]へ線を引きます。
上の画像の様になりましたか?
画像をそのまま右クリックして使う事も出来ますよ。(今更ですが^^;)
ではこの基礎を元に画像に色を付けていきましょう。
名前を付けて保存して下さい。
RGBと言う項目を選択して赤と白を上記の画像の様にして下さい。
これでグラデーションは赤色から始まり、白で終わります。
まず入門書などで習う事は用意されている素材を使って学習を進めたり、画像などを使わないシンプルなデザインでホームページを作り、学習を進める形が多いと思います。
この場合、初心者さんは画像の作成方法など詳しくない為綺麗なホームページを作る事が出来ませんので今回は無料で、ある程度の画像が作れる様にお教え致します。
早い話、画像編集ソフトをとかで作成すればいいのですが、そんな突き放した事はしたくないので私の作成方法を例にしましょう。決して私の作成方法は正しいとは言えませんが、私の中では今から説明する方法が一番作りやすいと思います。
対象者
- OSがWindowsの方
- 画像作成・編集に興味ある方
- 自己解決出来る方
ソフトウェアを入手しよう
まず始めに画像を作成・編集するソフトを入手しましょう。Windowsであれば付属の「ペイント」と言うソフトが既にインストールされていると思いますが、これでは力不足ですのでより力を持っているソフトをダウンロードしましょう。
上記のURLからダウンロード後インストールして下さい。
インストール方法は割愛させて頂きます。
画像の基礎部分を作ろう!
まず私が画像を作成する時は基礎部分を作ってから色などグラデーションなどの効果を付けて行きます。始めはWindows付属の「ペイント」を使って基礎を作成して行きます。
では、今回は例として「クリスタル」みたいな物を作って行きましょう。
まず始めに「ペイント」の[新規]で新しい「土台?紙?フィールド?」を用意して下さい。
サイズはペイントの下のバーを見れば分かるのですが、
の様にして下さい。これは幅70px高さ90pxと言う意味です。
画像の基礎を説明すると、
幅が[x]で高さが[y]です。[0,0]は[x,y]共に[0px]の位置の事です。
PCに関してはこれが位置のルールとなります。
ではこの「紙?」に実際に基礎となる部分を書いていきましょう。
私は上の画像の様に図を書きました。「画像はクリックしたら拡大します。」
赤い枠で囲まれている物だけ使いました。
線の太さは1px(一番細い)物にして線を描いて下さい。
ではそっくりそのまま同じ物を作りたいのであれば先ほど教えた[x,y]の数値でお教えします。
[34,2]->[10,45]->[34,88]->[58,45]->[34,2]
これで、ひし形が出来たと思います。
次に、
[27,30]の位置から各角の[34,2][10,45][34,88][58,45]へ線を引きます。
上の画像の様になりましたか?
画像をそのまま右クリックして使う事も出来ますよ。(今更ですが^^;)
ではこの基礎を元に画像に色を付けていきましょう。
名前を付けて保存して下さい。
PictBearで色・効果を付ける
PictBearで画像を読み込んだら何色にするか決めましょう今回は例として赤色にしましょう。
ここからは感覚で進めて行きます。貴方の色彩感覚が重要になります。
クリスタルの面は4面なのでグラデーションで立体感を出しましょう。
RGBと言う項目を選択して赤と白を上記の画像の様にして下さい。
これでグラデーションは赤色から始まり、白で終わります。
[自動選択]でひし形の左上の面をクリックしてその領域だけを選択してください。
これで、この面にグラデーションをかければ立体感が生まれます。
全ての面に同じ事をしてグラデーションをかけて下さい。角度は貴方のイメージ次第です。
今回は小さい画像で、超簡単に作成しましたがある程度[PictBear]が使える様になったら
上の画像の様に綺麗な画像が作れる様になります。
オリジナル"グッズ"を作ってみよう
今回自分でデザインした物を実際に"物"にしてみようと思います。
最近Google+では、オリジナルグッズを作ってみたりする方が増えて来ていますので、今回実際にグッズを作成してみようと思うのですが、何を作るか迷いますよね?でも安心自分の作りたい物を作ればいいだけの話なんですよ(´∀｀*)
皆さんは"二次創作"はご存知でしょうか?二次創作とは原作を自分なりにアレンジしてみる事です。ニコニコ動画などでは様々な二次創作があり、「歌ってみた・踊ってみた・描いてみた」なども二次創作の範囲に入るのです。ただ著作面については詳しく無いので分かりませんが、二次創作OKマークがあるらしいです。
以下のマークのあるコンテンツは二次創作がOKだそうです。これも最近て出来た物なのでまだ(2013年現在)では復旧していないと思いますが、これからどんどん出てくると思います。
何故オリジナルグッズの話で二次創作の話になったのか?それは私も二次創作でオリジナルグッズのデザインをしているからです。上記のバイクの白黒画は元は写真で、自分で白黒画にアレンジ(二次創作)したのです。素材が作れなければ二次創作すればいい。
決まったレイアウトさえあれば誰でもオリジナルの画像が作れるので、皆さんも二次創作がン馬って下さい。
作りたい物を考える
まず最初に何を作りたいか考えましょう主に挙げられる例としては、
- ステッカー
- 缶バッチ
- オリジナルフェイスタオル
- オリジナルTシャツ
全て自分のオリジナルデザインで作れるのです。何かのオフ会やグループでのイベントやバイク用ステッカーなど自分のセンスで作れます。
今回作ろうと思う物
今回は以下の物を作ろうと考えています。
- ステッカー
- 缶バッチ
実際にデザインした物が以下です。
■ステッカー
今回暴走族のステッカーデザインをしました。このステッカーは実際に私の周りに居る暴走族に有料配布するつもりです。
■缶バッチ
缶バッチは、僕が主に使っているプロフィール画像を缶バッチにしたいと考えています。
まず初めに何か印刷業者があれば見積もりする事をお勧めします。見積もりをしずに注文してしまうと思いどうりに出来てなかったり後々面倒なので初めから見積もりをしましょう。
ステッカーは以下のサイトで注文予定です。
上記URLのサイトは料金が格安で、見積もりの返信も平日の昼であれば直ぐに対応してくれます。
缶バッチは以下のサイトで検討中です。
上記URLのサイトは信用性が高く、今回の缶バッチ制作に利用させていただきます。
自分はPhotoshopなど高額な有料ソフトを持ってなく、お問い合わせをした結果添付したデザイン画を元に解像度の高い画像を1から制作してくれるとの事でしたがもちろん料金は掛かります。最低でも3000円だそうです。
5個=950円
画像制作=3000円
計3950円になりますがちょっと粘ってみます。
希望価格は3500円ぐらいには落としたいですね(^_^;)
お問い合わせで電話した結果デザイナーさんと計画を経てて制作を進めて行くつもりです。
Photoshopなど持っていない方はお問い合わせで言ってみるといいかもしれませんが料金は追加で取られますのでご注意下さい。
缶バッチ制作には他にも以下のサイトがあります。
上記URLのサイトはPhotoshopなど使わなくても出来るらしいのですが面倒くさそうなのでやめましたが、サンプルの請求は出来るので品質など調べたいのなら上記URLのサイトを利用するのもいいかもしれません。
手書きの絵をデジタル化
よく僕がwebサイトを作成する時素材が無くて困っています。
Photoshopがあれば簡単に素材なんて作れますが僕が持っている物は、
Windows付属のペイントとPictBearしか持っていません。
でもこれだけのソフトで、手間はかかりますけど手書きで、書いた絵をデジタル化出来るのです。
結構大変ですけどソフト不足で悩んでいる方には、必見だと思います。
デジタル化する方法は、単純です。
まず絵をプリンターなどで、スキャンをします。
この誰でも書けそうな絵をスキャンして、デジタル化をしたいのですが問題がいっぱいあります。
まず絵とは、関係の無いノートの線があります。
あと絵自体に適当に色がつけられています。
それだけで、もう無理っと言う方が居ると思うのですが
デジタル化するには、これを下書きと考えるのです。
ペイントで、絵の枠をかたどって行きます。
上の画像の赤い枠に囲まているブラシを手段して、色を赤にすれば
絵をかたどる事が可能です。
次に注意してもらいたいのですが、絵に書かれた猫にリボンが付いてますよね?
このリボンの部分は、赤枠で、やらないで、下さい。
リボンの部分だけ赤にしたいので、リボン以外の所を赤で、書きます。
リボンの部分以外の所の編集が完了したら保存して下さい。
次にリボンの部分を緑色で、なぞって保存します。
保存する時別の名前で、保存して下さい。
次に、PictBearで最初に保存したリボン無しの画像を開きます。
開いたら赤の部分を選択して近似色の選択をします。
選択したら赤色の部分だけ選択された状態になるのですが、
「選択範囲の反転」をしたら赤枠以外の部分を選択します。
その状態で、消しゴムで、消します。
上の画像の様に要らない部分が綺麗に消えました。
そのまままた選択範囲の反転をしてブラシなどで、赤枠を黒色で、塗りつぶして下さい。
塗りつぶしたらまたリボンの部分を緑で、なぞった画像を開いて、
緑を選択して、今と同じ作業をして下さい。
緑の枠は、赤色にして下さい。
これで、素材は、そろいました。
あとは、レイヤーで、重ねるだけです。
皆さん出来ましたか?
結構手間は、かかりますけどなれたら簡単です。
試してみて下さい。
