+1 レコードジャケット制作徒然-1

閃いてレッツゴー ワクワクの始まり。

2022.08.29-22.09.12

ayacolletteが新しいアルバムを作りたいという話は前からしていて、今回は全曲誰かと一緒にやるという形。昔でいうオムニバス、今でいうコンピ?コンピレーション?

2022年の8月29日に全曲デュオアルバム、現場監督をテニスコーツの植野君がやってくれるという連絡が。とにかくワクワクしているayacolletteの文面。この時点ではアヤコレット+one

そして最初に作ったダミージャケット
こりゃ本気でダミーだな、何も合ってない。余白も何もあったもんじゃないな〜雰囲気のみ。それにこういう凝ったフォント使ったことあまりないけど意外と面白いなと。

ギャラリーラファイエットの屋上を歩く子どもとオペラガルニエ
全く意味がない。単純にフランス寄りのものを作ろうというだけの話。でもなんかないと進められないからとりあえずね。しかも謎の黄色。最初にayacolletteが練習していたのがLes yeux noireだった。

ちなみに元の写真はカラー

illustratorで線路を書く

今日は授業で線路の書き方が話題になったので、懐かしく。
もう15年以上前にきっと授業でやっていた方法だけど調べてもやっぱりこれでいいのよね〜
あまりに昔のtipsで即答できなかったのでこちらに。なんかワクワクするのよね〜グラフィック!

JRの線路

線を1本引きます。

アピアランスパネルにて
6ptの太さを設定

アピアランスパネルのプラスのボタンを押して4ptの線にする。
色は白!

上の白の線の破線のチェックを入れて線分15 間隔15に今回はしました。

これをグラフィックスタイルのパネルにドラックすれば使い回しOK!

私鉄の線

線を1本引きます。

アピアランスパネルにて2ptの太さを設定

アピアランスパネルのプラスのボタンを押して7ptの線にする。

上の7ptの方を破線にチェックを入れて線分2 間隔15にすれば出来上がり

保護中: web font

このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。

webフォントの検証

自分ではgoogle の web fontを使っているつもりでも実際は別のフォントになってしまうことがあります。

googleのweb fontsを使うために必要なこと

(例えばNoto Serif Japanese のweight200 と400を使う場合)


1.selectのところのプラスのマークをクリック


2.「1」のボタンをクリックすると右側にSelected famiilesというパネルが開かれるのでそこの「2」のコードをコピペ

今回は以下のようになっています。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&display=swap" rel="stylesheet">

3.このコードを<head></head>内に書きます。(コードの内容は選んだfontによって違います。)

4.cssに使いたいCSS rules to specify families内のソースを記述
ここの場合

font-family: 'Noto Serif JP', serif;

googleのweb fontが適用されているかの確認


chromeの検証ツールを立ち上げて「計算済み」をクリック

上記のようにローカルファイルとなっていたら自分のパソコンのフォントを見に行ってるのでwebフォントは適用されていない。

上記のようにネットワークリソースになっていたらOKよ!

figmaデータをphotoshopで作業するには

figmaデータをphotoshopで作業するには

素材はいつもAYACOLLETTEで!

figmaで「ファイル」→「ローカルコピーの保存」で自分のPCに保存

photopeaサイトで開く

https://www.photopea.com/

あらあらフォントが変わってしまった。

でも気にせず・・・・
ファイル→PSDとして保存

ここは画面収録じゃないので説明難しいけど
最初はフォント変わっていますが文字のところをクリックすると本来のフォントに変わります!

途中わかるまで時間がかかったのは
Photopea上でスマートフィルターをかけたファイルはphotoshopでは以下のエラーがでてひらけませんでした。

レイヤーに分かれた状態でpsdに持ってこれて便利なような。。。
最初からphotoshopで作ってしまいそうだからこの作業の需要がどこにあるかはちょっと謎・・・

実機iPhoneでデバッグできる!

safariのWebインスペクタ機能で実機のデバッグ!

iPhone側の設定

設定→Safari→詳細→Webインスペクタにチェック

iPhoneとPCをケーブルで接続

Iphoneのsafariで検証したいサイトを開いておく

PC側のsafariの設定

環境設定→詳細タブ→「メニューバーに”開発”メニューを表示」にチェック

safariのメニューバーに「開発」メニューが表示される

開発→Webインスペクタを表示(Optopm+Command+I)

Safariの操作

開発→接続したiPhoneの名前→検証したいサイトを選択

iPhoneで表示されているサイトをPCで検証できます!

目指せジャケ買い

夕飯前の私のグダグタ時間。これが好きなんだな〜
で、ふと思い出した。

私の昔の習慣。
きっと娘含む。。。わかめの方には理解できるかわからないけど
給料日はジャケ買い

お金なかったから冒険して音源買うなんてできなかったけどお給料日は1枚だけ新宿のvirginで大体ジャケ買いをするというのが決まりだった。
まあ当たり外れはもちろんあるけど、外れてもデザインが好きだからしばらく飾ってられた

私は本当に運よく「アヤコレット」のジャケやらフライヤーを作らせてもらってる。好きなアーティストの作品を作れるなんてすごく幸せだと思ってる。

これからも彼女はどんどん音源を出していくと思う。もちろん音源は素敵だけど私はジャケ買いしてもらえたらもう人生で最高の時だな〜


wordpressで私が最初に入れるプラグイン -part2-

Yoast Duplicate Post

投稿記事や固定ページを複製できるので同じようなイベントを作ったりするときに便利!

Intuitive Custom Post Order

ドラッグ&ドロップで投稿、ページ、タクソノミーなどなどを並べ替えられる。

WP Maintenance Mode & Coming Soon

メンテナンスにすることも調整段階であるのでこれ一つでカッコよくメンテナンス中にできちゃう!

wordpressで私が最初に入れるプラグイン -part1-

Show Current Template

どのPHPファイルを使っているかが一目瞭然!もう「あああ」とか当て字を入れて探すことも無くなったわ

SiteGuard WP Plugin

ランダムなひらがなを入力しないとログインできなくなるのでセキュリティを向上させることができる。とはいえこれを入れていても危険な目にあったこともありますがないよりは絶対いい!

All-in-One WP Migration

本気でこれがないときっと私はダメだ〜というくらい頼り切っております。バックアップを簡単に取れる。オプションでエクスポートするものが選べるのも重宝している。すごいデーター量のサイトもあるからイチイチそれ全部ダウンロードしていたらタマッタモンジャナイ!

印刷データの注意点

印刷物を作りたいという生徒さんからの質問があった。

DTP入稿前にチェック

画像の解像度…300-350dpi(大判ポスターやモノクロ印刷の時は異なる)

色のモード…CMYK

文字のアウトラインをとる

塗りたしは3mm

コンテンツがギリギリにしたいデザインならしょうがないけど基本的には内側も3mmはデータを置かない

印刷会社さんによって微妙に違うところがあるのできちんと指示を読むことが大事、わからなければ質問したら丁寧に教えてくれることが多いです。でも繁忙期などは2時間電話が繋がらなかったこともあります〜

これも見開きアルバムジャケットの場合よくあるA4のフライヤーとは印刷指示が違う例。

AYACOLLETTE「Painlessly」見開きアルバムの印刷データの一部。