PSD・AIからHTMLへの書き出し

コーディングに必要なこと

– 画像のスライス（書き出し方法）
– 要素の幅・高さを取得する
– 要素間の余白を取得する
– フォント情報の取得

デザインデータから情報を取得してコーディングする。
言うが易しって感じもするが。。

[Photoshop] ヘックスコード

ヘックコードという
#000000
Red,Green,Blue
2桁ずつ16進数で使っている。
Fが一番大きい
00FF00は100%のグリーン

カラーホイール

ベースカラーを決めてから、
モノクロマティック、トライアド、捕色、分割補色、二重分割補色、正方形、コンパウンド、シェード、カスタムなど色の関係性で選べる。
-> 統一感のある配色を選択できる。

Photoshopからも使える
ウィンドウ->エクステンション->カラー

色の変え方
編集->塗りつぶし->描画色

シェイプの場合は、レイヤーパネルからダブルクリック
文字レイヤーの場合もレイヤーパネル

[Laravel8.x] エラーメッセージをモーダルで表示させたい

エラーメッセージをtextでも良いが、どちらかと言うとモーダルで表示させたい。

まず単純なフォームを作ります。

<body>
	@if(Session::has('flashmessage'))
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      {{ session('flashmessage') }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
	@endif
	<form action="/admin/test/form/confirm" method="post">
		@csrf
	<p>
	名前：<input type="text" name="name" size="40">
	</p>
	<input type="submit" value="送信">
	</form>

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    // モーダルウィンドウ
    $(window).on('load',function(){
        $('#exampleModal').modal('show');
    });
</script>

controller

    public function testFormConfirm(Request $request){
        if($request->has('name') & $request->name !== NULL){
            session()->flash('flashmessage',$request->name. 'さん、登録完了');
        } else {
            session()->flash('flashmessage','エラー: 名前を入力してください');
        }

        return redirect('/admin/test/form');
    }

エラーのメッセージではなく、session flashで送るのか。なるほどね。

### 1冊やっておいても損はない本

[Photoshop] スウォッチ

Webデザインでは、RGBではなくWEBスウォッチを使うことが多いとの事。
HEXコードで登録する

レイヤーはWebデザインで一番良く使う機能。
シェイプツールの編集にパスを良く使用する。

なるほど、ちょっと色々考えることが多くなってきたな。

PSDファイルからHTMLにする流れ

PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。

1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する

なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。

ピクセルディメンションと解像度

– ピクセルディメンションとは、縦横のピクセルサイズの事
– 解像度はdpi(dot per inch)で表す
– 一インチの中に幾つのドットを表示できるのかを表している

デバイスのインチ、画像サイズが同じでも、解像度が異なると、表示内容が異なる。

なるほど、デバイスの解像度を考えながら作っていくのね。

[Photoshop] グラデーションのかけ方

まず、新規のドキュメントを作成します。

グラデーションツールを選択する。

ドラッグするだけで、黒から白へのグラデーションが作られる。

円形のグラデーションも作成可

色も変えられる。

文字へのグラデーション

グラデーションオーバーレイ

色をつける

グラデーションかけるだけでプロっぽく見えますね。不思議や。

[CSS] 画像の上に文字を乗せる方法

ボタン画像の上に文字を乗せて表示したい。
-> 画像の上に文字を乗せる方法を理解する。

<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div>

position: relativeとする。

<style>
    	.sample {
    		position: relative;
    	}
    	.sample p {
    		position: absolute;
    		color: red;
    		top: 5px;
    		left: 5px;
    	}
    </style>

<div class="container">
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET</p>
		</div><br>
		<div class="sample">
			<img src="img/sky.jpg">
			<p>SUNSET2</p>
		</div>
	</div>

画像の上に文字が乗りました。

なるほど、理解した。背景画像とは別に、こういうことができるんやな。

[Photoshop] スライスを理解する

スライスとは、コーディング用に分解して、一つ一つの画像にしていく。
まず、Photoshopで画像を用意する。

続いて、切り抜きツールからスライスツールを選択

ファイル -> 書き出し -> Web用に保存

保存

分割された画像が書き出される。
ほう、こういう事か。。ちょっと視界が拓けてきたかな。

1.ボタン画像の上に文字を乗せる方法を確かめたい。
2.PSDファイルをHTMLにする流れを確認したい。

PSDのレイヤーが異なるものは、レイヤーごとに画像書き出ししてるんかな。