ブラックカッピのブログ一覧

寒さが厳しくなってきましたから心配ですね。。
ご子息様が一刻も早くご自宅に戻られれますように！

この記事は、（拡散希望）息子を探しています。m(_ _)mについて書いています。

こんばんは～♪
昨日の続きでございます。
引き続きグラフィック編集ソフト「Gimp」の使い方をご紹介します。ヽ(*^^*)ノ





section７．写真をトリミングする

「画像メニュー　→　拡大・縮小」によって画面で画像のサイズが分かったら
、いったん「キャンセル」をクリックします。



１．選択ツールを選ぶ

下図の「矩型選択」ツールを選択しましょう。




２．ツールオプションの設定

「矩型選択」を選ぶと下図のオプションが表示されます。
「サイズ」を選択すると幅と高さを指定できます。




３．範囲を作る

数値を指定したら、写真の上の適当なところでクリックすると
図のような破線の範囲が出来ます。
例題の写真は3000pxを超えているので930pxの選択範囲は、
そのくらいで出来上がります。（使用する写真のサイズによって見え方が変わる）

この範囲を次の工程で・・・♪




４．選択範囲で写真をトリミングする

画面の範囲を比率固定のまま、広げたり狭めたりして、写真の一番必要な場所に
配置します。（トリミング作業）

下図を参考に！
その為には、｢縦横比」に切り替え範囲の四隅の角（特に右下）をドラッグすると、
比率固定（930x290)のまま、拡大縮小が出来ますので、
お好みのサイズにしてみましょう。



こんな感じでトリミングします♪




５．必要なところを残す！

選択範囲で囲んだところを残す事ができます。
「画像メニュー　→　選択範囲で切り抜き」を選択します。

※ただし、この時点では、まだ幅が930pxではありません。
次の工程に進みます。



６．解像度を適正に修正する

比率は、良いのですが、サイズは大きいままなので、みんからのヘッダー画像の
最大値である幅：930px 高さ：290pxに変更します。

「画像メニュー　→　画像の拡大縮小」を選択します



下記図が表示されたら幅と高さの右にある縦横比固定のリンクをONにします。
その上で「幅」に「930」を指定します。

高さは、縦横比固定になっていれば、自動入力されるので、
入力の必要はありませんが、まれに高さの数値が更新されない場合があります。

そのような時は、高さの数値入力ボックス内をシングルクリックしてみましょう。
更新されます。

数値が間違いなければ「更新」をクリックします。



解像度が変更され例題の画面はこのように縮小されます。
実際の寸法（１００％)で｢確認する事は大切です。
下図を参考に画面左下の寸法設定ボタンから「100%」を選択してみましょう。



100%で表示されました♪






Section８．保存する(エクスポート作業）

出来上がった静止画像は、web系画像フォーマット（JPEG , PNG ,GIF)の
いずれかでなければ、ブラウザに表示できませんので、書き出します。

ちなみにGimpのドキュメントフォーマットは「xcf」らしいです(笑）
普段Photoshopばかりなので扱ったことないです(*￣∇￣)

エクスポートは「ファイルメニュー　→　名前を付けてエクスポート」
を選択します。




下図が表示されたら、

・保存先を開く
・画像フォーマットをJPEG（PNGでもOK)にする
・ファイル名を半角英数字で入力する（拡張子をわすれないように）
・エクスポートをクリックしてオプションを表示させる



品質は、通常１００ですが、みんからはサイズ制限コンテンツがありますね♪
まさにヘッダー画像は300kb以下に設定しないと保存が出来ません。。

このような場合は、「画像ウィンドウでプレビュー」をONにます。
すると、ファイルサイズが確認できるようになりますので、「品質」の数値を
下げて300kb以下に設定します。

最後に「エクスポート」をクリックして保存します。


こんな感じです♪




エクスポートされたかを確認してみましょう！





Section９．ミンカラのスタイルシートの確認



エクスポートした画像をいよいよミンカラのヘッダーに貼り付けます！

１．まずミンカラのマイページにログインします。

２．サイドメニューの「管理　→　スタイルシート」をクリックします。

３．画面上のメニュー「スタイルシート　　→　簡易編集」をクリックします。





４．ヘッダー＆タイトルエリアの設定を行います。
ここでエクスポートした画像を参照し保存すれば表示されます！

・ヘッダーの高さを290pxに設定します。
・ヘッダー画像の参照をクリックしてエクスポート画像を開きます。
・保存をクリックします。




【補足】
加工した写真を次の日も引き続き作業したい場合もあると思います。
その場合は「ファイルメニュー　→　保存」を選択し任意の名前（自動的に付けられています）を設定し、真意の場所(デスクトップや外部メディアなど）に保存してください。

次回はそのファイルをダブルクリックすればGimpが起動し開く事ができます。




以上です！

チャレンジされる方♪
がんばってください！！

時間が出来たら、文字の入力なども書きますね～♪



ヤマメの横で光るものは・・♪



我が家のアイドル江戸錦の「はな黒ちゃん」♪

こんばんは～♪

今日は急遽、ミンカラブログのヘッド画像の作り方について書きま～す(o^∇^o)ﾉ

普段オイラは、photoshopでヘッド画像を作成していますが、photoshopは有料です。。
1ヶ月だけ無料体験を利用できますが、その後は、お金を払わないと使えなくなるので、それは・・・っていう方にはつらいですよね～。。

今回ご紹介するアプリは
「Gimp ギンプ」といいます！
photoshopのような、高機能グラフィック編集ソフトには負けますが、画像を編集する機能は豊富に搭載されています!!
でもってコチラは無料！！

今回はその無料高機能グラフィック編集ソフト「Gimp」の基本操作とヘッド画像のオリジナル化をご紹介します。ヽ(*^^*)ノ

えーーと。
これから始まる、わたくしのGimp講座は・・

もちろん


無料ですョ～(*'ー'*)ふふっ♪

どうしても分からない方は、出張レッスンも受け付けておりますので、遠慮なくご連絡くださいねぇ～(￣▽￣) ﾆﾔ

＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～

スタート！

＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～＊～
流れ

section

１．制作環境の確認

２．使用する写真を用意しよう

３．ヘッド画像エリアのサイズの調べる

４．Gimpのインストールと起動

６．写真の画像解像度を調べる

７．写真をトリミングする

８．保存する

９．ミンカラのスタイルシートの確認

１０.ヘッド画像を変更する

１１．写真の上に文字を配置する




Section1　制作環境の確認

■制作環境

今回はWindows７です。
※windows8や10でも可能だと思いますが、インストールは、仕様をよく読んで、自己責任でお願い致します）
メモリは4GB推奨です


■使用するアプリケーション
「GIMP for Windows v2.8.14」です。

macやスマホの方は、参考になりません。ごめんなさいね。




Section2　使用する写真を用意しよう

■デスクトップに写真を用意する

使用したい写真をデスクトップに保存しておいてください。
出来れば解像度(サイズ）が横2000px以上ある大きな写真がいいです。
スマホやデジカメの高画質以上の設定で撮った写真であれば問題ありません。





Section３ ヘッド画像エリアのサイズの調べる
撮った写真を管理画面の「スタイルシート」メニューのところで参照すれば基本的にヘッダーに表示できますが、「撮った写真の不要な箇所を削除したり、文字を載せたりしたい」という場合は、画像編集ソフトが非常に重宝します。♪
そこで、ミンカラのヘッダ画像の寸法が分からないという方のために、あえてこんな調べ方をご紹介しちゃいます。(^○^)
このやり方は通常webクリエイターと呼ばれる人たちが行う方法で～す♪

■windowsにGoogleChromeまたはFireFoxをインストールする

お手数ですが、まず、GoogleChrome（ウェブブラウザ）を下記より入手しインストールしておいてください。

https://www.google.co.jp/chrome/browser/desktop/index.html





インストールが出来ましたか？(*ﾟ▽ﾟ)ﾉ



ちょこっと、専門的な話で恐縮ですが(^▽^;)
Webサイトやブログサイトは
HTML(エイチティーエムエル）タグと
CSS（カスケーディングスタイルシート）という
レイアウト言語によって出来上がっています。
ミンカラのページも、すべてCSSに記述されている値によって
文字のカラーや画像表示エリアの寸法の設定がされております♪

自分のサイトなら自由に値を弄ってカスタマイズできますが、SNS系のサイトなどは、デザイン調整の制限を行ってオリジナルデザインが出来ないようになっているわけです。


さて



ヘッド画像の寸法はこんな風に調べます！

１．ブラウザを起動する♪

GoogleChromeを起動してください。



２．自分のトップページにアクセス

ミンカラのご自身のトップページ（一般公開ページ）にアクセスします。♪
今回はあたくしのページを例に進めますね～




３．デベロッパーツールを起動する

ここでキーボードに注目！
「F12キー」を押してみましょう。
すると、ページの下になにやらコードだらけの画面が現れます。
出ましたか～？(*￣ー￣)ｖ
この画面を「デベロッパーツール」と言います。♪

ちなみに「F12キー」は表示非表示に対応しています♪







４．HTMLとCSSに注目♪

緑の枠でくくった部分を見ると<html>とか<body>とか<div～>.とか<>でくくられた文字が並んでいますがコレがHTML言語です。

HTML言語は、文字や画像に大見出し、段落、リンクなどを意味付けするものです。♪

右側の青枠の命令文はCSSとうものです。
HTMLで意味付けした文章にスタイルやレイアウトを施しブログページを美しく表現するための言語です♪




５．調べる方法

では、どう調べるかを説明しますね～♪


まず、左側（HTML)画面のHTMLコードから次の行を見つけ出します。


<div id="MinkaraBody">・・・</div>

この行頭に三角形の開閉ボタンがついていますので、クリックして下向きにしますと、隠れて入れ子になったHTMLが表示されます。



次は下記のコードを見つけて三角形の開閉ボタンをクリックします。

<div id="BodyBlock">・・・</div>

上記コードを展開すると、下記のコードがみつかります。


<div id="BodyBlockHeader">・・・</div>

上記コードがメイン画像を格納しているHTMLなので、このコード上をクリックして選択します！下記の写真のようにクリックして選択すると青くハイライト表示されます！
下記の図を参考にしましょう！





この状態で、今度はデベロッパーツーの右側画面に注目しましょう！
下図参照♪

メイン画像のデザインをコントロールしているCSSが表示されました。！



なにやら命令文がわかりにくいと思いますが
widthとheightの行に今回の目的の数値が書かれています。
(私のページの値ですが♪）

width  すなわち、ミンカラのメイン画像の幅は
930px

height　高さは
290px

という結果でした。




という事は、Gimpで写真をミンカラサイズに編集するには

幅が　　930px
高さガ　290px

のメイン画像に仕上げれば良いという事になります。


実は、メイン画像の高さについては、皆さんの管理画面の「スタイルシート」の設定で若干値の変更を許可しています。
ただし最大値が290pxなんですよね。。

ミンカラさん！もうちょっと高さを多めに設定可能にしていただけないでしょうかね～笑






■スタイルシートの編集画面は・・

次はその「スタイルシート」の変更と作成したオリジナル画像のアップ（参照）ボタンの場所をご紹介しますね～♪

１．まずご自身のミンカラ管理ページにログインします。
ログインしたら、左のサイドバーにある「スタイルシート」メニューをクリックします。




２．スタイルシートページに切り替わったらページ上段の「簡易設定」をクリックします。

表示されたページには、ページの背景カラーやリンクされた文字に関するカラー設定が出来ます。

ちなみに#FFFFFFや#0000ffのように記述されているのは、16進数で表現されたカラーの値です。

先頭に6桁の数値はモニターのカラーであるRGB(レッド、グリーン、ブルー）の値を次のように表現します。

RRGGBB

背景カラーに対して同じような明るさ表現すると判読性が悪くなりますね～♪
こんなサイトがありますよ～
値をコピペしてみてはいかがですか～( ´艸`)ﾑﾌﾟﾌﾟ


カラーチャート



さて♪
赤の太い境界線で囲んだ箇所が
今回の目的である、ヘッダー画像エリアの
高さ調整と画像の参照ボタンです。

高さの最大値は290pxと
ここで決められていたんですねぇ♪

930pxに対して黄金比１：１．６とした場合
高さが580pxとなるので(^▽^;)流石に無理かな。。
せめて２；１の比率で465pxくらいまで拡張してほしいな～
(*`艸´)ｳｼｼｼ






Section４ Gimpのインストール


■ダウンロードサイトにアクセスする

いよいよアプリの入手です！

まず、「GIMP for Windows v2.8.14」を下記のサイト
「窓の杜」からDwonloadしてください。

「窓の杜　Gimp」
http://www.forest.impress.co.jp/library/software/gimp/


下記のページが表示されたら赤丸部分のボタンをクリックします。




下記の画面に切り替わりますので、そのまま数秒待っていると、アプリのインストーラのダウンロードが勝手に始まります♪
赤丸のウィンドウが出たら「ファイルを保存」をクリックします。




赤丸のようなダウンローダがデスクトップまたは「マイドキュメント」内の「ダウンロード」フォルダー等にあると思いますので見つけ出しダブルクリックします。

パソコンによっては、私の画面のようにセキュリティーの警告が出ますので、そのまま「実行」をクリックします。




下記の画面が現れたら、「OK」をクリックします。
l※ドロップダウンメニューには「English」が選択されていますが無視してください。
勝手に日本語してくれます(^○^)



下記の青い画面が表示されたら「Install」をクリックします。



インストールが始まります・・
インストールは30秒程度で終了します。




完了したら「スタートメニュー:」をクリックし、アプリケーションの項目から
「GIMP2」がインストールされている事を確認してください。

クリックして起動してみましょう！！





起動中の画面です♪






起動できましたか～！＼(＾▽＾)／

左がツール、いわゆる編集道具です。
中央がドキュメントウィンドウです。作業場ですね♪
右が設定パネルです。レイヤーパネルは、デザインの重なりを管理するパネルです。レイヤーパネルはデザイン制作上、重なりを管理するため重要。
今






６．写真の画像解像度を調べる

使用する画像の寸法(解像度）を知る事はとても大切です。

＼(＾▽＾)／いよいよ写真を開いて見ましょう！

「ファイル」メニューから「開く」を選択します。






デスクトップを参照し、ご自身が準備した写真を開きましょう。






画像が表示されました♪




画像解像度を調べるには「画像メニュー」の「画像の拡大・縮小」を選択します。




設定ウィンドウが表示されました。
キャンバスサイズの数値がこの画像のサイズです。
ホームページやブログで使用するには、大きすぎなことが分かります。


ちなみに水平解像度と垂直解像度というのは、1インチ(2,54cm)内に72ドット詰まっている緻密さと言う意味です。
ホームページで使用する画像解像度は、通常72ピクセル/inchです。

高解像度印刷の画像を作る場合は、300ピクセル/inch程度必要です。





次の工程では、3200ｐxの画像をヘッダ画像の寸法である930px ×290pxに変更する方法書きますね～♪


いったん休憩タイムに入りまーす(*´pq`*)ﾑﾌｯ

お気持ちお察し致しますm(_ _)m
うちの息子もロードをやられました。。
未だに怒りが収まりません(♯｀∧´)
一刻も早くスープラがお手元に戻って来られますように！！
この記事は、盗難されましたについて書いています。

この記事は、【拡散希望】ローズヘッドさんのスープラが盗難にあいました。拡散希望について書いています。