• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+

高幡≡HooliGaN≡HRのブログ一覧

2008年11月07日 イイね!

みんカラのTOP画像製作

今回はGimpでカッコイイTOP画像を製作します。
みんカラのデフォルトスキンでは物足りない人は
チャレンジしてみては如何でしょうか。
愛車の写真をTOPに飾って来客者にアピールできますからね。
それでは長いですがマイペースにいきましょう。
実際に使っているTOP画像を使って製作していきます。

グラデーション
同じサイズで新しい画像を作る
走査線を使用してみる
画像に文字を入れてみる

まずGIMPを起動します。
PCの性能により時間がかかる場合がありますが、まったり待ちましょう。


加工したい画像をクリックしたままGIMPの中へドラッグアンドドロップします。
そしたら切り抜きを選択して画像を切り取りましょう。


適当に囲ったら次は微調整していきましょう。
端をクリックしながら動かすと、このように調整ができます。


高さと後ろは後ろの石像をギリギリ入るようにして、前はグラデーションを使って
色を入りますので、スペースを空けて余裕を持たせます。


切り取り後の画像です。
結構すっきりしましたね。

.
次は黒背景と馴染むように、グラデーションツールを使用します。
こちらのブレンドをクリックして下さい。


そしたらこちらの窓にある、グラデーションタブの中にある
描画色から透明を選択します。


端からクリックし、端まで真っ直ぐ引いていきます。


端まで選択して指を離すと、画像がグラデーションに染まりました。


そしたら一旦製作した画像を保存をしましょう。


画像上のファイル名に直接.jpgと拡張子を入力しても良いですし、
下にあるファイルタイプを選択JPEG画像を選択しても可能です。
保存場所はとりあえずデスクトップ上で。


JPEG保存する場合、このようにエクスポートするかのダイアログが出てきます。
元ファイルを上書きしないのでエクスポートを選択します。
デスクトップ上に同じ名前の画像がある時は、別に上書き確認のダイアログが表示されます。


保存する時の画質を選びます。
うちの場合は100にしています。

.
次に長さを伸ばす為に、新しい画像を製作します。


幅は840辺りで選択してOKボタンをクリックします。


新しい窓で画像が作成されました。


今回はブラックのスタイルをベースに画像を作るので、今回はを選びます。


次に塗りつぶしツールを使って画像を黒くします。



塗りつぶしたら先程加工した愛車の画像を
デスクトップ上からドラッグアンドドロップします。
ツールボックスから整列を選択します。


先程入れた画像をクリックして指定し、右端を基準に並べるを選択します。


まだ上の方にズレているので下端を基準に並べるを選択して揃えます。




レイヤーなどを編集する窓で、レイヤータブにある愛車の画像を右クリックし
下のレイヤーと統合を選択して黒く塗りつぶした画像と加工した写真を合体させます。



.
今度は走査線を使用して加工します。
作業を見て微妙だなと思いましたら飛ばしても構いません。
同じところを右クリックしてレイヤーの追加を選択します。


レイヤー名を走査線と入力し、幅は同じく840px、
レイヤー塗りつぶし方法は「白」を選択してOKをクリックします。


レイヤーに新しく追加されました。
続いて下の段にあるパターンタグをクリックします。


Stripes Fineを選択します。


編集タブをクリックしてパターンを塗りつぶすを選択します。




レイヤータブにある不透明度のゲージを左に動かしてみます。




試しにモードをオーバーレイに変更して不透明度を好みに調整していきます。
他のモードも試してみるのもいいかもしれませんね。

.
最後にロゴを作成します。
みんカラのスタイルシートでは元々リンク文字が付いていますが
個人的に殺風景だと感じたので非表示にして画像にロゴを入れました。
今回は黒背景なのでネオンの看板みたいにしてみました。
画像右クリックしてファイル→画像の生成→ロゴ→ネオンと順に選択していきます。


文字にはブログ名を入れ、フォントサイズ、フォントを選択します。
背景はいらないのでそのままで、発光色を好みの色に変更します。
影の有無も好みで選択してください。
設定が終了したらOKをクリックしましょう。




フォントサイズを設定するのを忘れてました・・・。
しょうがないので一旦XCF形式で保存します。


同じく保存先はデスクトップでいいでしょう。


ロゴを作成したXCFファイルを加工した画像にドラッグします。


見事にでかいままですね・・・。


ロゴの背景は邪魔なので削除します。各ロゴのパーツの下にbackgroundがあります。
コレを右クリックして「レイヤーの削除」を選択して削除してください。






今度は各パーツに別れているロゴを1つに合わせます。
一番上のNeon Tubesを右クリックし、1段下のレイヤーと統合を選択します。
次にNeon Glowを右クリックして、同じく1段下のレイヤーと統合します。






統合したら、次はロゴを小さくします。
ロゴを右クリックしてレイヤーの拡大・縮小を選択します。
幅を好みに設定し、拡大・縮小ボタンをクリックします。
うちの場合は400に設定しました。




左上に合わせてみました。


名前をつけて保存をします。
JPEGとXCF両方を保存しておいたほうが良いでしょう。
バックアップは念の為持っておいたほうが、
後々誤字が見つかって最初からやり直しって事になりかねないですからね。


以上、完成致しました。
画像付となると、えらく縦長になってしまいますね。
コレを期に、色々と作ってみるのも良いかもしれません。
最後まで見て頂き、ありがとうございました。
次回は画像のアップロードとスタイルシートの編集です。


--みんカラProfileへ
Posted at 2008/11/08 19:10:10 | コメント(0) | トラックバック(0) | CSSカスタマイズ | パソコン/インターネット
2008年11月06日 イイね!

TOP画像をカッコよく加工する為のソフト。

まずは画像を加工するソフトをパソコン(以下PC)へインストールしなければなりません。
ここでは優秀で高機能なフリーウェアのGIMP2.6を使用して説明したいと思います。
解らない用語があればGoogleで検索してみましょう。


最初にGIMP2.6をダウンロードします。
こちらへ飛んでいったら[GIMP for Windows ( version 2.6.1 )]の
[gimp-2.6.1-i686-setup.zip]を右クリック→対象を保存を選択してダウンロードします。
場所は解りやすくデスクトップ上が良いでしょう。

ZIPファイルを解凍すると[gimp-2.6.1-i686-setup.exe]が出てきますのでダブルクリックして実行します。

WS000051
[NEXT]をクリック

WS000052
[NEXT]をクリック

WS000053
真ん中の[Install now]をクリックしてインストールします。

WS000054
お茶を啜りながら待ちましょう。

WS000055
すぐ起動したい場合は[Launch Gimp]をチェックしたままに、
後で起動したい場合はチェックを外してください。

WS000056
勝手にショートカットを作成されました。

次回は使用方法を説明します。


みんカラProfileへ
Posted at 2008/11/06 23:11:20 | コメント(0) | トラックバック(0) | CSSカスタマイズ | パソコン/インターネット
2008年11月06日 イイね!

スタイルシートをカスタマイズしてみました。

CSS(スタイルシート)で上の画像と全体のサイズを広くしてみました。
何回か訪問されてらっしゃる方は解っていると思われますが、
以前はブラックのデフォルトを使用していました。
で、ブラックをベースにカスタマイズしています。
CSSのカスタマイズは結構難しいと思っている方も多いのではないでしょうか。

まずはCSSとはなんぞや?から書いてみたいと思います。
CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略称でして、
段階スタイルシートとも言われています。
ベースであるHTMLやXMLにCSSを使って簡単に文字の大きさ、色、画像など装飾を指定できます。
CSSの技術は既に1996年に誕生しており、現在まで進化しています。

自分が12年前、ドリキャスを使ってジオシティーズのHPスペースを使って
サイトを作っていた時はHTMLで事細かく設定でき、自由度はありましたが
反面、同じデザインを指定するのに長ったらしいHTML文を
繰り返し指定しなくてはならなければいけませんでした。

CSSを使い、デザインを決めればHTML文章へ簡単な指定するだけで
デザインの統一ができる利点があります。
各コンテンツのCSSを作っていれば、それぞれの新しいHTMLページを作成する時に
本文記入とCSSの指定だけすれば良いので結構楽ができます。

みんカラのスタイルシート編集機能では、各コンテンツのベースを
ひとつのCSSで制御しているので、縦に長くなってしまっています。
初心者から見れば何が何やら解らず、堪ったもんではありません。
ですが命令文を理解できれば案外楽に事が進みます。
人も言葉を理解してコミュニケーションをとっていますよね、それと一緒なんです。
命令文はサーバーに伝える一種の言葉であり、
学生時代で経験してるか解りませんが、英語の単語を暗記するのと要領は一緒です。

正直、自分はHTMLを理解はしていますが、CSSに関してはまだ初心者です。
ここではみんカラによるCSSカスタマイズの事を記述していこうと思います。
次回はTOP画像のカスタマイズ方法を書いていきます。
素材画像をソフトで加工する方法、画像の指定方法、文字の消し方など。
また長くなるので今回はここまでにします。
ここまで読んで頂き、ありがとうございました。
トラックバック、コメント大歓迎です。

CSSカスタマイズに関して参考になるサイト。
ABI☆Website!!
Posted at 2008/11/06 20:28:40 | コメント(0) | トラックバック(0) | CSSカスタマイズ | 日記

プロフィール

「[整備] #マジェスティ125 [コマジェ]Vベルト交換 及び クラッチシュー 点検 清掃 https://minkara.carview.co.jp/userid/367117/car/2616311/8119040/note.aspx
何シテル?   02/16 19:54
みんカラの最果てへようこそ。 ※2019.08.01 更新

ハイタッチ!drive

みんカラ新規会員登録

ユーザー内検索

<< 2025/8 >>

     12
3456789
10111213141516
17181920212223
24252627282930
31      

リンク・クリップ

[キムコ レーシング125]WAKO'S FK-20 フォークオイル20 T520 
カテゴリ:その他(カテゴリ未設定)
2025/03/11 16:02:03
トルクカムO-リング交換 
カテゴリ:その他(カテゴリ未設定)
2025/02/25 17:24:16
TIMSUN TS689 ストリートハイグリップ 
カテゴリ:その他(カテゴリ未設定)
2025/02/25 17:20:52

愛車一覧

ヤマハ マジェスティ125 コマジェ (ヤマハ マジェスティ125)
 .
カワサキ ザンザス カワサキ ザンザス
ヤフオクで現状販売のものを購入しました。 タイヤ オイル クーラント交換 キャリパーOH ...
日産 シルビア 日産 シルビア
ヤフオクにて、10万で購入した愛車・シルビア。 SRが主流となっている今、 あえてCA1 ...
日産 シルビア 日産 シルビア
昭和63年式 E-S13 Silvia K's CA18DETです。 Yオクにてワンオー ...

過去のブログ

2025年
01月02月03月04月05月06月
07月08月09月10月11月12月
2020年
01月02月03月04月05月06月
07月08月09月10月11月12月
2019年
01月02月03月04月05月06月
07月08月09月10月11月12月
2009年
01月02月03月04月05月06月
07月08月09月10月11月12月
2008年
01月02月03月04月05月06月
07月08月09月10月11月12月
2000年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ利用規約サイトマップ
© LY Corporation