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

webかたつむり

ウェブデザインを勉強中

人が作ったボタンを分解してみる

分解した状態。 一番下から、執拗な分析をしてみる。 「描画モード」は変更しても変わりはない。 「不透明度」を「75%」にするのも味付け程度。 「オフセット」に対してぼかしは2倍。 「カラー」ではなく「濃さ」にしている。ここがポイントだろう。 「1…

black and white bitmap image変換してイラストレーターに再配置

splatterを使って遊ぶ。 resizeしてから、部分によってみるとこんな感じ。 ウォーターマークも見える。 グレースケールに変換する。目的は白黒のビットマップイメージを作ること。 破棄します。 OPTION! フィルター→ぼかし→ガウス 半径は1.5px 拡大するとこ…

black and white bitmap image

helpx.adobe.com Convert an image to Bitmap mode Converting an image to Bitmap mode reduces the image to two colors, greatly simplifying the color information in the image and reducing its file size. When converting a color image to Bitmap …

photoshop color theme

「ウィンドウ」「エクステンション」「adobecolorテーマ」 下の写真で、モデルが着用しているピンクの衣装の補色を背景にしてみる。 まず、カラーピッカーのサンプルを取得する範囲を広くする。 ピックアップした色が、描画色(active colror)になる。 最初…

indesign tabloid

「プリセット」「タブロイド」 初期設定ではこんな表示。 「表示」「オーバープリントプレビュー」 プレーンな状態になる。 横向きにして、見開きのチェックを外す(今回はA4のプレゼン資料を作る想定)、サイズをA4に設定する。 「ファイル」「配置」ショ…

パスのオフセット

星の先端をベベル結合にしたくないので、比率を大きくしておきます。 選択したパスの内側にオフセットしたいときはオフセット量を「ー」マイナスにしてあげればよい。 これを繰り返すと、、、、

マイター結合

線幅10ptで鋭角を描く。 角の形状は「マイター結合」 比率は「5」 このとき「線幅」*「比率」=50という値が重要! この値がマイター結合の臨界点(値)になる。 マイター長が「線幅」*「比率」の値を超えることはない。 マイター長が値を超えたときは、…

illustrator 円を中心から描く

楕円形ツールで円を描くと、外接する正方形の左上の頂点から描くことになる。 円(楕円)を中心から描きたい時は。「alt」ボタンを押したままドラッグすると中心から描くことができる。 四角形ツールでも、多角形ツールでも同様。

photoshop パスの境界線を描く

ペンツールでパスを描く 新規でレイヤーを作る 「ブラシ」を選択 「強さのシュミレート」にチェック。 こうしておくと、ペンタブレット使用時に、プレッシャーを感知してブラシの太さを変えたような表現ができる。 あわせて、ペンのオプションでも「サイズジ…

photoshop pentool rubberband

photoshop pentoolのオプションを設定する。 上部のオプションから「ラバーバンド」にチェックする。 こうしておくと、曲線を描くときに、軌跡が表示されるのでどこにアンカーポイントを打てばよいかイメージしやすい。 切り抜きの時に便利。

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

パスを書き終えるには、、、 ペンツールでパスを描く。 クローズしないでやめる(書き終える)には「ctrl」を押して「ペンツール」を「ダイレクト選択ツール」にして、どこかをクリックすればよい。 クローズドパスを途中で切る方法 切りたいパスを選択した…

jpeg converet

WEBカタログ製作の時など、PDFをJPEGにまとめて変換。 acrobatのactionを使用する。 「アクションウィザード」 「新規アクション」 「保存と書き出し」→「JPEG形式ですべての画像を書き出し」を選択する。 「ユーザーに確認」のチェックを外せば自動的に同じ…

PDF action wizard

複数のファイルに同じ処理をしたいのでアクションを作る。 PDFの埋め込まれたpropertyをすべてのファイルから消去したい。 「文書の概要を追加」 「ユーザーに確認」チェックボックスを外す。 招請を設定する。今回はすべてを空欄にしたいので下のように入力…

next FTP

ほぼサーバーの問題ではあるが、FTPでも速度は上がらないものか、、、 ということで悪あがきをしてみました。 結局のところ早くなったのか全く体感では分かりません。 気持ちの問題です!

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

@echo off cd /d %~dp0 sass --watch --style expanded sass:css テキストエディタに上の記述をしてから、拡張子を.batにしてから保存。 こんなレイアウトにして実験をしてみる。 黄色の個所を「600→90」に変更しました。 テストします。 バッチ処理をしなけ…

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

「--watch」オプションは、scssファイルが書き換えられると自動でコンパイルされて、cssファイルも書き換えられる。 scssフォルダ内のstyle.scssファイルを「--watch」して、書き換えたら「--style expanded」でcssフォルダ内のstyle.cssを更新する。 という…

sass complie output option

「windows」+「R」、「cmd」 「sass test.scss:test.css」と入力する。 と、このように出力される。このようにオプションを指定しないと「nested」オプションになる。 次に、「sass test.scss:test.css --style expanded」と入力する。 するとこのように表示…

sass command prompt

「windows」+「R」 ファイル名を指定して実行 「cmd」 コマンドプロンプトの表示 「ホームフォルダ」以外にあるscssファイルをコンパイルするときには、ファイルのあるフォルダを「shift」+「右クリック」するとそのフォルダに移動できる。

sass to css

sassのファイル(.scss)をcssに変換する→コンパイル Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 - 公式サポートサイト 「test.scss」をホームフォルダ→c: ¥users¥(アカウント名)のおく。 ホームフォルダに置いた「test.scss」を…

sass install windows

RUBYのインストール 「windows」+「R」でファイル名を指定して実行 「cmd」と入力してコマンドプロンプト 1行目はOSのバージョン 2行目はコピーライト 3行目、ファイルパスの後にに入力する。 RUBYがインストールされているか確認する コマンドプロンプト…

iphone ipadの写真をpcに移動する

windows用のitunesが遅いのでなんとかしたい。 まずは自動の動機をしないように設定する。 写真や動画をすべてPC上に移動させる。 これは通常の操作でできる。「エクスプローラー」を起動。 表示されたデバイス上のファイルにアクセスできる。 iosデバイスは…

windows10 update

場所が変わって、時々忘れる。

動画整理用ブログも作ってみます

photoshop shortcut

photoshopのアクションを使うときに、特定のレイヤーを指定しないで一連のフローを実行させるのに必要なショートカットを2つ。 [Shift] + [Ctrl] + [Alt] + [N]レイヤーを新規作成(ダイアログボックス無し)。 [Shift] + [Ctrl] + [Alt] + [E]背景を含む全て…

stock photo

いまや写真は拾ってくるもの、、、ゴミか??? というわけでどれだけ良い写真を、ただで拾ってくるかも腕なのか? unsplash.com https://stock.adobe.com/jp/ www.shutterstock.com ☟一日ひとつは無料でいただけるので、コツコツストックしましょう。 www.a…

font を加工する

illustrator 「アピアランス」でフォントを加工する。 最初は、エッジをギザギザにする。 「パス」「パスの変形」「ラフ」を使用する。 パラメータの値を変えて、2度ラフをかけると、より複雑な味わいになる。 フォントの種類によって効果が変わってくる。 …

photoshop 不要な透明部分を削除する方法

ポラロイド写真をスキャンして、フレームだけを利用する。 このとき外側の透明部分が必要ないので削除したい。 「ctrl」+「サムネール」でフレームだけを選択する。 「イメージ」「切り抜き」 これで切り抜けます。

wacom for photoshop

photoshop用にwacomを設定する wacomには説明書がないから不便、、、 youtubeにあるチュートリアルを参考にペン、面倒。 Five Photoshop Tips for Wacom Tablet Beginners - YouTube ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定す…

複数のカスタマイズしたgooglemapsを配置する(ここでは6つ)

js/outline.jsの内容 // JavaScript Document function initialize() { var latlng_01 = new google.maps.LatLng(35.700122, 139.776031); var myOptions_01 = { zoom: 17, center: latlng_01, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_01 = ne…

wacomの設定

コントロールパネルでする。 初期設定は以下の通り まず、ペンのボタンに割り当てる機能を変更する。

javascript 再帰関数 / ハノイの塔

ハノイの塔 scr=source aux= auciliary 補助 dst=destination ここから本題、、、 var hanoi = function (disc, src, aux, dst){ if (disck>0){ hanoi(disc -1 , src, dst, aux); →ここが1行目 document.write ('move disc' + disc + 'from' + src + 'to' + …

WordPressでpathやURLを取得するためのタグと出力例まとめ( すぐにリンクするためのメモ)

pathはローカルの場合は「C:\xampp\htdocs\xampp\example/」。サーバの場合は「/var/www/html/example/」といった感じになります。 関数解説出力 ABSPATH インストールされた場所のパス C:\xampp\htdocs\xampp\example/(ローカルの場合)/var/www/html/exam…

wordpress theme "asteria lite" を使ったカスタマイズ作業の段取り

画像やリンクのパスをどのように指定するのがよいのか? 1月15日に考えたこと、、、 functions.phpに関数を追加する 以下のコードをfunctions.phpに追加する。 絶対パスの、「ホスト名」部分を省略して記述する段取り。 function delete_host_from_attachmen…

wordpress theme "asteria lite"

wordpress ページの種類と、ファイル名の関係 asteriaテーマフォルダの中身 黄色い部分が固定ページのテンプレートファイル。 page.phpのソースコードは以下。 <div class="fixed_site"> <div class="fixed_wrap singlefx"> <div class="page_tt"> <div class="center"><h1 class="postitle"></h1></div></div></div></div>

wordpress 固定ページ用テンプレートを作る方法。

固定ページを新規で追加する。 このときにプルダウンメニューで表示されるようなテンプレートの作り方。 ファイルの格納場所と、ファイル名について。 例えばaccessのページであれば、page-access.php profileのページであれば、page-profile.php このように…

wordpress absolute URLs

既存のwordpressサイトの見栄えを含めた改修作業をすることになって、授業でwordpressを教わった時から、トラブルの原因と思われた、絶対パス参照の問題に再びぶちあたった。 そもそも、wordpressの開発者が意図してそのような設計にしているのだから、その…

illsutrator 文字パネル初期設定

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。 nameはalphabet, number, underscoreを使用する。 使用していない場合、および予約語を使用する場合は、doublequotation …

DOM, node について

DOM document object model documentのツリー構造そのものなのか? node DOMツリーにぶら下がっているオーナメント。 それぞれのHTML要素。 nodeとは瘤のこと。

jQuery append prepend

before リファレンスするのは「.vacation」。 このクラスの要素に対して前に配置する、これがbefore。 「.vacation」との繋がりはない。(関係性がない) after beforeの反対。これも関係性はない。 prepend 「first child」として追加する。 「.vacation」…

jQuery selector まとめ

基本形 $(" "); これさえ知っていればあとはCSSと同じ。 $("li"); $("p"); $(#id); $(".class"); $("#id li"); $(".class li"); pseudo selector pseudo 擬似 :first :last :odd :even liのindexは、先頭が「0」(配列と同じ) ゆえにeven(偶数)、は先頭…

アコーディオンメニュー js

function showHide() { var para1 = document.getElementById('news1Paragraph'); var para2 = document.getElementById('news2Paragraph'); para1.style.display = 'block'; para2.style.display = 'none'; var title1 = document.getElementById('news1Tit…

Date(); の復習 / 日付の表示

<body> <h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1> <script> function now(){ now = new Date(); year = now.getFullYear()+'年'; month = (now.getMonth()+1)+'月'; date = now.getDate()+'日'; hours = now.getHours()+'時'; minutes = now.getMinutes()+'分'; seconds = now.…</body>

scriptの記述場所

htmlのタグは基本的に上から順番に読み込まれる。 scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。 うまくいかない <html lang="ja"> <head> <meta charset="UTF-8"> <title>display Date</title> <script> var now = new</meta></head></html>…

PDFのファイルサイズを縮小する 02

引き続き、PDFのファイルサイズを縮小するための考察。 「最適化パネル」の「オブジェクトを破棄」が気になった。 そこでテスト。 ケースによるだろうが、元のファイルがどのくらいサイズダウンできるのだろう? ちなみに最適化に際して、「標準」を選択した…

PDFのファイルサイズを縮小する 01

Acrobatヘルプ | PDF のファイルサイズを小さくする方法 (Acrobat DC) このところPDFのファイルサイズについて、いろいろ考えていたが、このADOBEの文書が参考になると思ったので転載。(必要な時にすぐ検索用) PDF文書の構成要素を調査する 「表示」「表…

PDFを画像変換、リサイズしてから再びPDFに変換、、、

渡されたPDFファイル、ページ毎のサイズが違う。 ミッションは、閲覧用にページのサイズを揃えなくてはいけないこと、そしてPDFのファイルサイズを小さくすること。 どのようなワークフローがいいのか、、、 分からないときは実験する。 実験 オリジナルのPD…

クリックすると画像が置換する

クリックすると画像が置換する 3枚の画像をクリックするたびに置換する。 ループにする。 <script> var images = new Array(); images[0]= 'images/d1.jpg'; images[1]= 'images/d2.jpg'; images[2]= 'images/d3.jpg'; var i = 0; function changeImg(){ if(i==2){ i…

更新用タイマー なんとなくよさそうです、、、保証なし

<script> /*URLの配列*/ var url = new Array; url[0] = 'index.html'; url[1] = 'index_new.html'; //変更後のURLを入力する。 /*日付の配列*/ var date = new Array; date[0] = new Date(1970, 00, 01, 00, 00, 0000); date[1] = new Date(2017, 00, 05, 22, 30, 0…

javascript location object

window.location window.location.href window.location.pathname