webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

マイター結合

線幅10ptで鋭角を描く。

角の形状は「マイター結合」

比率は「5」

 このとき「線幅」*「比率」=50という値が重要!

この値がマイター結合の臨界点(値)になる。

マイター長が「線幅」*「比率」の値を超えることはない。

f:id:ohta-felica:20170604224439p:plain

 マイター長が値を超えたときは、ベベル結合になってしまいます。

f:id:ohta-felica:20170604224812p:plain

 上の状態から2つの線の開きを1px狭くすると、下のようになります。

f:id:ohta-felica:20170604224855p:plain

例えば袋文字を作って、、、比率の値、デフォルトでは「4」ですが、

この値を大きくします。

比率の値を大きくするということは、なかなかベベル結合にならない

=どこまでもマイター結合になります、ということ。

f:id:ohta-felica:20170604225901p:plain

 「比率」を12にしてみると尖がった角がいくつかできます。

ふたつのパスが鋭角に交わる箇所でどこまでもマイター結合するためにこのようになってしまいます。

f:id:ohta-felica:20170604230141p:plain

 逆にこのような現象が起こってしまうときは、、、

  1. 結合を「ラウンド結合」あるいは「ベベル結合」にする。この2つの結合には「比率」は関係がない。
  2. 比率の値を小さくして、尖がりが飛び出すより早く「ベベル結合」にしてしまう。

で解決ができます。

illustrator 円を中心から描く

楕円形ツールで円を描くと、外接する正方形の左上の頂点から描くことになる。

円(楕円)を中心から描きたい時は。「alt」ボタンを押したままドラッグすると中心から描くことができる。

 

四角形ツールでも、多角形ツールでも同様。

 

photoshop パスの境界線を描く

ペンツールでパスを描く

f:id:ohta-felica:20170531001711p:plain

 

新規でレイヤーを作る

f:id:ohta-felica:20170531000502p:plain

 

「ブラシ」を選択

f:id:ohta-felica:20170531000652p:plain

 「強さのシュミレート」にチェック。

こうしておくと、ペンタブレット使用時に、プレッシャーを感知してブラシの太さを変えたような表現ができる。

 

f:id:ohta-felica:20170531000738p:plain

 あわせて、ペンのオプションでも「サイズジッター」をオンにしておく。

f:id:ohta-felica:20170531001839p:plain

 

「パス」タブに移動して右クリック。

「パスの境界線を描く」をクリック。

f:id:ohta-felica:20170531000539p:plain

 

 

 

 

photoshop pentool rubberband

photoshop pentoolのオプションを設定する。

上部のオプションから「ラバーバンド」にチェックする。

f:id:ohta-felica:20170530231046p:plain

 

こうしておくと、曲線を描くときに、軌跡が表示されるのでどこにアンカーポイントを打てばよいかイメージしやすい。

切り抜きの時に便利。 

 

illustrator pentool の操作をいまひとたび復習したい

パスを書き終えるには、、、

ペンツールでパスを描く。

クローズしないでやめる(書き終える)には「ctrl」を押して「ペンツール」を「ダイレクト選択ツール」にして、どこかをクリックすればよい。

 

クローズドパスを途中で切る方法

切りたいパスを選択した状態で、ペンツールを持つ。(選択していないとアンカーポイントを追加するツールに自動で切り替わらない)

 

切りたい場所にアンカーポイントを追加する。

「ダイレクト選択ツール」で追加したアンカーポイントを選択する。

「パスを切断」ツールを選択する。

選択されているアンカーポイントをクリックアンドドラッグする。

f:id:ohta-felica:20170529222210p:plain

 

f:id:ohta-felica:20170529222443p:plain

 

      

jpeg converet

WEBカタログ製作の時など、PDFをJPEGにまとめて変換。

acrobatのactionを使用する。

「アクションウィザード」

f:id:ohta-felica:20170524125129p:plain

 「新規アクション」

f:id:ohta-felica:20170524125250p:plain

 「保存と書き出し」→「JPEG形式ですべての画像を書き出し」を選択する。

f:id:ohta-felica:20170524125842p:plain

 

  1. 「ユーザーに確認」のチェックを外せば自動的に同じ作業をしてくれる。
  2. 書き出しの条件を指定する。ちなみに236.22ピクセル/㎝とは600dpiのこと。
  3. 処理を施すフォルダを指定する。

f:id:ohta-felica:20170524130022p:plain

 

f:id:ohta-felica:20170524131341p:plain

 

アクションを保存する。

保存ができたらウィンドウの左側にあるアクションの一覧から実行したいアクションを選択して、実行する。

 

フォトショップを開いて生成されたファイルを確認するときちんと条件どおりでした。

 

f:id:ohta-felica:20170524131119p:plain

 

楽なのでおすすめです。

 

PDF action wizard

複数のファイルに同じ処理をしたいのでアクションを作る。

f:id:ohta-felica:20170524125129p:plain

PDFの埋め込まれたpropertyをすべてのファイルから消去したい。

f:id:ohta-felica:20170524125250p:plain

 

「文書の概要を追加」

f:id:ohta-felica:20170524125334p:plain

 「ユーザーに確認」チェックボックスを外す。

f:id:ohta-felica:20170524125413p:plain

 招請を設定する。今回はすべてを空欄にしたいので下のように入力する。

f:id:ohta-felica:20170524125447p:plain

 「処理するファイル」を指定する。

f:id:ohta-felica:20170524125527p:plain

 「アクションの名前」を設定する。

f:id:ohta-felica:20170524125640p:plain

 保存するをウィンドウの左側にアクションの一覧が表示される。

f:id:ohta-felica:20170524125715p:plain

その中から実行したいアクションを選ぶ☝

 

 

next FTP

ほぼサーバーの問題ではあるが、FTPでも速度は上がらないものか、、、

ということで悪あがきをしてみました。

結局のところ早くなったのか全く体感では分かりません。

気持ちの問題です!

 

f:id:ohta-felica:20170522230234p:plain

 

バッチ処理/シェルスクリプト その2

@echo off

cd /d %~dp0

sass --watch --style expanded sass:css

 

テキストエディタに上の記述をしてから、拡張子を.batにしてから保存。

f:id:ohta-felica:20170521000433p:plain

 こんなレイアウトにして実験をしてみる。

 

f:id:ohta-felica:20170521000003p:plain

 黄色の個所を「600→90」に変更しました。

テストします。

バッチ処理をしなければ変わりません。当たり前ですが、、、

f:id:ohta-felica:20170521000140p:plain

バッチ処理/シェルスクリプト その1

f:id:ohta-felica:20170520222719p:plain

 「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。

 

scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。

という一連の処理を自動化する。

  

バッチファイルを作る

テキストエディタで、拡張子が「.bat」のファイルを作ればよい。 

Windowバッチでは、「%0」や「%1」など、「%数字」は、引数を表し、「0」は特別に、そのバッチファイル自身、それ以降は第一引数、第二引数となります「this」か?、、、

 

 

「~」・・・これは、ドライブ、ファイルパスから「”」を取り除きます。Windowsでは、「Program Files」のように、スペースを含んだパスも良く使われますので、これを引数に渡すときに「”C:\Program Files\Java”」のように囲ったりします。この「”」を取り除き、純粋なパス文字列にするのに必要になります。

 

それ以外の「d」や「p」などのオプションは、ドライブやファイル名の含まれた文字列から、何を取り出すかの指定を行います。

具体的には、下記のような情報を取り出すことが可能で、複数組み合わせることも出来ます。

%~d0 %0をドライブ文字だけに展開
%~p0 %0をパス名だけに展開
%~n0 %0をファイル名だけに展開
%~x0 %0をファイル拡張子だけに展開
%~dp0 %0をドライブ文字とパスだけに展開
%~nx0 %0をファイル名と拡張子だけに展開

 

組み合わせた場合

%~dp0 %0をドライブ文字とパスだけに展開します。
%~nxI0 %0をファイル名と拡張子だけに展開します。
%~fs0 %0を完全なパスと短い名前だけに展開します。

 

 

「%0」引数0、自分自身、この場合バッチファイル。

「dp」driveドライブ、とpathパス。

「~」パスから不要な「”」などを取り除き、純粋な文字列に変換する。

「%~dp0」 自分自身のドライブとパスの文字列(""など不要な文字を含まない)

 

「コマンド名 /?」でそのコマンドのヘルプ画面を表示できる。

f:id:ohta-felica:20170520234049p:plain

 

cdとは change directory  

/d cdコマンドのスイッチ(オプション)ドライブの変更を伴う移動の際に使う。

例)cd /d k:/photo/2017/ といった感じで記述する。

 絶対パスでの記述 「/」ルートパスを表す。ここからスタートして「/」は一つ下の階層を表す。

 相対パスでの記述 「/」これが一つ下の階層 「../」これが一つ上の階層を表す。

 

 

まとめ

cd /d %~dp0とは、バッチファイルがあるドライブのフォルダに移動するということ。