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」使ってみた。

2014年5月13日火曜日

Facebook広告用、OGP画像の最適サイズメモ。2014.05.13現在

Facebookの仕様がコロコロ変わるのであくまで現時点でのメモ。

・上記の画像の設定でいけそうですが
OGP画像推奨サイズは600×315px以上、1200×630pxらしいです。

参考サイト：FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版　※9.21追記）

ほぼ同じだと思いますが広告用の画像は広告の種類によって最適なサイズが違うらしい。
参考サイト：【Facebook最新情報】広告・リンク投稿の画像表示を最適化！画像を大きく＆クリック率を上げるために必要な設定基準はコレ！

※書き出す画像の形式は.pngが推奨。.jpgで書きだした時Facebook側の圧縮で画像が荒れたので。

2014年2月19日水曜日

[CSS3]使ったら面白いかもマウスジェスチャーで動くアニメーション

[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック

demo

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

demo

2014年2月13日木曜日

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

参考サイト：http://coliss.com/articles/build-websites/operation/javascript/js-wow.html

2014年1月21日火曜日

スマートフォンサイト制作メモ

スマートフォンサイト、ブラウザチェック環境

・SDK android(エミュレータ)
・Android SDK の高速化方法

・Google Chromeの標準機能でユーザーエージェント切り替え

参考サイト

「1分で使える！Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備」

ROOM9

「スマホでLightboxのようなモーダルウィンドウを再現、動画やhtmlも読み込み可：Boxer」

・iOS7になって変わったブラウザ表示サイズ、スマホサイトファーストビューなど。

iOSとAndroidのフォント指定について

iOSはヒラギノ角ゴかヒラギノ明朝W3,W6
Androidは以下
・4.0以降　日本語フォントはモトヤフォントの「MTLc3m.ttf - モトヤLシーダ3等幅」「MTLmr3m.ttf - モトヤLマルベリ3等幅」の2つでボールドののフォントが無い。
英語フォントは「Roboto」

・3.X以前
「Droid Sans」

<参考サイト>
・Web Tips
「スマートフォンを考慮したフォント指定の検討」

・たき備忘録
「Android 4.0で採用された｢モトヤフォント｣とは？」

<参考サイト>
・All about 「Androidスマートフォンエミュレータの使い方」
http://allabout.co.jp/gm/gc/381225/

・「スマートフォン向けサイト作成にあたっての基本概要」
http://www.u-ziq.com/blog/2011/01/post_61.html

・スマートフォンサイトをデザインする上で知っておくべき10のTIPS
http://blog.webcreativepark.net/2011/06/16-103025.html