iphone5用くま系シンプル壁紙つくった

2013年04月23日
しばらくテッドの壁紙だったのですが、そろそろ変えたい気分になってきたので作ってみました。

くま系シンプル壁紙iphone5用。テイクフリーです。

▼左:ロック画面用 右:ホーム画面用
lock_nozokuma.pnghome_tamakuma.png
▼こなかんじになります
写真 2013-04-23 0 36 23.png写真 2013-04-23 0 37 21.png


私の使っているスマホケース('∀'
このケースの色に合うように壁紙作りました。薄くて画面のふちにケースがかからないのがスマートでいいかんじ。

SwitchEasy NUDE for iPhone 5 アマゾンプレアデスダイレクト限定品 Fuchsia


posted by シュガリー at 00:57 | Comment(0) | TrackBack(0) | iphone壁紙 | このブログの読者になる | 更新情報をチェックする

Photoshopのスマートオブジェクトがとっても便利【ベクトル編】

2013年04月14日
私がPhotoshopの中でとっても便利だと思っている機能「スマートオブジェクト」について、
前回 Photoshopのスマートオブジェクトがとっても便利【写真編】として基本的な事をかいてみたんですが、
今度はIllustratorと連携した便利な使い方を紹介します。

わたしはwebデザインは基本Photoshopで作るんですが、アイコンやイラストなどはIllustratorで作って、それをPhotoshopへ配置します。
1.pngIllustratorで星のアイコンを作りました。
星をコピーし、Photoshopへ移動します。

2.pngPhotoshopでペーストしようとすると、写真のようなウインドウが表示されます。
ここで「スマートオブジェクト」を選択しOKをクリックします。

3.png例のマーク付きのレイヤーができました。
今回はリストの先頭のアイコンにしてみます。

4.pngスマートオブジェクト化したアイコンと、テキストのレイヤーをグループ化してコピーしました。

ここで急に、星はなんか嫌だ!気に入らねぇ!と思ったので、スマートオブジェクトを編集してみます。

コピーしたので今3つもアイコンのレイヤーがありますが、そのどれでもいいのでマークのついたサムネイルをクリックします。
するとIllustratorが開きます。星を消して、ハートに変更してみました。
5.png
これを保存し、Photoshopへ戻ってみると...

7.png星のアイコンがまとめてハートへ変更できました!

こんなかんじで、コピーした全部に一度で修正を反映することができるので、修正したものを並べなおす手間もなくてとっても便利です。
IllusratorとPhotoshopのいいところを組み合わせて使える便利な機能なのでおすすめです。
posted by シュガリー at 03:08 | Comment(2) | TrackBack(0) | デザインのこと | このブログの読者になる | 更新情報をチェックする

Photoshopのスマートオブジェクトがとっても便利【写真編】

私がPhotoshopの中でとっても便利だと思っている機能、「スマートオブジェクト」を紹介したいと思います。
スマートオブジェクトはCS2から追加された、"元のデータを保持"する機能です。

写真などの画像を配置して、それをいったん小さくし、
Photoshopのスマートオブジェクトがとっても便利【写真編】 1.png

Photoshopのスマートオブジェクトがとっても便利【写真編】 2.pngその写真をやっぱり大きく使いたいと思い大きくした時、画質が悪くなってしまいます。

Photoshopはピクセルデータなのでいったん小さくした時点で小さくなったサイズ分の画質になってしまい、もういちど大きくしても元の画質には戻りません。

そこでスマートオブジェクトを使います!

Photoshopのスマートオブジェクトがとっても便利【写真編】 3.png(cs4の場合です)
まずスマートオブジェクトにしたいレイヤーを右クリックします。

Photoshopのスマートオブジェクトがとっても便利【写真編】 4.png「スマートオブジェクトに変換」をクリック

Photoshopのスマートオブジェクトがとっても便利【写真編】 5.pngレイヤーのサムネイルに写真のようなマークがでたらスマートオブジェクトに変換できている状態です。

スマートオブジェクトになっている状態なら、サイズを小さくしてその後大きくしても、スマートオブジェクトに変換した時のサイズの写真が保持されているので画質が荒くなりません。Photoshopのスマートオブジェクトがとっても便利【写真編】 6.png
※元のサイズより大きくした場合には画質は荒くなります。

ちなみにレイヤーのサムネイルをダブルクリックすると以下のようなポップアップがでて
Photoshopのスマートオブジェクトがとっても便利【写真編】 7.png
Photoshopのスマートオブジェクトがとっても便利【写真編】 8.png別ウインドウで元画像を確認できます。
Photoshopのスマートオブジェクトがとっても便利【写真編】 9.png元画像を編集してみます。
編集後は保存し、

Photoshopのスマートオブジェクトがとっても便利【写真編】 10.png本データのウインドウに戻ると、編集したものが反映されます。

ただこの機能、元のデータを保持してるのでその分データの容量が大きくなります。
もし他の人にデータを渡す時など、容量が大きい事で問題がある場合にはレイヤーを右クリック >「レイヤーをラスタライズ」で画像化すると、スマートオブジェクトのデータがなくなり容量が軽くなります。

なにかと使える機能なのでおすすめです。

▼illustratorと組み合わせて使うスマートオブジェクトについての記事
Photoshopのスマートオブジェクトがとっても便利【ベクトル編】
posted by シュガリー at 02:10 | Comment(0) | TrackBack(0) | デザインのこと | このブログの読者になる | 更新情報をチェックする

Seesaaブログのタイトルを画像にしてみる

2013年04月13日
ブログのタイトルを画像にしてみるブログのタイトル(1)を作ったロゴ画像に変更してみます。

デザイン > コンテンツの「ブログタイトル」内のHTMLを修正します。
初期値は以下のようなかんじ。
<​h​1​>​<​a​ ​h​r​e​f​=​"​<​%​ ​b​l​o​g​.​p​a​g​e​_​u​r​l​ ​%​>​"​ ​a​c​c​e​s​s​k​e​y​=​"​1​"​>​<​%​ ​b​l​o​g​.​t​i​t​l​e​ ​%​>​<​/​a​>​<​/​h​1​>

<​%​ ​b​l​o​g​.​t​i​t​l​e​ ​%​>​の部分を<img>タグへ変更すればいいんだけど、
ここで一点気になるところが。
このブログタイトル...<h1>タグになってる!
<h1>タグとはそのページの大見出し。そのページがどんな内容のものなのかを一番説明しているテキストに付けられるべきタグです。
ブログの場合、ブログタイトルよりも記事のタイトルが<h1>タグのほうがふさわしいのでは!

記事タイトル(2)のほうはどうなってるかと見てみると、
(デザイン > コンテンツの「記事」)
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<h3>タグ。

不満です。

なので(1)のタイトルロゴは#logoというIDを付け、(2)の記事タイトルを<h1>タグに、修正しました。
カスタマイズ後の値は以下のようなかんじ
(1)ブログタイトル
<div id="logo"><a href="​<​%​ ​b​l​o​g​.​p​a​g​e​_​u​r​l​ ​%​>​" ​a​c​c​e​s​s​k​e​y​=​"​1​"​><img src="http://画像のURL" alt="Kuma Kuma Factory" border="0" /></a></div>

(2)記事タイトル
<h1 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h1>

ブログのタイトルを画像にしてみるあとはデザイン > デザイン設定で(1)は#logo、(2)はh1でcssを整えれば
←こんなかんじになります。
posted by シュガリー at 21:39 | Comment(0) | TrackBack(0) | ブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。