Shiba's House

憧れの透過済みロゴ。

最終更新日:05/23/2024 (クラシック→ブロックへ変換)

Adobe CCにフルセット課金(=サブスクリプション)を始めたのが、ちょうど50の誕生日の頃。
昨年度、一番マメに使ったAdobeアプリは、Acrobat DCだった。
PDFを作ろう・・・て思い立ったことがあったから、仕事や学業と趣味系の両方で。
コレ作ったりとかして、ね

閉鎖済みブログ(閉鎖直前にコンテンツを電子書籍化モードでダウンロード)の1ページ

Creative Cloudなので、当然PhotoshopやIllustrator、動画編集系なども「インターネットにつながっていれば」の条件付きでフル機能を使える。
3000円超え/月払ってるので、「損してる」って思わずに済むくらいに使い倒したい。

—で、昨年度から細々とPhotoshopの練習を始めて、今回やっと、16年来ずっと夢見てきたけど失敗してたことが、初めて成功した★

透過済みロゴ

ブログの外観変えた時、どんな背景色にでも周囲がなじむ、アレ。※現在適用中

初チャレンジは、「リヴリーアイランド」のキャラクターのスクショを撮って、それの周囲を丸く加工してみたブツ。
おそらく、東日本大震災より前。

白背景なら問題ないんだけど、背景が白以外だと残念なことになる・・・
「透過」とは「背景色が透明」ということは当時から理解してたけど、どうすればイラスト系Web装飾物の背景を透明にできるのかは、わからなかった。
Photoshopぽいもので画像編集すればよいと後で学んだが、当時は専業主婦だったんでとても「Photoshop欲しいです」なんて言えなかった。
それで、無料ツールでできる範囲のことをやっていた。
Windows XPを使ってる頃は、JTrim、Windows Vista以降は PhotoScapeを愛用した。(PhotoScapeは今でも使ってる)

しば
しば

Photoscape(無印)は、Windows 11になってから、いつしかセキュリティ的問題で開けなくなってしまったよ

そして今年、満を持してPhotoshopで「背景色を透明にする」に挑戦!
いざ、Photoshopで新規作成!

(1) 背景となるキャンバスの設定を変える

「新規作成」クリックすると、こんなのが出る。
これが「キャンバス(絵等を描く場所)」で、初期値では透過なし(不透明度100%)の白。
初期値でないようにするために、鍵マークをクリック。

不透明度を0%にしたところ。
「背景」でなくて、「レイヤー(透明付箋のようなもの)0(Photoshopではゼロが1枚目)」の表記に変わる。

(2) 文字入れ

絶対に文字化けしないWebサイトのタイトルを作りたいならば、キャンバスの中に「文字挿入」を使って文字入れする。
※ここで打ち込んだ文字は、画像扱いになる
入力が終わったら、右端の[ T ] と書いてあるパーツ(=文字レイヤー)をクリックして、打った文字が出たらば成功。

(3) アイコン画像などを入れて、保存する

しば
しば

スクショでは「土台(ロゴのベース部分)画像パーツ」無しでサンプルを作ってるけど、土台があるほうがロゴ画像の寸法を決めやすいかなぁ。

※個人の感想です

(文字なしのロゴを作るならば、(2)を飛ばしてこの作業をする。スクリーンショット上の(1)から(6)の工程)

イラスト等を入れる時は、「挿入」⇒「画像」でなくて、「ファイル」⇒「埋め込みを配置」の順にクリックするところが、MS Officeやペイントと違うところ。
画像がキャンバスに表示された後の操作は、ペイントなどとほぼ同じ。
ちなみにPhotoshopに「保存」しても、エクスプローラ(=画像フォルダ)に絵が映らないので、ブログのストレージにUPすることはできない。
ブログにUPできるようにする工程が、次 ☟

(4) いろんな端末で読み出せるファイル形式に変える

【超重要】Photoshopで保存した画像は、そのままではブログやSNSなどにUPできない。(=Photoshopでしか開けない)

仕上げは、スクリーンショット4枚目の(7)の工程。
Photoshopだけで開ける画像を、どんな端末ででも開けるように加工する(「書き出し」)。

ちなみに、PCとスマホの両方で確実に開ける画像の拡張子(データの種類)は、JPG(ジェイペグ)とPNG(ピング)

画像左がJPG(ジェイペグ)で、右がPNG(ピング)。
原寸よりも大きく映るように拡大すると、何となくぼやけたり、輪郭がギザギザになる。

短く言うと、

(a) どんな背景色にもなじむ絵を作りたければ、PNGで書き出す

(b) SNSに上げた時に確実に元画と同じように映ってほしければ、JPGで書き出す

画像なんてどれも一緒・・・に見えるけれど、実は拡張子が違う。
特に、PNGは周りの色を透明、不透明(白)どちらにしてもOKだけど、JPGは周りの色は不透明にしかできない点に要注意。
PNG画像をJPGに変えたい時は、Windowsの場合は単にペイントに貼り付けた後で拡張子を.jpgに変えて保存すればよいよ。
(PhotoshopでJPG書き出しすることもできるが、Photoshop CC 2019ではワンクリックでできない)
JPGとPNGは、それぞれ一長一短あるんで、どこに画像を使うかに応じて、より好みの見た目になるような拡張子で保存しよう。

しば
しば

ロゴやアイコンに使える画像拡張子は他にSVGやAIなど(ベクター画像/ベクトル画像:原寸を超えて拡大してもぼやけたり輪郭線がモザイク化しない)があるけど、今回は割愛

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA