プロフィール

qmi

  • Author:qmi
  • html、css、フォトショ、イラレいじりは趣味と勉強を兼ねてます。

    -----------------------------------
    当サイトはリンクフリーです。
    当サイト内の記載内容・画像・デザイン等
    の無断転載を固く禁じます。

カテゴリー

最近の記事

最近のコメント

月別アーカイブ

最近のトラックバック

Amazon

ブロとも申請フォーム

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



--------(--) --:--| スポンサー広告| トラックバック(-)| コメント(-)

ノイズから作るパターン @Photoshop

*ノイズから作るモザイク・パターン

mozaik_1.jpgmozaik_2.jpg

新規レイヤーを用意
 ↓
フィルタ:"ノイズ"?"ノイズを加える"
 ↓
フィルタ:"ピクセレート"?"水晶" (左画像)
 ↓
フィルタ:"ピクセレート"?"モザイク" (右画像)
 ↓
色調やモザイクの大きさなど調整する。


2005-11-16(Wed) 16:28| How to Photoshop| トラックバック 0| コメント 0

網点 @Photoshop

*網点でモダンに

amiten.gifamiten.jpg

画像レイヤー(合成・加工する場合)、
新規レイヤーを用意する
 ↓
新規レイヤーをクイックマスクモードで、
太めぼかしブラシや範囲選択→ぼかし(ガウス)で網掛けになる部分を描く
(マスクモードなので黒で描く)
 ↓
フィルタ:"ピクセレート"?"カラーハーフトーン" をかける
初期値のままでOK
 ↓
クイックマスクモードを解除し、通常レイヤーに戻すと
描画部分が選択範囲になっている状態
 ↓
選択範囲を(または反転させて)好きな色で塗りつぶす
 ↓
画像と網点を合成、
または網点の選択範囲を画像の上で呼び出して、範囲外を切り取り

*いろいろやってみてこれがいちばんスムーズにいく方法でした。

amiten_2.jpg
(アレンジ)
フィルタ:"ピクセレート"?"カラーハーフトーン" をかけたあとに、
"ノイズ"?"ダストスクラッチ"で何pxかすると、ドット部分が滲んだようになじむ。


画像の複製レイヤーを作成
 ↓
フィルタ:"ピクセレート"?"カラーハーフトーン"
フィルタをチャンネル1?4まですべて45に設定
 ↓
新規レイヤー作成、好きな色で塗りつぶす
 ↓
描画モード:"スクリーン"にして
背面の網点画像に塗りつぶした色を反映
 ↓
すべてのレイヤーを結合、
描画モード:"乗算"
きれいに合成できる

*網点アレンジ?正丸

画像/正丸を作り、境界線をぼかして色付け
 ↓
レイヤー/画像より大きいサイズで正丸を作り、境界線をぼかす。
 ↓
フィルタ:"ピクセレート"?"カラーハーフトーン"
 ↓
イメージ:"色調補正"?"2階調化”
 ↓
イメージ:"色調補正"?"色相・彩度”
"色彩の統一"で色を調節、同系色にする
 ↓
画像レイヤーを手前にする
このとき、画像が下の網点と馴染むよう不透明度を少し落とす


*網点アレンジ?グラデーション

画像/グラデーションで色をつける
 ↓
フィルタ:"ピクセレート"?"カラーハーフトーン"
 ↓
イメージ:"色調補正"?"2階調化”
 ↓
イメージ:"色調補正"?"色相・彩度”
"色彩の統一"で色を調節する


【参考】
Photoshopのチュートリアル集


2005-11-16(Wed) 15:00| How to Photoshop| トラックバック 0| コメント 0

セレクタ記述

<h3>?</h3>
h3{
font-size: 15px;
font-weight: bold;
margin: 5px 0 20px 10px;
}
<h3 class="title">?</h3>
h3.title{
font-size: 15px;
}
<h3 id="title">?</h3>
h3#title{
font-size: 15px;
}
<div id="content">
<h3>?</h3>
</div>

#content h3{
font-size: 15px;
}
特定のidセレクタ(ブロック要素)内のh3セレクタに適用


2005-10-26(Wed) 16:10| CSS| トラックバック 0| コメント 0

レイアウトテンプレ

2カラム、3カラムの基本レイアウト設定です。

*----------------- 2カラム -----------------*
html
head
body

#wrapper
#sideber
#main


* HTML

* CSS


wrapperの入れ子に、サイドバーは左、メインは右にfloatプロパティで配置する。
この場合、HTML上では常にメインがサイドバーより先に配置されるようにすることが可能。
入れ子のラッパーと、左右の段の幅の合計の幅を一致させるが、borderやmarginなども考慮する。
ユーザビリティを優先させるなら、ラッパーを相対値(%)、サイドバーを絶対値(px)指定にしてリキッドレイアウトにする。


*----------------- 3カラム -----------------*
html
head
body

#wrapper
#sideber
#content →
#main
#extra


* HTML

* CSS


wrapperの入れ子に、サイドバー1は左、メインとサイドバー2(extra)をcontentの入れ子に入れて右にfloatプロパティで配置する。



2005-10-26(Wed) 16:04| ブログの構築| トラックバック 0| コメント 1

カスタマイズ用テンプレ

すっかり放置してました。。
と言うのも、tipsなりメモ書きが目的だったわけですが、ほぼ同じ内容を社内ブログの方に書くようになって。。
試作テンプレも全部中途半端だし。あはは・・

"集中できる"時間があったので、あらためてテンプレ制作でも・・とFC2内テンプレを物色したところ、「カスタマイズ用テンプレ」ができたんですね。
カスタム派にはこういうの待ってたんじゃないでしょうかね。ありがたい限りです。

早速DLしてみました。
っが!

確かに、俗に言う"DIV厨"のようにDIVDIVいってませんが、でもCSSがちょっと複雑すぎじゃ・・?
HTML見てすぐ諦めちゃった。 ←根性なしですw
私が勉強不足なんかしら。うーん。
どちらかといえば、Movable Typeのデフォルトくらいすっきりシンプルな方がいいんですがね。
たとえば、中身の濃さや難易度で低・中・高レベルに分けるとかしてくれたら、誰でもカスタマイズしやすくていいのになぁ。

気合を入れ直そうと、カリスマテンプラ屋さんのブログをふらふらはしご。
すると!素晴らしい記事を発見!
sugar potさんの「公式テンプレートcfdn_09徹底研究ぅ?♪」

サポートフォーラムでも、テンプレート名「cfdn_09」で検索かけるとFAQがヒットします。


2005-10-12(Wed) 14:54| テンプレート| トラックバック 0| コメント 2

ネタ帖

http://www.MdN.co.jp/webcre/

愛読書「web creators」のTipsやテクのサンプルが満載。
本書をアナログチックに参考にしてたけど、実際見るとわかりやすくてソースもコピれるし便利だ!
(なんで今まで気づかなかったんだろう・・・)


2005-08-12(Fri) 17:30| お役立ち| トラックバック 0| コメント 6

ブログの引越し&ログデータ移行

以前、MT(MovableType)からFC2にデータ移行させたときの別ブログに書いた記事ですが、検索が多いのでこっちにもコピっておきます。

---------------------------------------------------------------

MTほか過去ログをインポートする際、わからなくていろいろ調べましたが、やってみるとすっごく簡単でした。
180ちかくのログがあっという間にアップ、反映されました!
ただし、画像については別途こっちのサーバーにアップロードしないとダメみたい。


【MT形式のログのインポート方法】

MTの「エントリー書き出し」でログをtxt形式で保存。
 ↓
FC2の「ログのインポート」でtxtファイルを指定。

おしまいっ!


MT以外のブログや日記サイトからのログについては、log2mtでMTログ形式でtxt保存してインポートすればオッケー。

FC2のログをバックアップ(エクスポート)する際、txt形式になりますが、そのままメモ帳で見ると文字化けになってしまいます。
(メモ帳の文字コードの違い?みたいです)
ファイルを右クリック「プログラムから開く」でIEブラウザで見るとちゃんと見られます。

このバックアップ機能は知ってる限り他のブログサービスにはないものでとってもありがたい。
万が一、データ消えちゃったら不安だし、別のとこに引越しするときも便利。




2005-07-13(Wed) 15:22| お役立ち| トラックバック 0| コメント 5

スクロールテキストエリア

記事内で長めのソースを書いたり、サイドバーの月別アーカイブなどに。

* CSS

* HTML


CSSでサイズ設定せずHTMLで設定した方が、限定されず多くの用途に使えて便利かも。
rows="" → hight="ピクセル数" 高さ
cols="" → width="ピクセル数" 幅
にも置き換えられる。


2005-07-12(Tue) 16:15| ブログパーツ| トラックバック 0| コメント 0

HTML特殊文字変換ツール

HTMLソースをまんま書いてしまうと、ブラウザがそれをタグと勘違いをして、ハイパーリンクしてしまいます。

たとえば、<br>とここに記述するためにそのまま<br>と記述すると、ただ改行されるだけで記述ソースは表示されません。
表示させるためには、&lt;br&gt;といちいち変数に変えて入力しなくてはなりません。
とりあえず、&lt;と&gt;については、投稿画面上にあるけど、いちいち入力してソース作るのはとっても不便ですよね。
または、テキストエリアをcssで予め作っておき、その間に書き込む方法でもまぁなんとかなりますが・・・

単純にソースを変換したい場合、以下の特殊文字変換できるツールがあると一括で変換されて便利です。

blogeet(ブログ用DLツール) 
ブログの投稿画面から呼び出して使える編集ツールなのですっごい便利。

HTML特殊文字変換ツール
webページで変換でき改行の設定も同時に行えて便利。


2005-07-04(Mon) 17:35| テンプレート| トラックバック 0| コメント 0

Amazonアソシエイト向け便利ツール

Amazonアソシエイト向けのHTML作成ツールです。
ブログに本や音楽の記事を書くときにとても便利ですよん。

Amazonアソシエイト(Amazonのアフィリエイト)に登録していると商品リンクを掲載できますが、商品を検索してHTMLに生成する作業が結構面倒くさい・・
というのも、Amazonサイトでリンクを作る作業が。
そもそもAmazonのアフィリエイトがわかりずらいというのは私だけでしょうか・・?


「G-tool」
こちらのG-toolでは、商品を検索してIDを入力、表示された掲載情報(画像、内容、デザイン)を選択するだけでHTMLが生成されるので、とても作業が簡単です。

たとえば、こんな感じ↓
(スピッツ?音楽、CDハチミツ、価格を表示?シンプルを選択)

B00006HBF3ハチミツ
スピッツ 草野正宗 笹路正徳


Amazonで詳しく見る
by G-Tools


「amazie」
こちらは、指定した関連商品をFLASHアニメーションでランダムに表示します。

たとえば、こんな感じ↓
(スピッツ?音楽、横?サイズ中を選択)


*注 amazieに限っては、エントリー内(記事)使用の際に自動改行でbrが挿入され表示されないので、テキストフォーマット「HTMLタグのみ」に設定してください。 その代わり、記事内容の改行は手動でbr入れないとダメです・・


2005-07-04(Mon) 14:30| ブログパーツ| トラックバック 2| コメント 0

カレンダー

08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

ブログ内検索

RSSフィード

リンク

ADS




↑ 設置で100円、500円から払出し

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。