目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

まとめてポップアップウィンドウを作る*Javascript*

このエントリーをはてなブックマークに追加
冬休みの課題として、まとめてポップアップウィンドウを作るJavascriptを書こうと思っていたのですが、ようやく着手できました。
ふぃ~。まだ改善しない点、ソースをきれいに書きなおさないといけないんだけど、とりあえず忘れないうちにメモっておきます。

ちなみに、firefox、IE9、Chromでは確認しました。
動きます。

CSS

親要素をdiv.pupupareaをrelativeにセット、ポップアップのspan.popupをabsoluteにセット。
マウスオーバーしたときにポップアップが現れるようにしたいので今は取り合えずvisivilityをhiddenにセットして隠しておきます。

位置もオートで設定したかったんですが、疲れたのでまた今度やりまする…。

HTML

マウスオーバーでポップアップしたいソースは全て下記のセットで作ります。
マウスオーバーのターゲットは何でもOK!
今回は<p>にしてみました。
class名とIDだけは同じにします。

Javascript

特定のタグのスタイルを変えるためにはオリジナルのIDを振ってやる必要があります。
HTMLの方ではすべてポップアップもマウスオーバーするターゲットのタグもIDが一緒が同じです。
それぞれのID名に単純にお尻に数をつけ置き換え、かぶらないようにします。

ソースの中では上のタグからID名 + 0、ID名 + 1、ID名 + 2~といった風にすべてIDに書き換えられているはずです。
このIDの数はついになっているので、
マウスオーバーすれば同じ数がついているポップアップが表示されるようにします。 背景を素材にしたりするだけで、とってもリッチなPOPUPが完成します。

サンプルを見る

追記

IE7~8ではgetElementByClassNameがサポートされてませんので、ポップアップ出現しません。
なのでgetElementByClassName→getElementByTagNameに変更。
さらにclassNameでふるいをかけるよう書き換えました。

html上、pタグとspanタグはそれぞれ、IDを書き換えます。 マウスオーバーのイベントはmOverの方だけに記述。
IE8だとCSSの問題でabsoluteとrelativeがうまく聞いてくれません…。
html5で書いたせいかな~、残念。8.7ともに角丸が聞かないのも仕方ないですね~。
あとはポップアップがたくさん重なるときは、配置場所を気を付けないと下のオブジェクトがかぶってしまいます。


サンプルを見る
スポンサーサイト
  1. 2012/12/30(日) 05:55:33|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

イラストに陰影*フォトショ*

このエントリーをはてなブックマークに追加
以前、自分の会社用IDを作った時、顔を罪のない範囲で修正しました。笑

シミやしわを消して髪や肌に少しツヤを加えて、陰影をつけた程度ですが(十分やろっ)何の変哲のない平面的なイラストにも応用出来ないかな、とふとおもったのでやってみます。

メイクテクから学ぶ予備知識

メイクで「顔面ブロッキング」というテクニックがあります。ベースメイク(ファンデーション)を立体的に創り上げるテクです。
まず、顔を正面・側面・その中間と三つの面のエリアにまとめます。
ベースとなるのはその中間のエリアです。
正面は鼻筋など「一番高い場所」に当たるのでハイライト、つまりその中間のエリアよりワントーン明るくします。
側面は本来影になる部分なのでその中間よりローライト、ワン〜ツートーンくらい暗くします。
境目をややボカせば、立体的に仕上がるので、この時点でメイクが八割は完成しちゃいます。


イラストを用意

イラレでイラストを描きます。
肌や髪などをざっとベタ塗りした適当なイラストを今回は用意しました。



今回はラインとべた塗を分けてスマートオブジェクトとして取り込んでみました。

グレーレイヤーを作成

新規のレイヤーを作成、「描画モード」を「オーバーレイ」・オーバーレイの中間色で塗りつぶすにチェック。

後から修正することを考えて、目、口と鼻、全体の輪郭…という風にレイヤーを分けて作業することをお勧めします。

陰影を付ける

ツールの覆い焼×焼き込みを使って陰影を付けて行きます。
覆い焼きは明るく・焼き込みは影を付けることができます。
使い方はブラシと一緒です。
覆い焼きを全体に入れるときは透明度10~20%がおススメです。
ブラシはボカシの入ったタイプを使用すると失敗しにくいと思います。目の輝きや艶をピンポイントで入れる場合はブラシサイズをグッと絞って透明度を50%ぐらいにします。

焼き込みで影を付けて行きます。覆い焼き同様広い範囲で使うときは透明を上げます。しっかり影を付けたい場合は、ブラシサイズをグッと絞って、透明度を50%程度に。

陰影の取り消しは50%グレー(BGRともに125:#808080)で塗りつぶせばOK!
「描画モード」通常にするとこんな感じになっています。

完成

影の濃さが足りない場合はグレーのレイヤーをさらに一枚追加して陰影をつけるといいみたいです。
昔コピックマーカーで絵を描いていた時を思い出します。
ちょっとびっくり!!

描画モード「オーバーレイ」を影が濃いめのところだけソフトライトに変えても雰囲気が変わっておススメ。

さらに冒険したい人は描画モードを「ハードライト」でハードな影にしたり、「ビビッドライト」で影が鮮やかににしたり…バリエーション豊富なイラストが仕上がります。強すぎる場合は透明度を調整すれば問題なし。

  1. 2012/12/29(土) 11:49:03|
  2. photoshop
  3. | トラックバック:0
  4. | コメント:0

Concrete5.6.0.2をさくらでインストール*コンクリート5*

このエントリーをはてなブックマークに追加
昨日WTM#52に参加してきました!

セッション:自由すぎるCMSconcrete5に興味を持ったので早速使ってみたいと思います。

コンクリート5.6.0.2(2012年12月リリース)
早速、DL。

しかし、問題が一つ…。
私のレンタルサーバーは「さくら」。
さくらにコンクリート5をDLするためにはいろいろ、いくつか細工しないといけないらしい。

さくらの場合のコンクリート5の公式HPに分かりやすく説明がありました。
その他のサーバー用にも親切なチュートリアルが用意されているので参考に!


下準備

1.サーバー側の設定
PHPのバージョンは 4以上でないと動かないのでPHP 5.2.17 [標準のPHP] (CGI版) に(2012年12月現在)。
空のデータベースを作ります。MYSQLはバージョンは5以上と指示がありますが、
5.5しか選べません。4はサポートすらしておらず、使用の際は「自己責任」と記載されているくらい(笑。

文字コードもUTF-8を選べば設定するまでもなくutf-general_ciになります。
心配性な人はphpMyAdminにログインして、確認してください。
当たり前すぎてやりがちなデータベースのパスワードは忘れないようどこかメモっておきましょう。

2.ファイルの書き換え
コンクリート5は基本UTF-8なので、文字化け防止のため、php.iniファイルを追加する。
メモ帳で作ってサーバーにアップするより、サーバー・コントロールパネル→アプリケーションの設定→PHPの設定から作成するのがベターです。
index.phpの中身を書き換える。これは、プリティURL(urlのindex.phpを隠す)を使うためらしいので、必要ないって人はしなくてもよいかも…。

3.各ファイルに追記と変更
さくらの場合、ディレクトリィが違うので下記ファイルの内容を少し書き換えると指示がありますが、
チュートリアルには「concrete5.x.x.ja」-「concrete」-「libraries」-「3rdparty」フォルダー内htmldiff.py…そのようなファイルは見当たらない…。とりあえず放置。

→5.6.0.2リリースに際して…Python の HTML DIFF プログラムを取り除き、タブベースの比較ツールに置き換え。2つ以上のバージョンを比較可能に

…とのこと。なるほど。

サーバーにUP

1.ZIPファイルをファイルエクスプローラーからサーバーにアップ
ここまで用意で来たら一旦ZIPに圧縮してサーバーにUPします。
私は任意のサブディレクトリ名にしたかったのでファイル名を変更しました。
さくらに搭載されている「ファイルマネージャー」だと悲しいかな、圧縮してもサイズが大きくてキューできませんと怒られます。仕方ないのでWINDOWSファイルエクスプローラーでwww直下に圧縮ファイルをDOラッグ&ドロップ。(その他FTTTPやwinPSPCやMac用のftpソフトがあれば何でもよいです)

2.ファイルマネージャーで解凍
ここでさくらのコントロールパネルに戻り、ファイルマネージャーから圧縮ファイルを解凍。
フォルダやファイルのパーミッションはさらっと見て必要なところは書き込みOK(705)だったので全く触りませんでした。

インストール

インストール画面。

言語は日本語を選択。 必要事項を入力。データベースの登録はパスワード以外サーバーのコントロールパネルからそのままコピペ。

一旦完成。

ZIP解凍の設定をします。
私は面倒くさいのでファイルマネージャーに直接書き込みました。
.htaccessのファイルを追加とあるが、入れたらかえっておかしなことになるのでとりあえず無視。

無事アップできました。
  1. 2012/12/24(月) 08:56:37|
  2. concrete5
  3. | トラックバック:0
  4. | コメント:0

Windowsファイルエクスプローラーから直接サーバにファイルをアップロード*Web全般*

このエントリーをはてなブックマークに追加
思い出した時に忘れないようにメモ。

ウィンドウズのファイルエクスプローラーから直接ファイルをアップする方法です。

とっても簡単だけど、最近便利なftpソフトがレンタルサーバー側に最初から搭載してあるのでうっかり忘れていました。フリーのftpソフトを落としてくるのもいいんですが面倒だったのでこのやり方でUPしてみることにしました。

ちなみにWin7でしかやったことがないのでそれ以外のOSは確認していません。

まずファイルエクスプローラーアドレスを入力する左窓に「ftp://」+以下サーバーのアドレスを入力。

ftp:// + gatoprateado.annex.jp(ドメインまたはIP)

これだけです。
後はユーザー名やパスワードなど求められてくるのでそれを入力すればサーバに接続できます。アップしたい階層にファイルやフォルダーをドラッグ&ドロップするだけで簡単にUPできます。

テーマ:Windows - ジャンル:コンピュータ

  1. 2012/12/23(日) 11:48:04|
  2. Web全般
  3. | トラックバック:0
  4. | コメント:0

既存のパターンを利用する*フォトショ*

このエントリーをはてなブックマークに追加
今回は既存のパターンを利用して手早く素材を作ります。

効果のカラー・グラデーション・パターンの三つのオーバーレイは非常に重宝しています。
工夫すれば何100通りもの素材が作れるのでぜひ利用してみてほしいです。

1.パターンオーバーレイを利用してフェルト風素材

まずはシェイプレイヤーと文字ツールだけで大体作りたいものを配置します。
今回は時間短縮がテーマなので特にあり物だけで作っていきます。
あとでカラーオーバーレイで好きな色に調整するのでどんな色で作ってもオッケーです。

一つだけオブジェクトを選択して、スタイルを編集します。
まず「パターンオーバーレイ」→「カラーペーパー」→「白い斑点のあるベージュ」を選択します。
パターンのサイズを調整します。

「光彩内側」の「透明度」・「ノイズ」をそれぞれ50%にセット。サイズは2px程度にします。
色はデフォルトのクリーム色よりやや白っぽくするとナチュラルに仕上がります。
ただし、白過ぎると不自然なので注意です。

「ドロップシャドウ」の「透明度」40%、「距離」1px、「サイズ」2px、「輪郭」を「くぼみ-深く」にセットします。
5%程度ノイズを加えてもOKです。

最後に「カラーオーバーレイ」で色を変えます。「画質モード」を「オーバーレイ」にセット、お好みの色に調整します。
このスタイルまるまるすべてのオブジェクトにコピペし、後からカラーオーバーレイの調整して色を変えます。


2.アレンジ

パターンを変えてみました。
上は「もみ皮テクスチュア」で皮素材風。
下は「ワッフルクラフト」を使用しています。
もちろん、カラーオーバーレイで少し色味も調整しています。

文字、葉っぱは以前やったキャンバス地ににじんだプリントのアレンジバージョンです。
「描画モード」を乗算にセットしレイヤーを複製、「透明度」をそれぞれ50、70%にセットした後少しずらしてプリントがずれた感じにしてみました。

テーマ:デザイン・イラスト・テンプレート - ジャンル:コンピュータ

  1. 2012/12/22(土) 09:58:15|
  2. photoshop
  3. | トラックバック:0
  4. | コメント:0

0から作る背景素材*フォトショ*

このエントリーをはてなブックマークに追加
最近制作の仕事が増えてきました。


環境が変わって、今まで作りだめていた素材が…ないっ。
と焦ることもしばしば。そこで素材0から短時間でバナーを作るTipsをまとめておきます。


1.古びたキャンバス


適当なサイズで新規PSDファイルを作成。背景をR:250・G:200・B:90(#fac85a)で塗りつぶします。
背景のレイヤーを2回複製し、下のレイヤーを「フィルター」→「スケッチ」→「クレヨンの絵コンテ画」を選択。照射方向を「下へ」を選択します。描画レベルなどは作りたいイメージに合わせて適宜調整します。「描画モード」を乗算に変えます。





もう一枚のレイヤーも同様にフィルターをかけるのですが、照射方向のみ「右へ」を選びます。




新しい空のレイヤーを作り、描画色は白、背景色をベージュR:230・G:200・B:160(#e6c8a0)にした状態でフィルター描画雲模様1をかけ、描画モードを乗算に。



色を白に変え、雲模様のフィルタをかけなければ純白キャンバス、雲模様フィルタを青系に変えれば微妙な色ムラのある染めた記事風になります。

テーマ:デザイン・イラスト・テンプレート - ジャンル:コンピュータ

  1. 2012/12/01(土) 09:57:27|
  2. photoshop
  3. | トラックバック:0
  4. | コメント:0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。