ラベル 絵 の投稿を表示しています。 すべての投稿を表示
イラストサイト向けレスポンシブデザイン テンプレート
イラストサイト向けのレスポンシブデザインのテンプレートを配布開始!!
以前配布した「イラストサイト向けテンプレート」の改バージョンとなるレスポンシブデザインに対応したテンプレートを今回配布致します。 レスポンシブデザインの特徴は1つのソースで複数の端末に対応出来る柔軟性が特徴です。今回は主にタブレット端末・スマートフォンに対応しました。
特にテンプレート自体の仕様は変わっていないので、以前のテンプレートと同じ様に使う事が可能です。
イラストサイト向けテンプレート配布開始
☆☆※現在テンプレートがダウンロード出来ない問題が発覚したので現在新規で制作を速急に進めております。大変ご迷惑をお掛けして申し訳御座いません。速急に対処致しますのでいましばらくお待ちください。※☆☆
New
レスポンシブデザインに対応しました。
スマートフォン・タブレット端末の対応を致しました。
「こうして欲しい!!」っと言ったリクエスト等ございましたら気軽にコメントしてください。
久々のテンプレート配布です(´∀｀*)
今回作成したテンプレートは、イラストサイト向けで、今まではほとんど写真などを紹介する様なテンプレートが多かったですが、「イラスト」と「写真」は全く違うと私は思います。なのでイラストサイト向けのテンプレートを作ろうと思い今回作成させて頂きました。
デザインセンスは全然良くないのですが、一応作ったので是非使ってもらいたいです。
イメージとしてはアニメのウェブサイト的な感じです。
絵師であれば、イラストを一番見てもらいたいはずなのでお気に入りの描いた絵をトップページに載せてアピール出来る様にアニメの公式サイトの様な感じに絵を大きく表示出来る様にしました。
「イラストページ」も、イラストをクリックすると大きく拡大して表示出来る様なjQueryを使わせて頂きましたので更に自分の描いたイラストをアピール出来る様になります。
フッターの部分には自分がお勧めするサイトのバーナーを貼るのもいいです。
完全フリーのテンプレートなので著作を書き換える事もいいです。
是非ご利用下さい。
※初期で使われている画像は使用する前に必ず削除して下さい。
ニコニコ静画やGoogle+で拾ってきたイラストなので。^^;
以降このテンプレートの拡張版も配布する予定ですので、期待して下さい。( ^ω^ )
[イラストサイト向けテンプレートのサンプルを見に行く]
[早速イラストサイト向けテンプレートをダウンロードする]
New
レスポンシブデザインに対応しました。
スマートフォン・タブレット端末の対応を致しました。
「こうして欲しい!!」っと言ったリクエスト等ございましたら気軽にコメントしてください。
久々のテンプレート配布です(´∀｀*)
今回作成したテンプレートは、イラストサイト向けで、今まではほとんど写真などを紹介する様なテンプレートが多かったですが、「イラスト」と「写真」は全く違うと私は思います。なのでイラストサイト向けのテンプレートを作ろうと思い今回作成させて頂きました。
デザインセンスは全然良くないのですが、一応作ったので是非使ってもらいたいです。
イメージとしてはアニメのウェブサイト的な感じです。
絵師であれば、イラストを一番見てもらいたいはずなのでお気に入りの描いた絵をトップページに載せてアピール出来る様にアニメの公式サイトの様な感じに絵を大きく表示出来る様にしました。
「イラストページ」も、イラストをクリックすると大きく拡大して表示出来る様なjQueryを使わせて頂きましたので更に自分の描いたイラストをアピール出来る様になります。
フッターの部分には自分がお勧めするサイトのバーナーを貼るのもいいです。
完全フリーのテンプレートなので著作を書き換える事もいいです。
是非ご利用下さい。
※初期で使われている画像は使用する前に必ず削除して下さい。
ニコニコ静画やGoogle+で拾ってきたイラストなので。^^;
以降このテンプレートの拡張版も配布する予定ですので、期待して下さい。( ^ω^ )
[イラストサイト向けテンプレートのサンプルを見に行く]
[早速イラストサイト向けテンプレートをダウンロードする]
ホームページ素材の簡単な作り方
今回はホームページ作成初心者さんの壁と言える「素材の作り方」について説明したいと思います。
まず入門書などで習う事は用意されている素材を使って学習を進めたり、画像などを使わないシンプルなデザインでホームページを作り、学習を進める形が多いと思います。
この場合、初心者さんは画像の作成方法など詳しくない為綺麗なホームページを作る事が出来ませんので今回は無料で、ある程度の画像が作れる様にお教え致します。
早い話、画像編集ソフトをとかで作成すればいいのですが、そんな突き放した事はしたくないので私の作成方法を例にしましょう。決して私の作成方法は正しいとは言えませんが、私の中では今から説明する方法が一番作りやすいと思います。
上記の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]が使える様になったら
上の画像の様に綺麗な画像が作れる様になります。
手書きの絵をデジタル化
よく僕がwebサイトを作成する時素材が無くて困っています。
Photoshopがあれば簡単に素材なんて作れますが僕が持っている物は、
Windows付属のペイントとPictBearしか持っていません。
でもこれだけのソフトで、手間はかかりますけど手書きで、書いた絵をデジタル化出来るのです。
結構大変ですけどソフト不足で悩んでいる方には、必見だと思います。
デジタル化する方法は、単純です。
まず絵をプリンターなどで、スキャンをします。
この誰でも書けそうな絵をスキャンして、デジタル化をしたいのですが問題がいっぱいあります。
まず絵とは、関係の無いノートの線があります。
あと絵自体に適当に色がつけられています。
それだけで、もう無理っと言う方が居ると思うのですが
デジタル化するには、これを下書きと考えるのです。
ペイントで、絵の枠をかたどって行きます。
上の画像の赤い枠に囲まているブラシを手段して、色を赤にすれば
絵をかたどる事が可能です。
次に注意してもらいたいのですが、絵に書かれた猫にリボンが付いてますよね?
このリボンの部分は、赤枠で、やらないで、下さい。
リボンの部分だけ赤にしたいので、リボン以外の所を赤で、書きます。
リボンの部分以外の所の編集が完了したら保存して下さい。
次にリボンの部分を緑色で、なぞって保存します。
保存する時別の名前で、保存して下さい。
次に、PictBearで最初に保存したリボン無しの画像を開きます。
開いたら赤の部分を選択して近似色の選択をします。
選択したら赤色の部分だけ選択された状態になるのですが、
「選択範囲の反転」をしたら赤枠以外の部分を選択します。
その状態で、消しゴムで、消します。
上の画像の様に要らない部分が綺麗に消えました。
そのまままた選択範囲の反転をしてブラシなどで、赤枠を黒色で、塗りつぶして下さい。
塗りつぶしたらまたリボンの部分を緑で、なぞった画像を開いて、
緑を選択して、今と同じ作業をして下さい。
緑の枠は、赤色にして下さい。
これで、素材は、そろいました。
あとは、レイヤーで、重ねるだけです。
皆さん出来ましたか?
結構手間は、かかりますけどなれたら簡単です。
試してみて下さい。
