Webサイトを作るときに画像を編集する必要が出てくる。gimpでやった事はここにまとめる。
インストールは以下で行った。
https://shirakawa.weblike.jp/blog-page/2022/09/25…
gimpはほぼ、HTML/CSSの練習 https://shirakawa.weblike.jp/blog-page/2022/09/28… で使う。

後の方でメモしているが、自分のサイトを作るのにGimpは使えるが、Web制作案件では使えないし、
コーダーとしての使い方はデザイナーのとは違う。そのため、Gimpは(なんちゃって)デザイナー
としての使い方をメモし、Ps,Ai,XD,Figは、コーダーとしての使い方をメモっていく。(2023.02)

/* PC上の画像を撮る */
gimp スクリーンショット、でググった：
https://gazocustomize.com/gimp-screenshot/
(Psの定規はGimpのルーラー)
jpgファイル(1366*768)を１回目画像のGimpファイル(1279*799)に合わせて変更する時に、メニューの
画像の拡大・縮小を使った。カンバスサイズも同時に変わった。Psでは画像解像度(X,Yは付いてない)。

/* cygwinのマークの右側に文字(Cygwin(Old))を付ける */
画像の背景を右に広げてそこに「Cygwin(Old)」を書くかな。
gimp 画像の背景を広げる、でググった：
https://gazocustomize.com/gimp-background-extend/
アルファチャンネルを追加、キャンバスサイズを変更、元スペースを選択、右クリック色、着色(画像から色を拾う)、レイアー固定する。
採ってきたロゴ(130*130px)を520*130pxになるようにキャンバスサイズを変更した。
https://okwave.jp/qa/q9031047.html
レイヤー>新しいレイヤーを追加、カラーを背景色、レイヤー順番入替え、レイヤー>下のレイヤーと統合。
テキストの入力は、ツール>テキスト、でまあまあいけた。ツールボックスにもある。

/* cygwinとslackwareを斜めに切って(トリミングして)１つの画像にしたい */
gimp 斜め 切り取り、でググった：
https://ameniji.com/2021/02/13/gimp-naname/
画像を開く、アルファチャンネルの追加、自由選択、クリックで支点作成し画像を囲んでDlete、
gimp ２つの画像を合成、でググった：
https://howpon.com/1805#2

/* 「Life With Unix」を縦にして左端に入れる */
描画色の設定 https://gazocustomize.com/gimp-foreground-backgrou…
「Life With Unix」のピンク背景を作ろうとしたが、https://okwave.jp/qa/q9031047.html
の通りにはならず(描画色で塗りつぶせなかった、レイアー一覧の方はピンクになっていた)
、先にピンクレイアーを作って「Life With Unix」をレイアーとして開き、統合した。
回転は、https://gazocustomize.com/gimp-image-text-rotation/ をやって、レイアー
を固定した後にスナップショットをとった。

/* １つの画像を横に３つ並べる */
gimp 画像を並べる、でググった：
https://gazocustomize.com/gimp-image-connect/#21
https://gazocustomize.com/gimp-movement-tool-howtouse/

/* SnippingToolの代わりに使う */
gimp クリップボードへ保存、でググった：
https://gimp-howtouse.net/gimp%E3%83%A1%E3%83%8B%E…

/* コントラストを確認する */ (2022.11)
gimp グレースケール、でググった：
https://howpon.com/8327

/* XDファイルをgimpで見る */ (2022.12)
Adobe XDファイル gimpで、でググった：
(ざっくりと調べたが、XDファイルをgimpで見るには一旦PSDファイルに変換するしかなさそうだ)
XDのデータをPSDに変換する方法
https://homupedia.com/xd-to-psd.html
https://t-dilemma.info/change-xd-psd/
(ダメだこりゃ。最低でもAdobeXDは動かさないと変換できない。core i5 2520m 以降でないとAdobeXD
は動かない。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/AdobeXD%a4%f2Win10/%b3%ca%b0%c2NotePC%a4%cbinatall%a4%b7%a4%e8%a4%a6%a4%c8%a4%b7%a4%bf%a4%ac%a5%c0%a5%e1%a4%c0%a4%c3%a4%bf
PC引っ越した。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/%a4%c8%a4%ea%a4%a2%a4%a8%a4%ba%a1%a2%c3%e6%b8%c5%a4%ce%b0%c2%a4%a4NotePC%28PC/AT%b8%df%b4%b9%29%a4%f2%c7%e3%a4%c3%a4%bf )
「Adobe XD」単体販売を終了、サポート継続へ Figma とのすみ分けは「何も決まっていない」
https://stocker.jp/diary/adobe-xd-2023/
AdobeXDのWinへのインストールやめた。
XDファイル読みはクラウド版Figma https://www.figma.com/ja/ を使う。BackUp代わりにFigmaの
デスクトップ版をWinへインストールした。
がしかし、FigmaをググるとここでもAdobeXDがないとXDは読み込めない。直接インポートはできない
らしい。実際できなかった。有料の変換サイトは練習では使わない。https://www.materialpot.com/other/xd2sketch_figma/
やっぱAdobeXDをWinへインストールするしかないか。クラウド版も無いからSlackで見れないけど。
FigmaってPSD出力できないのか。少なくとも、
XDファイル(AdobeXD起動)->(手動でコピペ)->Figmaをやれば、以降の作業はSlack上でもできるか。
\
GIMP – PhotoshopのPSD形式のファイルを開いて編集・保存する方法
https://howpon.com/8277 (編集しなければ画像劣化しないんじゃないか?、サイズデータとか余白
サイズ見るだけとか。実は上の方のリンクでXDはビジネスでのWeb制作にあまり浸透してないという
話もあるが、XDもPSDも両方見れないと機会損失)
https://citrus-designs.com/photoshop-gimp-difference/ (性能はやっぱりphotoshop)
illustrator gimp aiファイル、でググった：
gimpでaiファイルを開く
https://www.nextdoorwith.info/wp/other/open-adobe-illustrator-ai-file-by-gimp/ (こっちかAIデータ)

/* GimpではWeb制作案件を受注できない */ (2023.01)
Web制作 コーダー Photoshop操作する？、でググった：
Adobeソフトを購入しなければWeb制作案件が受注できない理由
https://doggy-kbk12.com/why-adobe/
(こりゃあ、払うしかないのかあ?、Adobe税。デザイナーがオープンなツールを使えば全てのサイズ
情報もオープンになるが、クローズドなツールを使ってるもんだから、クローズドなツールでしか
正確に情報を読み出せない、ってか?)
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13259790313
https://shogo-log.com/answer-02/
https://ichikawa-webdesign.com/archives/4804
(XDもFigmaも無料コースがあるからこっちを使ってほしいね)
Figmaへの変換（これが現実解） 2026.02
https://shirakawa.weblike.jp/blog-page/2026/02/05…
\
XD関係はこっちにまとめる。
https://shirakawa.weblike.jp/blog-page/2023/04/04…
Photoshop関係はこっちにまとめる。(2023.06)
https://shirakawa.weblike.jp/blog-page/2023/06/24…
GIMPのテーマをPhotoGIMPにした。(2023.07)
https://shirakawa.weblike.jp/blog-page/2023/07/11…
無料デザインツールCanvaとは？できることを解説 (2024.01)
https://saruwakakun.com/design/canva/whats
CanvaとPhotoshopの違いは？機能と価格を比較してみた (2023.01)
https://nananavi.org/canva_photoshop_difference/
Photoshiop AdobeDX Figma Canva (2025.03)
https://shirakawa.weblike.jp/blog-page/2025/03/04…

/* 背景画像の上に画像やテキストを重ねる */ (2023.02-2023.04)
これまでは、絵を一つ一つ用意してHTML,CSSで重ねたり並べたりしてブラウザで表示してきたが、
Gimpで絵を重ねてPSD出力し、XDで読み込んでデザインカンプを作る。XDからFigへ手動変換し、
Figクラウド/Slackでデータを採ってHTML,CSS化。一応、XDとFigのデータ合ってるか確認はするか。
\
ロゴやテキストをレイヤーとして開いて、定位置へ置く：
Firefoxのインスペクターで <img class=”logo” をつまむと、.logo { width: 210px; margin-top: 14px; }、
img.logo | 210 x 52.5 とくる。div#home.big-bg | 1258 x 449.4 とくる。header.page-header.wrapper
| 1100 x 81.2 とくるので、logoを 158/2 x 14px に置く。インスペクターを画面分割すると測り易い。
jpegやfontの位置を測る。なんだか製図って感じになってきた。drawioが0.1単位できれば尚よいのだが。
製図の方針：
jpegやfontの領域は実線、その他は点線で描く。
CSSに数値が入っている領域を先に描く。width,margin,padding,等はその後から重ねて描く。
サイズも記入する。1266×660とか、XかYのみとか。継承されている場合は数値を省略する。
とりあえずbodyのサイズが1266×660になるように画面を固定して測ってみる。
CSSに実数が無い場合(auto,%,等)は1266vx660vとでも書くか。
header.page-header.wrapperの高さ(81.2)がどこから来てるのか分からない。フレックスコンテナーの
仕様らしい。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。
line-height: 1.7;があやしい。がよく分からん。
https://udemy.benesse.co.jp/design/web-design/line-height.html https://and-ha.com/coding/line-height/
試しにChatGPTに聞いてみた。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS%20%b0%cc%c3%d6%a1%a2%a5%b5%a5%a4%a5%ba%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
\
gimp 画像の位置を変える、gimp テキスト 色変更、gimp テキスト ページの中央、gimp 長さを測る、
でググった：
https://howpon.com/5560#i-3 https://howpon.com/3179#i https://howpon.com/3852#1 https://gazocustomize.com/gimp-ruler-tool-howtouse/
GIMPでは、レイヤーを指定した座標に直接移動する機能がありません。(マジか)
ただし、ガイド機能を使うことで指定のピクセル数の座標にレイヤーを移動することができます。
まずはホーム画面のimgやfontの位置をdrawioで図示できたので、先にGimpで描いてみる。(2023.04)
\
Gimpで描いてPSD出力してXDで読むとテキストも画像になってしまう。しょうがないからXDでテキ
ストだけ描くか?。全部をXDで描いた方が早いか?。swap食ってしまうが。FirefoxとCygwinとXDしか
起動してないのにHDDあったかい。物理メモリまだ3GBあるのにswapを食っている。
Win10$ free
\ total used free shared buff/cache available
Mem: 8265856 4984564 3281292 0 0 3281292
Swap: 1310720 95276 1215444
\
SDをswapにしようとしたがダメだったので、swapを0にした。その後、システムと作業データをSSDと
SDに分けた。(2023.06)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Win10%a4%c7SD%a5%ab%a1%bc%a5%c9%a4%f2swap%a4%cb%a4%c7%a4%ad%a4%ca%a4%ab%a4%c3%a4%bf

/* gimp 楕円に沿って文字を拡大縮小 */ (2024.03)
楕円の中に文字があるロゴマークが欲しくなり、ググってみた。が後回し。

/* pdfファイルの画像に楕円を書き入れたい。 gimp 丸い線 */ (2024.06)
https://gimp-easy.net/circle-how/ ③輪郭線のみの円

参考URL：
Gimpの使い方サイト：
https://design.atompro.net/htm_gimp.html
https://createkidslab.com/%E3%82%B5%E3%82%A4%E3%83…
https://gimp-howtouse.net/%E3%82%B5%E3%82%A4%E3%83…

無料素材、でググったり書籍見たり：
商用利用もOK！無料（フリー）写真人物素材のまとめ7選【2022年版】
https://gazocustomize.com/free-person-photo-selection/
ぱくたそ
GIRLY DROP（ガーリードロップ）
無料写真素材　写真AC (小さい無料以外は画像のDLは１日１回だけ) 2023.09
ビジトリーフォト
モデル・フォト
APhoto（アフォト）
pro.foto
【フリー素材】海外のフリー写真素材サイト「StockSnap.io」
https://design.webclips.jp/free-photo-stocksnap/
Pixabay（ピクサベイ）の使い方と注意点について
https://keywordfinder.jp/blog/seo/pixabay/
O-DAN
https://o-dan.net/ja/
UnSplash
https://unsplash.com/ja/
\
イラストAC
https://www.ac-illust.com/
いらすとや
https://www.irasutoya.com/
\
icooon-mono
https://icooon-mono.com/
FLAT ICON DESIGN
https://flat-icon-design.com/
\
Font Awesome
https://fontawesome.com/
Font Awesome 使い方
https://tech-blog.rakus.co.jp/entry/20220127/fontawesome