X_NOTE

2015年3月12日木曜日

FacebookカバーのPCとスマートフォンのサイズ（2015.03.12）

FacebookページPC版カバーのサイズは公式サイトに画像付き分かりやすく出ているがスマートフォンサイトではそのPC版カバーをどのくらいトリミングされて見えるのか記載されていなかったのでメモ。

◯Facebookカバー画像サイズ PC
幅851px x 高さ315px

◯Facebookカバー画像サイズ SP （PCカバーのトリミングサイズ）
幅560px x 高さ315px

※スマートフォン上では幅640px x 高さ360pxとして表示されるようだけれど
PC画面上では上記の大きさでトリミングされるので重要な情報は端には置けない。。

【参考サイト】
Facebookヘルプセンター
「Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。」

2014年12月4日木曜日

photoshop つぎ目のないパターンの作り方

「photoshop つぎ目のないパターンの作り方」

（１）パターンにしたい素材(テクスチャ)を正方形で大きさが偶数値のものを開く。

（２）次に、フィルター→その他→スクロールを選択し、ラップアラウンドにチェック。
画像サイズの半分の数値(例えば、400px×400pxの正方形なら、それぞれ200px)を入力する。ラップアラウンドは、数値分画像を右や下へ移動させ、はみ出た部分が反対側から出てくる機能。

（３）切れ目など気になる部分をコピースタンプツールなどで微調整を加える。

完成！
※この記事の画像はちょっと微妙なパターンですが悪しからず。

◯参考サイト
「PHOTOSHOP/ILLUSTRATORで継ぎ目のないパターンを作る方法」
spice works blog

2014年11月14日金曜日

Photoshop CCの一括画像書き出し「Generator（生成）」メモ

PSDファイルは英数字で設定します。
［ファイル］メニューの［生成］→［画像アセット］をクリックします。
画像として書き出したいレイヤーのレイヤー名に「photo.jpg」のように拡張子を追加します。

（例）photo.jpgという名称のJPG画像で画像圧縮は最高品質の100%で書き出したい場合。

レイヤーに以下のように記述する。

photo.jpg100%

他に何倍かで書き出せたり、ピクセル指定で書き出せたり。

【参考サイト】

DTP Transit

「この進化はズルイ！Generatorテクノロジーを使ったPhotoshop CCの「画像アセット」」

2014年9月2日火曜日

CSS3で簡単にページ切替を追加できる「Animsition」

フェードアウト、インでページ切り替えをしたりその他色々なトランジションで切り替えできる。ちょっと動きを追加したい時や動きに合わせた表現方法も考えられるかも。

◯サポートブラウザ
モダンブラウザとIE10以上

◯リンク

A simple and easy jQuery plugin used to add page transition on css animations.

2014年9月1日月曜日

クオリティの高い商用フリーWEBフォント+フォントまとめ

Google web fonts

Lato

Montserrat

Arvo

Roboto

参考サイト

Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた

2014年7月15日火曜日

Virtual BOX ダウンロード方法、使い方まとめ

◯ダウンロードの仕方

→Macでも無料でIE確認するためのModern.IEが想像以上に快適だった

◯テキストをMacからVirtualBoxのWindowsへコピペする設定

→VirtualBoxでOS間のクリップボードを共有する方法

2014年6月9日月曜日

google maps マーカーとスタイルオリジナルに変更まとめ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>google maps sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

}
</script>
</head>

サンプル

参考サイト
・geocoding
住所から緯度経度を調べられる

・Google Maps API Styled Map Wizard - gmaps-samples-v3
googlemapの見た目を変えるJSONコードを書き出す。

・Googleマップをイラストマップみたいにしたい。
・Webサービス Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。