-
横浜のホームページ制作 スタジオFIXの社長ブログ、WordPressテーマを変更しました
ビックリしちゃいましたか？ (^-^)
横浜のホームページ制作 スタジオFIXの社長ブログ、
新しいWordPressテーマにお着替えしました〜。
シンプルなWordPressテーマを作りたかったのですが、
こう色々貼り付けてると…ちっともシンプルには見えないですね。(´･ω･)
きちんとデータを整理したら、また無料WordPressテーマとして
このデザインも配布する予定ですので、お楽しみに〜!
2010/02/04
-
所要時間10分、Photoshopで作る飛び出たド派手文字
このような飛び出た文字をIllustratorで作る場合、
「FILTERiT」というプラグインを使えば30秒で出来ちゃうんですが、
このために2万円以上もするプラグインを購入するのはもったいない。
そこで、Photoshopを使って所要時間10分で作る
飛び出たド派手文字チュートリアルです。
ネットショップのバナー作成などに重宝する小技ですYO!（・∀・）
Photoshopで縦500×縦500ピクセルの新規ファイルを作成します。
描画色を黒にして「ポイント10倍キャンペーン」と
テキストレイヤーを作成するのですが、この時
・ポイント
・10
・倍キャンペーン
は、それぞれ別のレイヤーにします。
サンプルではメリハリ感を出すために、
「10」の書体を変えフォントサイズを大きくしています。
この時のポイントは、ウェイトの太い書体を使うこと。
ここでは、「ポイント」「倍キャンペーン」に新ゴU（35pt）、
「10」に小塚ゴシックH（80pt）を使用しています。
レイヤーパレットで「ポイント」レイヤーを選択して
レイヤー効果＞グラデーションオーバーレイ…をクリックします。
上図のようにグラデーションを設定します。
描画モード：通常
不透明度：100％
グラデーション：#edd002〜#fffe7e
スタイル：線形
角度：90度
次に境界線を上図のように設定します。
サイズ：4px
位置：外側
描画モード：通常
不透明度：100％
塗りつぶしタイプ：カラー
カラー：#e60013
「ポイント」という文字がこうなります。
「10」、「倍キャンペーン」レイヤーも同様のレイヤースタイルを適用します。
これだけで十分な気がしてきましたが、もう一手間加えます。
この3つのレイヤーをグループ化して複製し、
元の「グループ1 のコピー」を不可視にします。
（目玉マークをクリックすると不可視になります）
「グループ1」を選択してグループを結合します。
レイヤーサムネールの上で
Macなら「Commond」、Windowsなら「Ctrl」を押したままクリックして
「グループ1」の選択範囲を選択します。
選択範囲＞選択範囲を変更＞拡張…＞拡張量を「6px」にします。
文字の周りに点線が表示されています。
選択範囲が文字より一回り大きくなりました。
「グループ1」の上に新規レイヤー「レイヤー1」を作成し、
描画色「黒」で塗り潰します。
「グループ1」レイヤーは不可視にしておきましょう。
ここで「グループ 1 のコピー」を可視化してから、
黒く塗りつぶした「レイヤー1」を上に5pxずらします。
なんとなく飛び出た感が出てきました！（・∀・）
黒く塗りつぶした「レイヤー1」を選択して
編集＞変形＞ゆがみ効果で
右上と左上のポイントをそれぞれ内側にドラッグして
台形っぽく変形させます。
ますます飛び出た感が増してきました！（・∀・）
最後に光をブラシで描き足せば、
とたんにネットショップのバナーらしくなりました！（・∀・）
グラデーションや、線の色、影の色を変えると
色々なバリエーションの飛び出た文字が作成できます。
Photoshopでも所用時間10分程度で、
こんなに簡単に飛び出た文字が作成できちゃうので、
ネットショップのバナー作成などに、ぜひお試しくださーい！(^-^)ノ
まぁ…私くらいになるとやっぱり面倒くさいので、
迷わず「FILTERiT」を使いますけどね！（笑）2010/01/29
-
WordPress無料テーマ配布 第2弾
WordPress無料テーマ配布 第2弾です。(^-^)
第1弾はこちら：WordPress無料テーマ配布
この WordPressテーマは、以下から無料でダウンロードいただけます。
無料WordPressテーマ 「StudioFix_Type002」 ダウンロード (230KB)
【WordPressテーマのご利用方法】
1. ダウンロードしたファイルを解凍してください
2. wp-content/themes の中にフォルダごとコピーしてください
3. WordPressへログインしてください
4. 外観→テーマの中に「StudioFix_Type002」という
テーマが表示されるので「使用する」をクリックしてください。
●プラグインについて
この無料WordPressテーマでは、ブログタイトルが表示される部分に
IE6でも透過PNGに対応できる JavaScriptライブラリ (無料) を使っています。
1. IE PNG Fix へアクセスして 「iepngfix.zip」 をダウンロードします。
2. ダウンロードしたファイルを解凍します。
3. 「iepngfix」フォルダを、wp-content/themes/StudioFix_Type002 へアップロードします。
「iepngfix」をサーバにアップロードしたら、
テーマフォルダ 「StudioFix_Type002」の中にある
スタイルシート「style.css」の25行目
behavior:url(iepngfix/iepngfix.htc);
の赤文字部分を、「iepngfix」をアップロードしたURLに書き換えます。
（例） behavior:url(http://www.studio-fix.com/iepngfix/iepngfix.htc);
最後に 25行目を書き換えた「style.css」を
wp-content/themes /StudioFix_Type002
にアップロードすれば、完了です。
この WordPressテーマは、最新のエントリーにPRバナーが掲載されます。
当社 Studio FIX Inc.のクレジットは消さないでご利用ください。
なおテーマのカスタマイズは自由ですので、お好みにあわせてご利用ください。2009/12/17
-
Web制作のプロとしてのプライドは何処へ…？
ちょっと前のことなのですが、「通りすがり太郎」さんというご親切な方から、
「スタジオFIXさんのホームページとソックリのサイトがあります」
というご連絡をいただきました。
さっそく見に行ってみると…
ホントに 当社のホームページ にそっくりなサイトでした。
思わず目をこすってみましたが、見れば見る程、
キャッチコピーも、情報設計も、コンテンツの見せ方も、
各種パーツのディテールまで、そっくりどころか「まんま」同じ。
明らかなパクり具合におもわず
友人の弁護士に相談しちゃったくらいです。（笑）
これが メーカーサイトだったり、ECサイトだったらまだ
「ありがちよね〜」で済んだのですが、
何より驚いたのは、相手が当社と同じWeb制作会社だったこと。
ホームページの制作のプロとしてのプライドは何処へ…？ (´･ω･)
●仮説その1：社長さんは知らない説
「自社のサイトをリニューアルするぞ！」と言われ
デザインアイデアが浮かばなかったWebデザイナーが
ネットサーフィン中に、イケサイ に掲載されている 当社のホームページ を発見。
「あ、これステキ！」
「ついでだからキャッチコピーも一緒でいいや」と安易にパクパク。
気がついたらまったく同じサイトの出来上がり。
●仮説その2：会社ぐるみ説
「自社のサイトをリニューアルしなくちゃなぁ…」と、アイデアに困った上層部達が
ネットサーフィン中に、イケサイ に掲載されている 当社のホームページ を発見。
「お、これでいいぢゃん！」
「ついでだからキャッチコピーも一緒でいいや」と悪意でパクパク。
当然まったく同じサイトの出来上がり。
もし私が逆の立場だったら、どちらの場合でも
「通りすがり太郎」さんに、そう思われた時点で Finish!!!! ですけどね!!2009/10/07
-
WordPress無料テーマ配布
先日、Movable TypeからWordPressに移行した
この横浜のホームページ制作 スタジオFIXの社長ブログですが、
早速このブログデザインを WordPressテーマとして無料配布いたしま〜す。(^-^)ノ
無料WordPressテーマ 「StudioFix_Type001」 ダウンロード (336KB)
1. ダウンロードしたファイルを解凍してください
2. wp-content/themes の中にフォルダごとコピーしてください
3. WordPressへログインしてください
4. 外観→テーマの中に「StudioFix_Type001」という
テーマが表示されるので「使用する」をクリックしてください。
●プラグインについて
この無料WordPressテーマでは、ブログタイトルが表示される部分に
以下のような透過PNGファイルを使っています。
グレーのチェックに見える部分が透けて
グリーンの葉っぱのに重なって見える仕組みになっているのですが、
残念ながら、IE6は透過PNGに対応しておらず、
↓のようにグレーに見えてしまいます。ダサい…。orz
これを回避するためには、
IE6でも透過PNG対応できる JavaScriptライブラリ (無料) がオススメです。
1. IE PNG Fix へアクセスして 「iepngfix.zip」 をダウンロードします。
2. ダウンロードしたファイルを解凍します。
3. 「iepngfix」フォルダを、WordPressフォルダへアップロードします。
「iepngfix」をサーバにアップロードしたら、
テーマフォルダ 「StudioFix_Type001」の中にある
スタイルシート「style.css」の25行目
behavior:url(iepngfix/iepngfix.htc);
の赤文字部分を、「iepngfix」をアップロードしたURLに書き換えます。
（例） behavior:url(http://www.studio-fix.com/iepngfix/iepngfix.htc);
最後に 25行目を書き換えた「style.css」を
wp-content/themes/StudioFix_Type001
にアップロードすれば、IE6でも透過PNGの美しいデザインが
表示されるようになりまーす。(^-^)
この WordPressテーマは無料でご利用いただけますが、
当社 Studio FIX Inc.のクレジットは消さないでご利用ください。
またテーマのカスタマイズは自由ですので、
お好みにあわせて変更してご利用ください。
なお配布テーマに関して作者はソフトウェアに対する一切の責任は負いません。
自己責任でご利用ください。2009/09/29
