ブログカスタマイズ Gimp2を使って

2015年08月23日

影の付け方


影を付ける事によって画像により臨場感を作り出す事が可能になります。HP素材工房のArt eh bymyの多くでは、文字画像のみならず画像に影をつけ、より臨場感を出しています。影の付け方をご紹介します。

● 影を付ける画像をGimp2で開きます。この画像は、既に背景が透明化されていますが、透明化されていない場合は、人物の切り抜きを参考に切り抜いてください。背景がベタであれば、アルファチャンネルを追加してからファジー選択ツールを背景でクリック、deletキーで簡単に削除できます。アルファチャンネルについては、人物 切り抜きでご紹介していますので、そちらもご参考にしてください。



● 影を作るために、画像をコピーする必要性があり、そのための場所を作るためにレイヤーを追加します。レイヤーとは層を現す言葉です。



● レイヤーを追加してから、レイヤーウィンドウ内にある、画像を選択してコピーを行ないます。コピーはキーボードのCtrlキー+Cでコピーできます。



● レイヤーを選択してからCtrlキー+Vで貼り付けます。どうしてかわかりませんが、一回で貼り付けられないため二回Ctrlキー+V行ないます。下の図の様に二つ同じ画像が現れます。



● 一番上のフローティングは不必要なため、ドラッグをしてゴミ箱に移動します。



● コピーした画像は影とするため、上の色から着色を選択します。



● 輝度を左によせ、画像を黒に近い色にします。少し明るめの黒を扱う場合は、一度真っ黒にしてから、OKを押し、再び着色で明るくする方法があります。



● 影となるレイヤーを下に移動させ、画像の背面に影を付けます。



● 移動ツールを使い、影を斜め下にずらせば完成です。ずらすのに全面の画像が邪魔になる場合は、レイヤーウィンドウにある目を閉じてから移動させる方法もポイントになります。 完成ですが、次は違う影の付け方を紹介します。



● 画像をコピーするまでは同じ作業になります。下の図に見られるようにファジー選択ツールを選択を行ない、ツールオプションでしきい値を高めに設定を行ない、画像内をクリックします。 しきい値が高いとは、大まかに似ている色を集め選択する、小さければ、細かい範囲で選択すると物だと考えていただければと思います。

しきい値は、直接クリックしても、ドッラッグしても調整する事ができます。



● 移動選択ツールを選択してから、キーボードにありますdeleteキーで削除します。



● 少しぼかしのある影とするために、選択から境界線をぼかすを選び、10pxほど入力します。10pxの外枠にぼかしが入ります。



● 塗りつぶしを選択を行ない 左下にある色を選択して塗りつぶす色を決めます。色を現すウィンドウが現れます。直接クリックで拾い上げる事も出来ます。バーを動かして色を決める事もできます。ここでは影ですので、少し明るめの黒を利用します。色が決まれば、選択範囲内をクリックして塗りつぶします。



● 影を背景に馴染ませるために、レイヤーウィンドウにある影を選択してから不透明度を下げます。これは、直接クリック、ドラッグして左に寄せる事で下げる事が出来ます。



●完成です。 修正しながら行う場合、画像をアップロードして画像に変化が無い場合があります。ブラウザの仕組みによる物で、一度ダウンロードした画像と同じファイル名は、過去の画像を表示させる事があります。ブラウザ上で、右クリック 再読み込みで最新情報が表示される様にしてください。影は、背景に馴染んでいます。



HTML言語基本タグ













art_eh_bymy05 at 08:39コメント(0)GIMP2  

記事内に画像を扱おう


記事内に写真を投稿できる機能が付いている事が一般的ですが、このページで紹介する事は、HTMLタグ編集を扱いファイルとして扱う方法です。

この方法のメリットは、同じファイル名で内容を変えるだけで、全て掲載している画像を一括で変える事が出来ます。例えば、この記事内で扱われています、↑のBlog Customaize というデザインを変えたい場合、一つ一つの記事を変えていれば、効率が悪くなります。ファイルの内容を変えるだけで、全てのページに記載されている内容を変える事が出来ます。

●以下の画像を扱って紹介します。



● ブログカスタマイズ用の画像をアップロードするのと同じ方法で画像をアップロードします。画像管理では無く、ファイル管理の方を選びます。



●下に記載されている文字に対して、アップロードした住所 URL、画像の幅、画像の高さを入れます。centerとは、記事内における中央に配置する命令文です。left right など入れ替えれば左、右に寄せて表示する事ができます。記入した文字を全てコピーを行ないます。


●カスタマイズ可能なブログには必ず、本文を記載するページにHTMLタグ編集と言うボタンが設置されていますので、そのボタンを押して、掲載したい場所に貼り付け更新、若しくは投稿、保存をします。


●上の画像におけるHTMLタグは以下の内容になります。

●一般的に、他社のブログに掲載している画像を直接扱う事はできませんが、ライブドアブログの場合は、ライブドアブログ内同士であれば違うブログ同士での画像を共有する事ができます。

違うブログで扱っている画像を直接、HTMLタグに貼り付けて表示する事ができます。

ただし、第三者の画像を承諾も無く、勝手に扱う事は、著作権を犯す行為になるため、注意をしてください。

他のブログで扱っている画像は、そのブログを扱わなくなり削除してしまうと、他のブログにも影響を与えるため、一つブログを開設したら、そのブログで扱う画像は全て同じブログで利用する事が無難と言えます。


●ブログ内で扱えるタグ<プログラム言語>は制限されているブログサービスもありますが、 ライブドアブログは様々なタグが扱えるため、勉強用としてもお勧めです。

HTML言語基本タグ




















「Copyright (C) 2015 Art eh bymy All Rights Reserved.」