FWでスライスが書き出せない

FWで選択したスライスだけを書き出したい。

Webレイヤーを選択しファイル>書き出し で書き出しのパネルをだし、選択したスライスだけを選択し保存。
これで書き出せるはずだが何度やってもかきだした画像がない。保存を押しているのだが画像は書き出せていない。

解決法を探してみると、ページをすべてのページだと書き出せないという情報を得た。
そこで現在のページに変更したが状況は変わらなかった。

そこでいろいろ試し、選択中のwebレイヤーを重ね順の一番上にしたところ、書き出すことができた。
なぜ成功したのかわからないがもし同じ症状に陥った際は試してみたほしい。

Aiでスライスする

サイトカンプをAiで作成しスライスする場合、
オブジェクトを選択しメニューバーのオブジェクト>スライス>選択範囲から作成でスライスし、
オブジェクト>スライス>スライスオプションでスライスオプションパネルを出しスライスの名前を設定します。

サイトカンプだと多くのスライスを作成しますが、ショートカットキーがないため、いちいちメニューバーから上記の行動をとらなくてはなりません。
かなり面倒で時間がかかってしまいますのでショートカット登録します。

ショートカット登録の仕方

1.メニューバーより編集>キーボードショートカットを選択。
まずは保存し、カスタマイズしていきます。
上から2番目のツールをメニューコマンドに変え、オブジェクトの中にある選択範囲から作成とスライスオプションを好きなショートカットキーで登録します。
この時すでに初期設定で登録しているものにしてしまうと書きかわってしまうので気を付けてください。

絶対使わないショートカットもしくは使われていないもので覚えやすいものを設定しましょう。私は選択範囲から作成をCtrl+w、スライスオプションをCtrl+Shift+wにしました。

オブジェクトの位置

オブジェクトの位置とは選択しているオブジェクトをレイヤーでパネルでハイライト表示する機能です。

サイトカンプ等を制作するとレイヤーの数が膨大になり今選択しているオブジェクトがどこかわからなくなることが多くあります。
また違う人が作成したデータを編集する場面では特にどこかわからなく無駄な時間を使ってしまいます。

レイヤーパネルの一番下にある、左から2番目の虫眼鏡アイコンが「オブジェクトの位置」アイコンです。

使い方はとても簡単でオブジェクトを選択し、この「オブジェクトの位置」アイコンをクリックするだけ。
そうすると赤線で囲ったようにハイライト表示しすぐにわかります。

知らないだけでショートカットできるのに無駄な時間を使っていることは多くありそうです。効率的に作業できるように覚えておきたいですね。

行間

行間について。
一般的に行間があいていると大人っぽく高級感があります。

しかし文字量が多くページがあまり長くなりすぎてもいけないと考えたとき、文字のサイズを小さく、小さくできないときは行間、字間を詰めることがあります。
今日は収めるためについつい狭くしてしまい、読みづらいデザインをつくってしまいました。

そんな時、目安として「文字の大きさの135%以下にはしない」と教わりました。

実際にやってみると確かに135%以下だと読みづらいですね。

しっかり学んでUIに優れたデザインを作成します。

Webpとは

WebP(ウェッピー)は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。
2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。ただし、競合各社の思惑もあってブラウザでの採用が進んでいないため、ウエブサイトでも採用が進んでいない。
(Wikipediaより引用)

つまりgoogleが作ったwebサイトのための拡張子でJPEGの代わりにPNGよりも軽く透明化をもってるデータ。
プラグインを入れればPsから書き出せるそうですがWebPをAiではそのまま使えないです。

一番簡単な方法はhttps://convertio.co/ja/ファイルコンバーター。オンラインでjpg 、png等に変換していつも通り扱うことです。

今はまだあまり見ませんがこれから普及するかもしれませんね。

マジカルナンバー7±2

マジカルナンバー7±2とは心理学で人間が覚えられるのは7つまでという法則のことです。

プラスマイナス2まで差はあるが、平均で7個までしか覚えられない。

つまりwebページをつくる際グローバルナビやサブメニュー等に7個以上続けると認識してくれなくなるので、減らすか区切りをつけないといけません。
言われてみるとwebページを見ていても7個以上のグローバルナビはあまり見かけませんね。グローバルナビに関しては多くても6個まででないとUIが悪いようです。

試しに7項目あるグローバルナビを作ってみましたが違和感があり、文字が全然入ってこないです。

webを作成する際はマーケティングや心理学の知識に基づき作成しなければならないですね。

Aiでシェイプの線が内側にできない

Webページ作成するときにシェイプは非常によく使いますが、線は内側に設定しないといけません。
初期設定だと線は真ん中になっています。このままだと任意の大きさに作成しても線の太さ分大きくなりデザインが崩壊してしまいます。
なのでいつも内側にしていますがあるとき線の位置を設定できないシェイプがありました。

何をしても選択できないのですが、原因はフォトショップデータをイラレ上で開いたものだったからでした。
フォトショップデータをイラレ上で何とか編集できるデータを保ち開けるときがあってもやはりうまく編集できないデータになっていることも多いです。

新たにイラレでシェイプを作成するのが一番早い解決法です。違うデータのものを開いたりコピーするときは気を付けましょう。

お座敷体験

とりよねさんhttp://www.toriyone.com/
で毎年開催されているお座敷体験に行ってきました。


おいしい懐石料理をいただき、舞妓さん芸子さんの舞が始まります。
しなやかで女性らしい動きでとくに袂で口を覆う仕草には何とも言えない奥ゆかしさを感じます。1つ1つの動きが絵になりまるで日本画を眺めているようでした。

舞が終わると、テーブルに訪れお話ができます。その時に着物について尋ねると夏と秋の間なのでその間に咲く花の柄だったり、季節感を大事にしているとおっしゃってました。

舞妓さん。帯留めが鳥で一番良いものをつけさせていただいてると話していただいた。

鮮やかな青と白い肌赤い化粧がとても綺麗でした。
良い体験でした。

ジャンプ率

ジャンプ率とは文字に大きさの差を与えたことです。

Webやチラシなどでよく見ると思います。例えば、特売品の数字を大きく、円や税込などは小さくすることで一番見せたい情報を瞬時に理解させます。

Webページはスクロールさせるのですべての文字を読ませるためではなく読み飛ばしても理解できるようによくジャンプ率を使用します。
ジャンプ率は文字の大きさの差が大きい程ジャンプ率が高いと言い、若者向けで動きがでるが少し安っぽく感じる、差が小さいのを低いと言い、大人っぽく、高級に見えます。

webページのジャンプ率の平均は 【本文】:【中見出し】:【大見出し】 1:1.8:3.5 らしいです。

気持ちよく読めるようにこの平均にのっとりながら考えてみようかと思います。

なびいたリボン

リボンをつくる。

長方形のシェイプの真ん中にポイント追加し、リボンの切り込みをいれる。

1pxのシェイプを2本作りパスファインダーで切り抜く。

効果>ワープ>旗 を選択するとなびく。

簡単にリボンが作成できる。

ここにパス上文字で書けばバナーに使えます。