「和」デザインの助けになるかもしれないPhotoshopブラシ。あとパターンもちょっと。

和をテーマにしたデザインのサイトを制作させて頂いてまして、後々Photoshopブラシのストックリストになればと思いまとめました。

竹・扇子・家紋などいろいろご紹介です。

「photoshop ブラシ 和」とかで訪問された方が幸せになったら、小躍りしたいと思ってます。

Photoshopブラシ

竹・鳥・蝶・龍・刀・槍・桜(梅?)がありました。
何かの背景にほんのり入れるといい感じ。
扇子です。扇子が5本です。
鯉です。鯉がいっぱいです。
ワンポイントで使えそうな和風ブラシ
デフォルメチックな竹ブラシ
32人のお姉さん。

ここからPhotoshopパターン

9種類の桜のパターン
和のデザインパターン20種類

ペット関連サイトのWebデザインまとめ

ペットショップサイトを制作させて頂くことになり、色々なペット関連サイトを見ていました。「!」と思ったWebデザインをまとめます。参考になれば幸いです。

どれもファーストビューで、動物の写真やイラストが使われていて、ユーザーに内容をすぐ理解してもらうように工夫されています。

Pet Store
Pet Works
Best Friend
The Pet Behaviour
Pet Store Design
nasz-zwierzaczek.pl
greeniguana.pl
Pets portal “Pitomets”
Swanky Pets Boutique – Option2
HealthyPets.com
Next Day Pets
Pet in Canvas
ペットショップ ワンラブ
capsule dog design
Sheba® Japan Website ※2011/3/24現在 音が出ます。
ドッグフード SOLVIDA

[php5]RSSを配信している外部ブログの新着記事を自動で取得するphp

企業サイトの制作案件で、
「会社のサイト(企業サイト)に自分のブログの新着記事を表示したい」
というご要望を頂きまして、その時の思い出備忘録エントリーです。RSS配信をしているブログからなら簡単に実装出来ますのでオススメです。
因みにphp5です。

下記がそのソースです。

[php]

    < ?php
    $rss = simplexml_load_file("http://feeds.feedburner.com/hatena/b/hotentry");

    $i = 0;
    foreach ($rss->item as $item) {
    if(++$i>5) break;
    $dc = $item->children(‘http://purl.org/dc/elements/1.1/’);
    $link = $item->link;
    $title = $item->title;
    $date = date(“Y/m/d”,strtotime($dc->date));
    //$desc =$item->description;
    echo “

  • $title($date)
  • \n”;
    }
    ?>

[/php]

demo

解説

3行目に表示したいブログのRSSのパスを書きます。(ダミーで「はてなブックマークの人気エントリー」のパスを入れています)

7行目の5という数字は、最新記事を5件表示する。という意味です。お好みでどうぞ。

11行目で日付の表示を。

$date = $dc->date;

でもよかったのですが、そうすると(2011-03-09T10:14:45+09:00)みたいな日付表示になって、なんだかなぁ~なので、

$date = date(“Y/m/d”,strtotime($dc->date));

にしました。これで日付表示が(2011/03/09)という風になります。曜日、時、分、秒も表示したいときは、

$date = date(“Y/m/d l H:i:s”,strtotime($dc->date));

でおkです。

【友人のために】商品一覧などで使われる、border,floatを使ったhtml,cssの書き方

学生時代からの友人が、アパレル業界からWeb業界にジョブチェンジしまして。(おめでとう!がんばってね!)
そんな彼から一本の質問電話が。「上下左右1pxのborderで囲ったwidth150pxくらいのボックスを、marginで間隔を空けずにfloatさせて商品一覧を作りたいんだけど。ボックス同士が隣り合うとボーダー2pxに見えてイケてない。どうすればいい?」
……。文章にすると伝わり辛いですね。質問を図で表現するとこのように困っているようです。


ということらしいです。解決方法はいくつかありますが、私の場合のやり方を。
全体の表示領域を600px(#list)とします。
その中にwidth150pxの商品達(.items)を4列2行で並べます。
解説付きのデモ用意しました

まずはhtmlの書き方

4列2行なのでズラズラ書いています。m( _ _ )m liの中は全部同じです。
[html]

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

  • 商品名が入ります

    お値段が入ります

[/html]

css

width、border、font-size、paddingなどはお好みでどうぞ。
ポイントは12行目と13行目です。

12行目のmarginで、borderサイズの分をマイナスしてます。
今回はボックスのborderを1pxにしましたので、-1pxと書いてます。
(borderを3pxするなら、-3pxと書きます)

13行目はIE対策です。
書かないとマイナスした分の右と下のborderが消えてしまいます。><
[css]
#list {
width: 600px;
}
#list .items {
float: left;
width: 150px;
list-style: none;
}
#list .items div {
border: 1px solid #CCC;
padding: 5px;
margin: 0px -1px -1px 0px;
position: relative;
}
#list .items div h3 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#list .items div p {
font-size: 12px;
margin: 0px;
padding: 0px;
}
[/css]

WordPress管理画面のサイドメニューを権限ごとにカスタマイズするプラグイン。Adminimize

WordPressを使って権限別、且つ複数人でサイトを管理した案件の思い出備忘録エントリー。Wordpress管理画面サイドメニューの「リンクとかツールとかって何?いる?」といったご意見をいただいたきまして。確かにその時はリンクやツールは必要ない機能でしたし、カテゴリーも触って欲しくない状況でした。「使わない(使ってもらいたくない)機能を表示するのは優しくない」と思い立ち、入れたのがWordpress管理画面のサイドメニューを編集できるプラグイン。Adminimizeでした。

WordPressのユーザー権限:編集者のデフォルトサイドメニュー

ではユーザー権限:編集者がログインしたとき、「投稿」のカテゴリーや「リンク」を非表示にするやり方を。

Adminimizeを使ってWordpress管理画面サイドメニューを編集する方法

まず管理者でログインしてAdminimizeをインストール。インストールが済むとサイドメニュー「設定」の中にAdminimizeというリンクが生まれますのでそれをクリック。
クリックしたら、ページ上部のMiniMenuの中にあるMenu Optionsをクリック。


次に権限に対して非表示にしたい機能をチェックしていきます。

WordPress管理画面に表示したくない機能はチェックを入れる

チェックしたらUpdate Optionsボタンをクリックして終了です。以上思い出備忘録WordPress管理画面のサイドメニューを編集できるプラグイン。Adminimizeのご紹介でした。

クリスマスデザインのテクスチャに使えそうなPhotoshopブラシ

クリスマスのデザインをするときの、背景として使えそうなPhotoshopブラシを探しました。
ブラシの設定で間隔を広げたり、回転させたり、散布させたりするといい感じになると思います。
また、クリスマス以外にも、結婚式やバレンタインとかにも使えると思いますよ。

雪を降らせるブラシ
光を表現するブラシ。きれいです。少し色を変えつつ、何回かに分けてクリックするといい感じに
キラキラを演出
キラキラを演出 その2
雪の結晶のブラシ。
上の見本画像はたった2クリックで作りました。簡単でカワイイです。
羽のphotoshopブラシ。フカフカ。
リボンのPhotoshopブラシです。クリスマス以外にも使えそうです。

[商用利用OK!]シンプル・ライトな印象のPhotoshopグランジパターン10セット

デザインを施す際に、背景を一色でがベタッと塗ってしまうと物足りない場面があると思います。「ちょっと質感付けようかな。」ってときはブラシを使ったりナンダカンダやっていたんですが…。それでは効率的じゃない!と感じ今回の用意に至ったわけです。

そんなわけで商用利用OKな、Photoshopのグランジパターンのご紹介。個人でも商用でもなんでもフリーです。「使えるかも」と思っていただけたら、好きなときに好きなだけ使ってください!

色は白、ピンク、紫、水色、青、緑、黄色、ベージュ、オレンジ、茶色の10色セットのパターンになっておりまして、全体的な色調はペールトーン・ライトトーンあたりで統一(したつもり)です。

ピンク
水色
黄色
ベージュ
オレンジ
茶色

行く前から行きつけにしたくなるような海外レストランのWebデザイン

見てるだけで行ってみたくなる、何故かお腹が減ってくる。そんなレストランのWebデザインをdeviantARTからご紹介です。

爽やかでやさしい感じの寿司屋デザイン。左上に刀。
行きつけにしたい。お値段高そうだけど。
みんなで行ってみたくなるレストラン
南国レストランのwebデザイン。ここも行ってみたくなる!
清潔感のあるレストラン
ピザが食べたくなった…
ランチで行ってみたい!
headerイメージのarrow部分が漢字の「人」。この発想は無かったです。
こんなレストランがおいしくない料理を出すはずがない。
お腹が減りました。