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

webかたつむり

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

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

windows用のitunesが遅いのでなんとかしたい。

まずは自動の動機をしないように設定する。

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

 

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

 

写真や動画をすべてPC上に移動させる。

これは通常の操作でできる。「エクスプローラー」を起動。

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

 

 

 

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

 

表示されたデバイス上のファイルにアクセスできる。

iosバイスは勝手にitunesが立ち上がるのでよくわからなくなるがこれでよいのだ。

 

 

photoshop shortcut

photoshopのアクションを使うときに、特定のレイヤーを指定しないで一連のフローを実行させるのに必要なショートカットを2つ。

  1. [Shift] + [Ctrl] + [Alt] + [N]
    レイヤーを新規作成(ダイアログボックス無し)。
  2. [Shift] + [Ctrl] + [Alt] + [E]
    背景を含む全てを統合したレイヤーをコピー。

 

1+2の操作を加えると、いままでに実行した処理をすべて施した、すべてのレイヤーを統合した、1枚のレイヤーができる。

このレイヤーに対してハイパスなどの処理を行うといちいち特定のレイヤーを指定しなくて済む。

 

さらに、アクションを使うときは、レイヤー操作のダイアログボックスを使用する。

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

 

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

 

ここでプレビューを確認しながら決定すると、アクションがシンプルになる。

さらに、オリジナルのダイアログボックスを作ることができる。

まず、下のようにダイアログボックスを作るアイコンをクリックする。

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

 

次に一段階前のアクションに「中止を挿入」

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

 ダイアログボックスに表示するメッセージを自分で入力します。

「続行許可」にチェック。

 

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

 テストしてみます。

まずハイパスの手前で、ダイアログボックスが出てきます。

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

 

続行をクリックすると、半径を入力することができます。

 

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

 

参考資料

ショートカットは、コマンド別にしています。
※Win XP+Photoshop CS2でのコマンドです。
Macの場合は、下記置き換えてください。
Ctrl = Cmd
Alt = Opt
右クリック = Control + クリック
1. F7
レイヤーパレットの表示・非表示の切り替え。
2. [Shift] + [Ctrl] + [N]
レイヤーを新規作成。
3. [Shift] + [Ctrl] + [Alt] + [N]
レイヤーを新規作成(ダイアログボックス無し)。
4. [Ctrl] + 「新規レイヤーを作成」ボタン
選択したレイヤーの下にレイヤーを新規作成。
※背景には適用されません。
5. レイヤーを選択して、[Ctrl] + [J]
選択したレイヤーをコピーして、新規作成。
6. [Ctrl] + [Alt] + [J]
選択したレイヤーをコピーして、新規作成(ダイアログボックス有り)。
7. [Shift] + [Ctrl] + [J]
選択したレイヤーの選択範囲をカットして、新規作成。
8. [Ctrl] + [Alt] + [A]
背景以外の全てのレイヤーを選択。
9. 任意のレイヤーで右クリックして、「同じ種類のレイヤーを選択」
背景以外の全ての同じ種類のレイヤーを選択。
10. [Ctrl] + [
選択したレイヤーを下に移動。
11. [Ctrl] +
]
選択したレイヤーを上に選択。
12. [Shift] + [Ctrl] + [
選択したレイヤーを一番下に移動。
13. [Shift] + [Ctrl] +
]
選択したレイヤーを一番上に選択。
14. [Alt] + [
レイヤーの選択を下方向に移動。
15. [Alt] +
]
レイヤーの選択を上方向に移動。
2017/5/18 Photoshopで、レイヤーを操作する便利な33のショートカット | コリス
http://coliss.com/articles/buildwebsites/
operation/design/785.html 2/2
16. [Shift] + [Alt] + [
レイヤーの選択範囲を下方向に増やす。
17. [Shift] + [Alt] +
]
レイヤーの選択範囲を上方向に増やす。
18. 「目(レイヤーの表示/非表示)」をクリック
クリックしたレイヤーの表示・非表示の切り替え。
19. 「目(レイヤーの表示/非表示)」を[Alt] + クリック
クリックしたレイヤー以外の表示・非表示の切り替え。
20. 「目(レイヤーの表示/非表示)」を[Alt] + クリックした後、[[ or ]]
表示レイヤーの下or上に移動。
21. [Ctrl] + [A]
選択したレイヤーの中身の全てを選択。
22. レイヤーサムネイルを、[Ctrl] + クリック
選択したレイヤーの中身だけを選択。
23. [Ctrl] + [Alt] + [A]
背景以外の全てのレイヤーを選択。
24. [Ctrl] + [G]
選択したレイヤーに、レイヤーグループを新規作成。
25. [Shift] + [Ctrl] + [G]
選択したレイヤーグループを削除。
26. [Ctrl] + [E]
選択したレイヤーを下のレイヤーと統合。
27. [Ctrl] + [E]
選択した複数のレイヤー全てを統合。
28. [Ctrl] + [Alt] + [E]
選択したレイヤー全てを統合したレイヤーをコピー。
29. [Shift] + [Ctrl] + [E]
背景を含む全てのレイヤーを統合。
30. [Shift] + [Ctrl] + [Alt] + [E]
背景を含む全てを統合したレイヤーをコピー。
31. [Ctrl] + [G]
選択したレイヤーのクリッピングマスクを作成・解除。
32. [Shift] + [+ or ‒]
選択したレイヤーのブレンドモードを上・下から順番に変更。
33. [V]の後に、[数字キー]
選択したレイヤーの不透明度の変更。
※数字キーのみで可の場合もあります

 

stock photo

いまや写真は拾ってくるもの、、、ゴミか???

というわけでどれだけ良い写真を、ただで拾ってくるかも腕なのか?

 

unsplash.com

https://stock.adobe.com/jp/

www.shutterstock.com

 

 

☟一日ひとつは無料でいただけるので、コツコツストックしましょう。

www.ac-illust.com

font を加工する

illustratorアピアランス」でフォントを加工する。

 

最初は、エッジをギザギザにする。

「パス」「パスの変形」「ラフ」を使用する。

パラメータの値を変えて、2度ラフをかけると、より複雑な味わいになる。

フォントの種類によって効果が変わってくる。

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

 

 次は線の太さ(相似形にはならない)を変えてみます。

今回は「パス」「パスのオフセット」を使用します。

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

シアン(下)「パスのオフセット」「+0.1」「-0.25」

レッド(上)「パスのオフセット」「+0.5」「-0.5」「+0.1」「-0.25」

重ねてみると、、、

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

 こんな感じです。最初に同じ値だけ「+」してから「ー」すると結果が微妙に変わります。特に水平方向。

「レッド」に「ラフ」を追加してみる。

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

 

 ガリ版刷り風、、、邪道ですか???

 

元ネタです。参考になりました。

日本語フォントの角を丸くしてイメージを変えてみる | 鈴木メモ

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

 

 

ポラロイド写真をスキャンして、フレームだけを利用する。

このとき外側の透明部分が必要ないので削除したい。

 

f:id:ohta-felica:20170305103629j:plain

 

 

「ctrl」+「サムネール」でフレームだけを選択する。

 

f:id:ohta-felica:20170305103906j:plain

 

 

「イメージ」「切り抜き」

 

f:id:ohta-felica:20170305104004j:plain

 

これで切り抜けます。

 

f:id:ohta-felica:20170305103629j:plain

 

wacom for photoshop

photoshop用にwacomを設定する

wacomには説明書がないから不便、、、

youtubeにあるチュートリアルを参考にペン、面倒。

Five Photoshop Tips for Wacom Tablet Beginners - YouTube

 

 

ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定する。

 

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

 

 

f:id:ohta-felica:20170304073333j:plain

 

 

複数のカスタマイズした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 = new google.maps.Map(document.getElementById("map_canvas_01"), myOptions_01);
var marker = new google.maps.Marker({
position: latlng_01,
map: map_01
});

var latlng_02 = new google.maps.LatLng(34.680533, 135.510132);
var myOptions_02 = {
zoom: 17,
center: latlng_02,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_02 = new google.maps.Map(document.getElementById("map_canvas_02"), myOptions_02);
var marker = new google.maps.Marker({
position: latlng_02,
map: map_02
});

var latlng_03 = new google.maps.LatLng(35.003861, 135.751226);
var myOptions_03 = {
zoom: 17,
center: latlng_03,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_03 = new google.maps.Map(document.getElementById("map_canvas_03"), myOptions_03);
var marker = new google.maps.Marker({
position: latlng_03,
map: map_03
});

var latlng_04 = new google.maps.LatLng(35.625393, 135.061006);
var myOptions_04 = {
zoom: 17,
center: latlng_04,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_04 = new google.maps.Map(document.getElementById("map_canvas_04"), myOptions_04);
var marker = new google.maps.Marker({
position: latlng_04,
map: map_04
});

var latlng_05 = new google.maps.LatLng(35.982359, 139.963494);
var myOptions_05 = {
zoom: 17,
center: latlng_05,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_05 = new google.maps.Map(document.getElementById("map_canvas_05"), myOptions_05);
var marker = new google.maps.Marker({
position: latlng_05,
map: map_05
});

var latlng_06 = new google.maps.LatLng(34.887385, 135.744679);
var myOptions_06 = {
zoom: 17,
center: latlng_06,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_06 = new google.maps.Map(document.getElementById("map_canvas_06"), myOptions_06);
var marker = new google.maps.Marker({
position: latlng_06,
map: map_06
});
}
initialize();

 html 地図をレイアウトする場所に記述する内容

<div id="map_canvas_01" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_02" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_03" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_04" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_05" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_06" class="googleMaps" style="width:700px;height:300px;"></div>

 

bodyの閉じタグの前に記述

<!-- googlemaps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="js/outline.js"></script>